页面分析
西电审核评估网分析
分区
<!-- 头部 -->
<div class="header">
<!-- 商标 -->
<div class="branding"></div>
<!-- 导航 -->
<div class="nav"></div>
</div>
<!-- 主要内容 -->
<div class="main"></div>
<!-- 底部 -->
<div class="footer"></div>
对齐
- HTML
<!-- 头部 -->
<div class="header">
<!-- 商标 -->
<div class="branding">
<div class="container"></div>
</div>
<!-- 导航 -->
<div class="nav">
<div class="container"></div>
</div>
</div>
<!-- 主要内容 -->
<div class="main">
<div class="container"></div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="container"></div>
</div>
- CSS
.container{
width:1208px;
margin:0 auto;
}
准备
- 清除标签自带的内外边距
* {
padding:0;
margin:0;
}
- 清除超链接的下划线
a {
text-decoration:none;
}
- 清除图片的边框
img {
border:none;
}
- 清除列表的项目符号
li {
list-style-type:none;
}
- 清除输入框获得焦点时的轮廓框
input {
outline:none;
}
- 浮动
.fl {
float:left;
}
.fr {
float:right;
}
.clearfix {
overflow:auto;
zoom:1;
}
- 文本对齐
.text-center {
text-align:center;
}
.text-right {
text-align:right;
}
.text-left{
text-align:left;
}
