HTML+CSS Grid学习

写前端页面，我开始的学习方法是记标签，但后来发现碰到需求，还是两手一摊，毫无思路。个人认为前端还是很像组合，复杂的组合是由次复杂的组合组成，而次复杂的是由更简单的单元构成。所以与其记标签，还不如记这些单元（所以自己起个名叫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，完整一个导航条实例：

...

...

2.3 内容间距

有时每个单元间有一定的间距，比如横向排列时，后一个要里前一个有一定距离，这个时候一种方式是使用span，设置span的右外边距，那么后一个自动会距离前一个一段距离（注意最后一个也同样会距离右侧一段距离，通常我们需要定义一个新的class去去掉边距，使之靠右）：
xxx span{ margin-right: 15px; }

接下来总结下，导航下面的内容（此部分有时候和导航上下顺序颠倒下，没有关系，只是在写html的顺序换一换就可以了），如qq的示例：

QQ

分析内容，可以分为：

• 左侧是一个图标，通常是网站的图标，点击会通常到达首页；
• 中间是一个搜索框；
• 右侧是一些信息（略）

2.4 图标链接

分析下，它首先是一个链接，不然点击不会跳转页面；其次链接显示的是一个图像。但要放下整个图像，需要考虑头像的高度、宽度，这样像截图的这一部分才能放下；最后一点，这个图标一般偏左。分析完，代码如下：

• HTML

说明：h1标签可加，也可以不加
*CSS

.header_middle{
    height: [考虑图片的高度设定高度];
    margin: 15px 0;
}

2.5 搜索框

这部分我学习到，它并不是一个简单的form（当然form也可以），而是结合了一些图片，比如截图部分，包括左边的边框，中间内容和右边有搜索的部分，这一部分涉及HTML的form中的table使用，以及css的background: url() ：
代码：
html：

说明：

• 设置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：

    

        
        More
    
    

        
            
...
            
...
            
... 
        
    

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

    

        

            
                
                
Web前端开发之HTML+CSS基础入门
                
 ... ...
            
        
        

            
                
HTML5+CSS快速入门
                2016-7-16
            
        
        

            
                
HTML5+CSS快速入门
                2016-7-16
            
        
   
    

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
}

[未完待续...]