在创建山东理工大学网站中，遇到问题：
1、把握整体框架，先划分各框架，并设颜色区分；
2、每块区域设定对应id=“”或class=“”，方便查询，命名以字母、数字、下划线组成。
<body> <div id="all"> <div id="head"> <div class="h_1"></div> <div class="h_2"></div> </div> <div id="nav"></div> <div id="photo"></div> <div id="bodyer"></div> <div id="footer"></div> </div> </body>
3、整体框架设置长，设为固定值，便于兼容，避免页面放缩时变形
#all{
max-1366px;
min- 1028px;
margin: 0px auto;
position: relative;
}
margin：标签盒子的外边距，0px，表示上下外边距为0px，auto，表示浏览器计算外边距。
目的是实现，div区域居中。
position在设置时，在父标签，一般设置relative，方便子标签浮动调整位置。
4、导航栏编辑，<div>中嵌套<li>标签，用css对<li>浮动，注意设置内容居中、间距设置，以及<a>标签的显示问题。
<div id="nav"> <ul> <li><a href="" target="_self">首页</a></li> <li><a href="" target="_self">新闻网 </a></li> <li><a href="" target="_self">学校概况</a></li> <li><a href="" target="_self">机构设置</a></li> </ul> </div>
对应css内容：
1 #nav{ 2 width: 85%; /* 区域宽度 */ 3 height: 50px; /* 区域高度 */ 4 line-height: 50px; /* 内容高度居中 */ 5 border-top: 1px solid #ccc; /* 区域上边框显示 */ 6 margin-left: 10%; /*左外边框宽度 */ 7 /* background: red;*/ 8 } 9 #nav ul{ 10 margin: 0px auto; /* ul列表居中*/ 11 } 12 #nav li{ 13 list-style-type: none; 14 float: left; 15 margin-left:2%; 16 margin-right: 1%; 17 position:relative; 18 } 19 #nav li a{ 20 text-decoration: none; /* 取消li列表格式*/ 21 color: #888888; 22 font-size: 16px; 23 } 24 #nav li a:hover{ /* 鼠标放上显示红色 */ 25 color:red; 26 }
border-top: 1px solid #ccc;
显示区域上边框，为灰色实线，粗细为1px，可作为分割线
也可直接用<hr>设置
<hr style="70%;margin:0 auto;height: 1px;color: #CCC">
text-decoration: none;
取消列表格式，去掉每列前的圆点标志
list-style-position: inside;
将列表的圆点标志放在区域内（默认区域外）
5、大区域内，平分成三个区域：
<div id="text"> <div id="text-1"></div> <div id="text-2"></div> <div id="text-3"></div> </div>
对应css代码：
#text{ width: 980px; height:630px; margin: 0 auto; /* background: #ccc;*/ } #text-1{ width: 33%; height: 630px; /* background:red;*/ float: left; } #text-2{ width: 33%; height:630px; /* background: yellow;*/ float:left; } #text-3{ width: 33%; height: 630px; /* background: green;*/ float: left; } #text-2,#text-1{ margin-right: 0.5%; }
三个区域每个占33%，text-1和text-2设置右外边框各站0.5%，全部设置左浮
6、列表显示时，无法完整显示，用...表<head> <style>
#text{ width: 100px; height: 50px; background: red; } #text li{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } </style> </head> <body>
<div id="text"> <ul> <li>内容123456</li> <li>内容23456</li> <li>内容345678</li> </ul> </div> </body>
在css中，设置#text li{}。