页面布局整体思路：
确定页面的版心(可视区域)，测量后即可得知。 分析页面的行模块和每个行模块的列模块。 一行中的列模块经常使用浮动布局，确定每一列的大小，然后确定列的位置。 创建HTML结构。 遵循先有结构、后有样式的原则。效果图如下：
1号为版心箱header 1200*42箱水平居中版心箱内含2号箱logo版心箱内含3号箱nav文字导航栏版心箱内含4号箱search搜索框版心箱内含5号箱user个人信息提醒4个箱均为浮动http://www
nav字符导航栏包含链接(li a )，其中包含无序列表，而不是链接a，并在a中写入文本li a可以清楚地说明其含义。 此外，在条例中，直接使用a更容易识别搜索引擎涉嫌积累关键字，(故意积累关键字有降级搜索引擎的风险)，更容易影响网站排名。 显示一行导航栏，对li施加浮动。 a本身是内联元素，可以在一行中显示，但li是块级元素，因此会影响a。 nav文本导航栏之所以不指定宽度，而是为链接a指定左右填充扩展框，是因为每个链接的字符数不同。 将来可以继续添加文字。导航栏注意点：
link rel=' style sheet ' href=' style.CSS ' http://www.Sina.com /
页面版心为1200px，各版心必须水平居中，可将版心定义为公共类：
. w{ width:1200px； margin :自动； }
index.html
headlinkrel=' style sheet ' href=' style.CSS '/headbodydivclass=' headerw '！ -徽标模块----divclass='徽标' imgsrc='images/徽标. png'/div！ -文本导航栏模块-- div class='nav' ul li a href='# '首页/a /li li a href='# '课程/a /li li a href='# '职业规划-搜索模块----div class=' search ' input type=' text ' value='输入关键字'/input button/button /div！ -用户模块----- div class=' user ' img src=' images/user.png ' style=' vertical-align 3360 middle ' QQ-lilei/ddle
*{ margin: 0； padding: 0； } .w{ width:1200px； margin :自动； (Li )列表样式： none； } a {文本描述： none； } .header{ height: 42px； margin :30 px自动； } .徽标{float:left； width: 198px； height: 42px； }.nav {浮动： left； margin-left: 60px； } .nav ul li{ float: left； margin: 0 15px； } .nave ul li a{ display: block； height: 42px； padding: 0 10px； line-height: 42px； color :黑色； }.naveullia : hover { border-bottom 33602 px solid # 00 a4ff； } .search{ float: left； width: 412px； height: 42px； 背景色： # 00 a4ff； 玛姬- left : 50px； } .search input{ float: left； width: 345px； 高： 40px； border: 1px solid #00a4ff； border-right: 0； color: #bfbfbf； font-size: 14px； padding-left: 15px； } .search button{ float: left； width: 50px； height: 42px； /*取消按钮的默认边框*/border: 0； ack ground : URL (images/BTN.png )； user {浮动：左； }