写前端页面，我开始的学习方法是记标签，但后来发现碰到需求，还是两手一摊，毫无思路。个人认为前端还是很像组合，复杂的组合是由次复杂的组合组成，而次复杂的是由更简单的单元构成。所以与其记标签，还不如记这些单元（所以自己起个名叫Grid学习，就像图像里的小格子，如下图）：
网格图
1 初始化布局设置
1.1 删除默认的边框布局
这个基本是从0开始写css的第一步，将padding和margin设置为0：
*{ margin: 0; padding: 0 }
1.2 图片的边框设置
一些老IE版本，图片边框默认有黑线，一般设置边框为none，来去掉：
img{border: none}
1.3 设置全文的字体
body属性设置字体大小和行高，以及使用字体，注意字体可以多写几种，比如微软雅黑、宋体（特别是有中文的时候，有的系统没有的话，如果后面有其他字体，至少文章内容可以显示），以下是一种通用设置：
body{ font: 14px/24px 'Microsoft YaHei'; }
1.4 整体内容居中
一般页面不是完全平铺整个浏览器的，而是两边有一定边距，内容居中，写法如下。宽度可以选择960或者1160px：
.container{ width:960px[/1160px]; margin: 0 auto; }
1.5 浮动
通常像一些布局，比如向左或者向右，这时候要设置对应的对齐方式。但注意的是如果设置浮动的元素后面跟着非浮动元素，可能会导致排列问题，可以在浮动和非浮动元素之间使用clear:both。以下依次为靠左、靠右和清除属性：
.left{float: left} .right{float: right} .cl{clear: both}
2 组件
2.1 导航条
我们常看到页面头部hearer（经常尾部footer）有一条有颜色的导航条，
oschina效果图
这个实现如下：
.nav{ width: 100%; height: 64px; background-color:yourcolor ; position: fixed; top: 0px; left: 0px }
几点说明：
- width是100%，平铺于整个宽度，当然里面的内容可以使用.container，就像oschina那样的效果。
- position设置为fixed，这是一种常用的方式这样页面往下拖的时候，导航条并不会跟着下来。
- 如果想里面的内容居中，则在.nav的div中，增加一级div，class为container.
2.2 一行内容有居左，居右
经常内容（特别是导航栏），有内容靠左，有内容居右，那怎么实现呢？答案是使用两个div，一个使用上面通用定义的left class，一个使用right class。这样两块内容就能分别向左、向右分开。
整理2.1和2.2，完整一个导航条实例：
<div > <div class="container"> <div class="left"> ... </div> <div class="right"> ... </div> </div> </div>
2.3 内容间距
有时每个单元间有一定的间距，比如横向排列时，后一个要里前一个有一定距离，这个时候一种方式是使用span，设置span的右外边距，那么后一个自动会距离前一个一段距离（注意最后一个也同样会距离右侧一段距离，通常我们需要定义一个新的class去去掉边距，使之靠右）：
xxx span{ margin-right: 15px; }
接下来总结下，导航下面的内容（此部分有时候和导航上下顺序颠倒下，没有关系，只是在写html的顺序换一换就可以了），如qq的示例：
QQ
分析内容，可以分为：
- 左侧是一个图标，通常是网站的图标，点击会通常到达首页；
- 中间是一个搜索框；
- 右侧是一些信息（略）
2.4 图标链接
分析下，它首先是一个链接，不然点击不会跳转页面；其次链接显示的是一个图像。但要放下整个图像，需要考虑头像的高度、宽度，这样像截图的这一部分才能放下；最后一点，这个图标一般偏左。分析完，代码如下：
- HTML
<div class="logo left">
<h1><a href="index.html"><img src="images/logo.jpg" alt="logo"></a></h1>
</div>
说明：h1标签可加，也可以不加
*CSS
.header_middle{
height: [考虑图片的高度设定高度];
margin: 15px 0;
}
2.5 搜索框
这部分我学习到，它并不是一个简单的form（当然form也可以），而是结合了一些图片，比如截图部分，包括左边的边框，中间内容和右边有搜索的部分，这一部分涉及HTML的form中的table使用，以及css的background: url() ：
代码：
html：
<div class="searchbar right">
<form action="index.html" method="GET">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="s_l left"></td>
<td class="s_c left">
<input type="text" name="text" id="s_c_text">
</td>
<td class="s_r left">
<button type="submit" name="submit"></button>
</td>
</tr>
</table>
</form>
</div>
说明：
- 设置table的cell*属性，是取消当加载图片的时候，三个图片之间的间隔；
- 中间部分是一个input输入框，而搜索是一个submit类型的button
css:
.s_l{
width:6px;
background: url("../images/s_z.jpg") no-repeat;
}
.s_c{
width:240px;
background: url("../images/s_c.jpg") repeat-x;
}
.s_r{
width:78px;
background: url("../images/s_r.jpg") no-repeat;
}
说明：url后面表示图片的放置方式，no-repeat表示只显示图片本身，repeat-x表示横向平铺，此外repeat-y表示纵向平铺；width宽度可以按照调试的结果设置大小
2.6 内容块
在新闻类页面中，经常见到一块一块的内容区，比如：
内容块
它左边一个标题或者图片，右边有More，或者是提供更多内容、其他内容，底下是一条横线。
开始我想的比较复杂，左边是一个图片，右侧是一个more，margin靠右下角，然后下面是一条br标签，学习到的写法是这个当成一个div块，底下的边框border是存在，就可以代替br标签了：
html：
<div class="description left">
<div class="title">
<img src="images/jianjie.jpg" alt="">
<span><a href="">More</a></span>
</div>
<div class="des_content">
<img src="images/jianjie_img.jpg" alt="">
<p>...</p>
<p>...</p>
<p>... </p>
</div>
</div>
</div>
css
.description{
width: 540px;
height: 360px;
margin-right: 20px;
}
.title{
padding-bottom: 8px;
border-bottom: 1px solid darkred;
position: relative;
margin-bottom: 10px
}
.title span{
position: absolute;
right: 0;
bottom: 0;
}
.title a{
color: darkred;
text-decoration: none;
}
.des_content img{
float:left;
margin: 0 10px;
}
.des_content p{
color: #616161;
text-indent: 24px
}
2.7 内容块列表
有时内容块的内容像list那样列出，但第一个列表没有列表开始的点：
内容块列表
这部分包括重点两部分：
1）除第一个外，每一个有一个点图标和标题、时间组成。这部分li点的图片使用backgroud:url实现, center left是垂直居中，水平靠左
2）第一个显示的是具体内容的图标：去掉点的图标，background就需要设置为none。
代码：
html
<div class="news_content">
<ul>
<li class="a">
<a href="">
<img src="images/list_img.jpg">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<p> ... ...</p>
</a>
</li>
<li>
<a href="">
<h3>HTML5+CSS快速入门</h3>
<span>2016-7-16</span>
</a>
</li>
<li>
<a href="">
<h3>HTML5+CSS快速入门</h3>
<span>2016-7-16</span>
</a>
</li>
</ul>
</div>
css:
.news_content {
}
.news_content li{
list-style: none;
height: 24px;
line-height: 24px;
position: relative;
padding-left: 15px;
margin-bottom: 6px;
background: url("../images/list_bg.jpg") no-repeat center left;
}
.news_content li.a{
background: none;
padding: 0;
height: 76px
}
.news_content li.a img{
float: left;
margin: 0 10px 10px 0
}
.news_content p{
font-size: 12px;
color: #888;
text-indent: 24px
}
.news_content h3{
list-style: none;
height: 24px;
line-height: 24px;
font-weight: normal;
font-size: 14px
}
.news_content a{
color: #616161;
text-decoration: none
}
.news_content span{
position: absolute;
right: 0;
bottom: 0;
color: #888;
font-size: 12px
}
[未完待续...]
网友评论