从屌丝到架构师的飞越（CSS篇）-CSS整合

一、介绍

整合就是把一些零散的东西通过某种方式而彼此衔接，从而实现信息系统的资源共享和协同工作。其主要的精髓在于将零散的要素组合在一起，并最终形成有价值有效率的一个整体。

CSS应用中我们将把一些CSS中常用功能整合在一起，完成我们的页面展示，取得1+1大于2的效果。

二、知识点介绍

1、<div>标签

2、<span>标签

3、<head>头部

4、CSS选择器扩展

5、CSS继承

6、BEM

7、盒模型

三、上课对应视频的说明文档

1、<div>标签

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

2、<span>标签

<span> 标签被用来组合文档中的行内元素

3、<head>头部

<title></title>标题

<title>HTML5是万维网的核心语言</title>

<meta/>网页文档的属性

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="description" content="HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改">

<meta name="keywords" content="HTML5,CSS3......" />

4、CSS选择器扩展

标签，ID,类

通配符选择器（＊）

后代选择器（Ｅ Ｆ）

群组选择器（selector1,selector2,...,selectorN）

5、CSS继承

要想了解css样式表的继承，我们先从文档树（HTML DOM）开始。文档树由HTML元素组成。

6、BEM

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。

block__element--modifier

7、盒模型

内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<title></title>

<style type="text/css">

#header,#siderLeft,#siderRight,#footer{

border:solid 1px #666;

padding:10px;

margin:6px

}

#header{width:500px}

#siderLeft{

float:left;

width:60px;

height:100px;

}

#siderRight{

float:left;

width:405px;

height:100px;

}

#footer{

clear:both;

width:500px

}

</style>

</head>

<body>

<div id="header">导航</div>

<div id="siderLeft">菜单</div>

<div id="siderRight">内容</div>

<div id="footer">底部说明</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name=“author” content="" />

<title>用CSS排版减小网页文件体积</title>

<style type="text/css">

#nav {

height: 25px;

width: 760px;

font-size: 14px;

list-style-type: none;

}

#nav li {

float:left;

}

#nav li a{

color:#000000;

text-decoration:none;

padding-top:4px;

display:block;

width:97px;

height:22px;

text-align:center;

background-color: #009966;

margin-left:2px;

}

#nav li a:hover{

background-color:#006633;

color:#FFFFFF;

}

</style>

</head>

<body>

<ul id="nav">

<li><a href="#">首 页</a></li>

<li><a href="flash.html">文 章</a></li>

<li><a href="#">相册</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">论 坛</a></li>

<li><a href="#">帮助</a></li>

</ul>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name=“author” content=“" />

<title>用CSS排版减小网页文件体积</title>

<style type="text/css">

<!--

* {margin:0px; padding:0px;}

body {

font-size: 12px;

margin: 0px auto;

height: auto;

width: 805px;

}

.mainBox {

border: 1px dashed #0099CC;

margin: 3px;

padding: 0px;

float: left;

height: 300px;

width: 192px;

}

.mainBox h3 {

float: left;

height: 20px;

width: 179px;

color: #FFFFFF;

padding: 6px 3px 3px 10px;

background-color: #0099CC;

font-size: 16px;

}

.mainBox p {

line-height: 1.5em;

text-indent: 2em;

margin: 35px 5px 5px 5px;

}

-->

</style>

</head>

<body>

<div class="mainBox">

<h3>前言</h3>

<p>如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模型，div排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，而改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。</p>

</div>

<div class="mainBox">

<h3>理解CSS盒子模式</h3>

<p>如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模型，div排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，而改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。</p>

</div>

<div class="mainBox">

<h3>转变我们的思路</h3>

<p>如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模型，div排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，而改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。</p>

</div>

<div class="mainBox">

<h3>熟悉工作流程</h3>

<p>如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模型，div排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，而改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。</p>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>相对定位和绝对定位实例</title>

<style type="text/css">

<!--

*{

margin:0px;

padding:0px;

}

body {

margin:10px;

font-size: 13px;

}

a:link {

color: #666;

text-decoration: none;/*去除链接下划线*/

}

a:visited {

color: #666;

text-decoration: none;

}

a:hover {

color: #F90;

}

h3 {

color: #FFF;

background-color: #F90;

width: 100px;

padding-top:3px;

text-align:center;

}

ul {

width: 300px;

border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/

}

ul li {

padding:5px;

border-bottom: 1px solid #CCC;

list-style:none;/*去除列表样式，这对于标准浏览器很重要*/

}

a {

position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/

display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/

}

a div {

display: none;/*初始化信息面板不显示*/

}

a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/

a:hover div {

position: absolute;

padding:5px;

display:block;

width: 245px;/*只给出宽度，高让它随内容多少自动调整*/

left:150px;/*这是相对父级A的定位*/

top: 20px;

border: 1px solid rgb(91,185,233);

background-color: rgb(228,246,255);

z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/

}

a img {

width:80px;

height:80px;

border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/

display:block;

position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/

top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/

left:5px;

}

dl {

width: 160px;

float:right;

color: #999;

line-height:20px;

}

dl dd span {

font-weight: bold;

color: #639;

}

-->

</style>

</head>

<body>

<h3>最新单曲</h3>

<ul>

<li><a href="#">01 爱的文身 黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />

<dl>

<dd><span>歌名:</span>爱的文身</dd>

<dd><span>歌手:</span>黄圣依</dd>

<dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>

</dl></div></a></li>

<li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />

<dl>

<dd><span>歌名:</span>累了</dd>

<dd><span>歌手:</span>阿信</dd>

<dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>

</dl></div></a></li>

<li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" alt="" />

<dl>

<dd><span>歌名:</span>漫漫 慢慢</dd>

<dd><span>歌手:</span>阿朵</dd>

<dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫 慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>

</dl></div></a></li>

<li><a href="#">04 我怀念的 孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" alt="" />

<dl>

<dd><span>歌名:</span>我怀念的</dd>

<dd><span>歌手:</span>孙燕姿</dd>

<dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>

</dl></div></a></li>

<li><a href="#">05 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />

<dl>

<dd><span>歌名:</span>花期越来越近</dd>

<dd><span>歌手:</span>后弦</dd>

<dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>

</dl></div></a></li>

</ul>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,667评论 5赞 472
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,361评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,700评论 0赞 333
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,027评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,988评论 5赞 361
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,230评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,705评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,366评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,496评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,405评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,453评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,126评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,725评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,803评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,015评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,514评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,111评论 2赞 341

推荐阅读更多精彩内容

  • 从屌丝到架构师的飞越（CSS篇）-CSS边框
    一、介绍 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线，CSS border 属性允许你规定...
    走着别浪阅读 587评论 2赞 3
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,579评论 0赞 6
  • CSS3的学习之路
    课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    繁华退却阅读 1,738评论 0赞 0
  • 实用的60个CSS代码片段
    1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，...
    kiddings阅读 3,147评论 0赞 11
  • 可堪成双（番外七）
    你还记得你最爱的人是我吗？ 对不起，我最爱的人是令小姐。 “啊！” 令熊一个激灵，从床上惊起。好久没有做噩梦了，这...
    籽盐阅读 365评论 0赞 0