您的位置：首页 > Web前端 > HTML

web页面化工作的前期基础学习（五）——HTML布局

2016-01-22 10:00 686 查看

web页面化
web页面布局，web页面化，前端页面化。这个是一类型工作。

网页的设计作图，以及页面布局工作原来是由一个人完成的 ——设计师。

页面的脚本，页面的数据绑定工作原来是由一个人完成的 ——软件工程师。

  而现在，基本上加了一个人的工作，分担了设计师和软件工程师一部分工作 ——前端工程师。

  设计师专注于网页画面的设计，不再完成页面化的工作，软件工程师注重业务逻辑运算，代码编写，不参与全部的JavaScript脚本工作处理，以及特效编写。这些工作分给了前端工程师。

  拿单一的一个动态网页制作来说，需要三个人的相互沟通与配合。当然这为了提高速度，但会增加一些沟通成本。事物都会变化的。。。。。

通用的样式

  @charset "utf-8";
body{margin:0px; padding:0px; color:#535353;font-size:14px; font-family:黑体,宋体,Arial;}

*{margin:0 auto; padding:0; font-family:黑体;}

/*

a标签定义的顺序 link、visited、hover、active

*/

a:link { color: #000; text-decoration: none;}

a:visited { text-decoration: none; color: #000;}

a:hover { text-decoration: none; color: #FF0000;}

a:active { text-decoration: none; color: #666;}

.clear{clear:both;}

ul{ list-style-type:none; padding:0px;}

ul li{ float:left; display:block; width:auto;}

img{border:0px;}

   dl{ height:auto;}

dl,dt,dd{display:block; float:left;}

纯手工打造，兼容ie6-9,Google，Firefox等浏览器  站点案例：http://www.cyd-design.com/

不管你做什么，思维比较重要。我们先学会拿来、模仿，然后才能理解、制造出自己的东西。知识其实不是某个人或者某个民族的专利，我认为应该是全世界的。

在做页面布局的时候，针对新手，最好不要使用 Dreamweaver CS3，这个版本在写标签的时候不会自动添加结束标签。编写HTML代码的时候，导致丢失结束标签，而乱套。

下面来做个案例（这里采用HTML5+CSS3标准）：

文件名为2.html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<link href="/css/2.css" type="text/css" rel="stylesheet" /> 
<script type="text/javascript" src="/js/2.js"></script> 
<title>文档的标题</title>
</head>
<body>

<div class="main">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
<div class="clear"></div>
</div>

<div class="main">
<div class="key">
我是每一个标签都在这儿写一遍，在<span title="关键字">Macromedia Dreamweaver MX 2004 </span>里，按F12 进行每个标签浏览效果！
  </div>
</div>
</body>
</html>

样式文件2.css代码

@charset "utf-8";
/*定义页面body样式*/
body{margin:0px; padding:0px; color:#535353;font-size:14px; font-family:黑体,宋体,Arial;}
*{margin:0 auto; padding:0; font-family:黑体;} /*定义页面所有标签样式，这个比较开销资源*/
/*
a标签定义的顺序 link、visited、hover、active
*/
a:link { color: #000;text-decoration: none;}
a:visited { text-decoration: none;color: #000;}
a:hover { text-decoration: none;color: #FF0000;}
a:active { text-decoration: none;color: #666;}

.clear{clear:both;}
ul{ list-style-type:none; padding:0px;} /*无序列标签样式*/
ul li{ float:left; display:block; width:auto;}
img{border:0px;}
dl{ height:auto;}
dl,dt,dd{display:block; float:left;}

/*主体标签样式定义最大宽度100%，本身宽度100%，最大高度100%，高度auto*/
.main{max-width:100%; width:100%; max-height:100%; height:auto; margin:10px 0px;}
/*标签样式本身宽度100%，高度24px,行高24px*/
.key{width:100%; height:24px; line-height:24px;}
.key span{font-size:16px; color:#00FF00;}
.main ul li{width:20%; text-align:center; font-weight:bold;}

效果：

在布局时，针对相同的版块采用ul li,dl,dt,dd等标签来布局。有些新手从头到尾大量使用div，对div情有独钟，因为没熟悉其他的标签在什么情况下使用导致。只有不断的编写，写完不断的浏览看效果（在不同的浏览器下看），反复修改，反复浏览。这样才能体会到属性变化，属性值更换的效果。以及布局时怎么灵活控制。在自己疑惑的时候，带着问题去百度，才有更好的收获。也只有“抄袭”别人的好代码，自己动手学习。才能更快的成长。大牛都是时间与努力造就的，菜鸟都只是短暂的，除非安于现状，不想成长；那么大牛与菜鸟无法产生距离。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航