前端开发基础（二）——CSS

其他 2020-04-17 10:45:37 阅读次数: 0

目录

一.CSS初识（层叠样式表）

二.CSS选择器

三.CSS字体样式属性调试工具

四.标签显示模式 / CSS三大特性等

五.盒子模型（CSS重点）

六.浮动

七.学成在线

八.定位

九.高级技巧

          十.综合案例

 

一.CSS初识（层叠样式表）

1.理想中的结果： 结构(html)与样式(css)相分离

2.作用：用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

3.引入CSS样式表

<!-- 行内式（内联式）：控制当前标签，没有实现样式和结构分离 -->
<标签名 style="属性1:属性值1; ..."> 内容 </标签名>

<!-- 内嵌样式表：写在head标签之间，控制当前页面，未彻底分离 -->
<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
        ...
    }
</style>
</head>

<!-- 外部样式表：控制整个站点，实现样式和结构完全分离 -->
<head>
  <link rel="stylesheet" type="text/css" href="css文件路径" />
</head>

二.CSS选择器

1.作用： 选择标签， 把想要的标签选择出来。

2.分类一：css基础选择器

①<!-- 关于多类名：各个类名中间用空格隔开，区分一下类选择器（写在css里的，用逗号或者其他符号隔开） -->
<div class="pink fontWeight font20">亚瑟</div>（写在标签里的）

②id选择器和类选择器的区别：

类选择器可以被许多标签重复使用，id选择器仅能被一个标签使用(和JavaScript搭配使用)。

③通配符选择器：会影响页面响应速度，不推荐随便使用。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

3.分类二：复合选择器 

复合选择器：由两个或多个基础选择器，通过不同的方式组合而成的。

作用：选择更准确的目标元素标签。

3.1 后代选择器（包含选择器 重点）

.class h3{color:red;font-size:16px;}    //空格分离

对子代目录下全部标签起效果，包括儿子的儿子。

3.2 子元素选择器

.class>h3{color:red;font-size:14px;}    //>符号分离

只能对子代第一个亲儿子起效果，不包括儿子的儿子。

3.3 交集选择器

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格！

3.4 并集选择器（重点）

<!-- .one 和 p  和 #test 这三个选择器都会执行颜色为红色，通常用于集体声明 -->
.one, p , #test {color: #F00;}

任何形式的选择器（标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分，逗号隔开。

3.5 链接伪类选择器（重点）

 a:link         /* 未访问的链接 */
 a:visited      /* 已访问的链接 */
 a:hover        /* 鼠标移动到链接上  用的最多 */
 a:active       /* 鼠标没松手时的链接 */

记忆法则：love hate 爱上了讨厌  一定一定要按顺序写这些，不然会不起效果！实际开发中可能不会写全四个状态。

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

3.6 复合选择器总结

三.CSS字体样式属性调试工具

1.font字体

①谷歌默认文字大小：16px，不同浏览器默认大小可能不同，所以要在body样式中统一设置。

②可以同时指定多个字体，中间以逗号隔开，如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以电脑默认的字体为准。

<!-- 注意中文字体名需要添加英文双引号，尽量使用系统默认字体 -->
p {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

③font：综合设置字体样式：一定不可以颠倒顺序！必须保留font-size和font-family属性，其他可以省略。

选择器 { font: font-style  font-weight  font-size  font-family;}

2.css外观属性 

①颜色：#FF0000 = #F00 = 红，#00FF00 = #0F0 = 绿，#0000FF = #00F = 蓝

②text-align文本水平对齐方式：是让盒子里面的内容水平居中， 而不是让盒子居中对齐。

③一般情况下，行高比字号大7、8像素就可。如谷歌：line-height: 24px;（16px+8px）

④首行缩进2个字： text-indent: 2em;  1个em（字符宽度的倍数）就是1个字的大小 。

⑤none：无下划线；underline：下划线；overline：文本上方划线；line-through：删除线。

3.开发者工具（chrome）

①谷歌浏览器中：“按F12”或者是 “shift+ctrl+i” 打开开发者工具。/  菜单： 右击网页空白出--检查。

②左侧是html页面结构，右侧是css样式，css样式可以改动数值和颜色查看更改后效果，但最后要回源文件中保存修改。

4. sublime快捷操作emmet语法

//生成标签 直接输入标签名 按tab键即可。 比如 div+tab
//生成多个相同标签 加上 * 就可。 比如 div*3 = 快速生成3个div
//生成带有类名或者id名字， 直接写 .demo 或者 #two + tab 键
//有父子级关系的标签 用 >。 比如 ul > li*n 
//有兄弟关系的标签 用 +。 比如 div+p

//生成的div类名是有顺序的 可以用 自增符号 $
.demo$*3        
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

5.第三模块综合案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第三部分综合案例-体育页面</title>
	<style>
		body {
			font-size: 16px;    /* 设置页面整体默认字体大小 */
		}
		.title {
			font-weight: 400;  	/*让字体不加粗，400相当于normal */
			/*color: #FF6700;*/   /* 十六进制 */
			/*color: rgb(255,103,0);*/    /* rgb */
		}
		em {
			font-style: normal;    /*让倾斜的标签 不倾斜*/
		}
		.people {
			text-decoration: underline;    /* 去除链接下划线 */
		}
		.btn {
			color: green;
			font-weight: 700;    /* 相当于字体加粗 */
		}
		.tac { 
			text-align: center;    		/*文本 水平居中对齐*/
		}		
		p {
			line-height: 26px;			/*行高 */
			text-indent: 2em;    /*首行缩进2个字的距离em是倍数关系，1em就是1个字的距离 */
		}
        ...
	</style>
</head>
<body>
    <!-- 同时采用两个类名，表示调用两个类选择器 -->
	<h1 class="title tac"> 这里是标题 </h1>

<div class="tac">  
     <span class="time">2017年07月16日20:11</span> 
     <span class="people"> 新浪体育 评论中大奖 （11人参与）</span> 
     <a href="#">收藏本文</a>
     <input type="text" value="请输入查询条件" class="search" />
     <input type="button" value="搜索" class="btn" />
</div>
<hr />
<p>
	新浪体育讯　7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯...
</p>
    ...
</body>
</html>

四.标签显示模式 / CSS三大特性等

4.1 标签显示模式（display）重点

1.标签显示模式：标签以什么方式显示，比如div 自己占一行， span 一行可以放很多个。

2.标签分类：块标签（块元素）、行内标签（行内元素）

3.常见的 块元素 有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。

4.块元素特点：（1）自己独占一行。

（2）高度，宽度（默认是容器（父级宽度）的100%）、外边距以及内边距都可以控制。

（4）是一个容器，里面可以放行内或者块级元素（p、hx、dt等除外，这里只能放文字）。

5.常见的 行内元素（内联元素） 有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。

6.行内元素特点： （1）一行可以显示多个。

（2）高、宽（默认宽度就是它本身内容的宽度）直接设置是无效的。

（3）行内元素只能容纳文本或则其他行内元素。

7.常见的 行内块元素：<img />、<input />、<td>，可以对它们设置宽高和对齐属性。

8.行内块元素的特点：（1）一行可以显示多个。

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

9.display总结：

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

4.2 行高

1.行高 = 上距离 + 内容高度 + 下距离

2.上距离和下距离总是相等的，因此文字看上去是垂直居中的。

3.行高和高度的三种关系：

①行高 = 高度 文字会 垂直居中

②行高 > 高度 文字会 偏下

③行高 < 高度 文字会 偏上

4.3 CSS背景（background）

background-color:颜色值;   默认值是 transparent 透明的

/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
background-image : none | url (url) 
background-image : url(images/demo.png);  

background-repeat : repeat（默认纵横平铺） | no-repeat（常用） | repeat-x | repeat-y

background-position :x y  //一定按照先左右x、再上下y的顺序 设置背景图片位置
background-position : length || length  //10px 10px
			/*background-position: 50px 10px ;*/
background-position : position || position  //top | bottom | left | center | right
            /*background-position: right top; 右上角*/
			/*background-position: 10px center;*/  //混合使用：距离左边x10px，上下y居中

			/*这种写法一般是我们以后 超大背景图片的做法 背景定位*/
			background-position: center top;

			/*背景固定的*/
			background-attachment: fixed;

			/*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
			background: #ccc url(images/sms.jpg) no-repeat fixed center top;

            /*背景透明：rgba：.2相当于0.2 表示透明度（范围是0-1）*/
			background: rgba(0, 0, 0, .2);

导航栏实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.nav {
			/*让里面的6个链接 居中对齐水平  这句话对 行内元素 行内块元素都有效果的*/
			text-align: center;
		}
		.nav a {
			/*有大小的 因为a 是行内元素 不能直接设置宽度和高 必须要转换 行内块元素*/
			display: inline-block;
			width: 120px;
			height: 50px;
			/*行高等于盒子的高度 就可以让单行文本垂直居中*/
			line-height: 50px;
			color: #fff;
			/*background-color: pink;*/
			text-decoration: none;
			/*背景简写*/
			background: url(images/bg.png) no-repeat;
		}
		/*鼠标经过nav里面的链接， 背景图片更换一下就好了*/
		.nav a:hover {
			background-image: url(images/bgc.png);
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
	</div>
</body>
</html>

效果展示：

4.4 CSS三大特性（层叠性、继承性、优先级）

1.层叠性：样式冲突，遵循的原则是 就近原则 。

...
	<style>
		div {
			color: red;
			font-size: 30px;
		}
<!-- 此处会根据就近原则决定采用下方的div，颜色为粉色-->
		div {
			color: pink;
		}
	</style>
</head>
<body>
	<div>
		 长江后浪推前浪，前浪死在沙滩上。
	</div>
...

 2.继承性：子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

	<style>
		div {
			color: red;
		}
	</style>
</head>
<!-- 未设置<p>的颜色，但是p继承了div的颜色，王思聪为红色 -->
<body>
	<div>
		<p>王思聪</p>
	</div>

3.CSS优先级（重点）

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越（比如0,0,1,0  ＞0,0,0,12）。

	<style>
		/*div {
			color: red;
		}*/
		/*标签选择器 权重 0,0,0,1  小组长*/
		div {
			color: pink!important;
		}
		/*类选择器 权重 0,0,1,0 班长*/
		.one {
			color: blue;
		}
		/*id 选择器 权重 0,1,0,0  班主任*/
		#two {
			color: green;
		}
		/*style= 行内样式表 权重 1,0,0,0  校长*/
		/*!important 在样式属性的后面添加 权重最高 ∞  教育局局长*/
		/*最后显示为粉色*/
	</style>
</head>
<body>
	<div class="one" id="two" style="color: yellow;"> 权重还有30秒到达战场 </div>

五.盒子模型（CSS重点）

1.网页布局本质：

首先利用CSS设置好盒子的大小，然后摆放盒子的位置。

最后把网页元素比如文字图片等等，放入盒子里面。

2.盒子模型（Box Model）：元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

3.盒子边框（border）：

border : border-width || border-style || border-color 
<!-- border-collapse:collapse; 表示相邻边框合并在一起，否则边框会重叠加粗 -->
<style>
	table {
		width: 500px;
		height: 300px;
		border: 1px solid red;    /*复合写法 没有顺序*/
	}
	td {
		border: 1px solid red;   /*可以先设定总体边框，再在下面设置单独border-left的样子*/
		text-align: center;
	}
	table, td {
		border-collapse: collapse;  /*合并相邻边框*/
	}
</style>

4.内边距（padding）：内容与盒子之间的距离。

内容和边框有了距离，添加了内边距，盒子会变大，所以设置宽高后，要减去内边距，从而维持盒子原有大小。

如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

padding复合写法：

新浪导航栏的核心就是因为里面的字数不一样多，所以我们不方便给宽度，还是给padding ，撑开盒子的。

<style>
	/*清除元素默认的内外边距*/
		* {
			margin: 0;
			padding: 0;
		}
		.nav {
			height: 41px;
			background-color: #FCFCFC;
			/*上边框*/
			border-top: 3px solid #FF8500;
			/*下边框*/
			border-bottom: 1px solid #EDEEF0;
		}
		.nav a {
			/*转换为行内块*/
			display: inline-block;
            /*行高=高度：保证字居中显示*/
			height: 41px;
			line-height: 41px;
			color: #4C4C4C;
			/*代表 上下是 0  左右是 20 内边距*/
			padding: 0 20px;
			text-decoration: none;
			font-size: 12px;
		}
		.nav a:hover {
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">设为首页</a>
        ...
		<a href="#">关注我</a>
	</div>
</body>

目标效果：

5.外边距（margin）：盒子和盒子之间的距离。

块级盒子水平居中：①必须设置宽度，给左右外边距设置auto。

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;
text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 上下margin都可以 */

6.插入图片和背景图片的区别

  1. 插入图片 比如产品展示类 移动位置只能靠盒模型 padding margin
  2. 背景图片 用于小图标背景 或者 超大背景图片 移动位置只能通过 background-position
 img {  
		width: 200px;      /* 插入图片更改大小 width 和 height */
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}
 div {
		width: 400px;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
	}

7.清除元素内外边距（重要）

行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}	  /*这是一个神奇的代码  以后写css 第一句话*/

8.外边距合并（使用margi定义块元素垂直外边距时） 

（1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距 ≠ margin-bottom + margin-top，而是 取两个值中的较大者 ，这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：只给一个盒子添加margin

（2）嵌套块元素垂直外边距的合并（塌陷）

	<style>
		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			/*嵌套关系 垂直外边距合并  解决方案 */
			/*1. 可以为父元素定义上边框  transparent 透明*/
			/*border-top: 1px solid transparent;*/
			/*2. 可以给父级指定一个 上 padding值*/
			/*padding-top: 1px; */
			/*3. 可以为父元素添加overflow:hidden。*/
			overflow: hidden;
		}
		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>

9.盒子模型布局稳定性

  width >  padding  >   margin

原因：width无问题，padding会影响盒子大小，margin会有外边距合并。

10.ps基本操作

  1. 文件--打开 -- 可以打开 我们要测量的图片
  2. ctrl+r 可以打开标尺 或者 视图 -- 标尺
  3. 右击标尺， 把里面的单位改为 像素
  4. ctrl+ 加号 键 可以 放大 视图 ctrl+ 减号 缩小视图
  5. 按住空格键， 鼠标可以 变成小手 ，拖动 ps 视图
  6. 用选区 拖动 可以 测量 大小
  7. ctrl+ d 可以取消选区 或者旁边空白处点击一下也可以取消选区

11.去掉 列表 li 默认样式（小圆点）

li { list-style: none; }

12.圆角边框css3

border-radius: 50%;    /*让一个正方形变成圆形，也可替换成半径长度20px*/

13.盒子阴影css3

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
		/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
		/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
        /* 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset */
        /* 前两个属性是必须写的。其余的可以省略 */
}

效果展示：

14.css书写规范

（1）空格规范

/*选择器 与 { 之间必须包含空格*/
.selector {
}
/*属性名 与 : 之间不许空格， : 与 属性值 之间必须有空格*/
font-size: 12px;

（2）选择器规范

/* 并集选择器，每个选择器声明必须独占一行 */
/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}
/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

/* 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确 */
/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login  input {}
.comment div * {}

15.总结 

六.浮动

1.网页布局的核心——就是用 CSS来摆放盒子。

CSS提供了3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动、定位。

2.浮动：让多个盒子div水平排成一行，最早用来控制图片，实现文字环绕图片效果。

口诀：浮、漏、特

	<style>
		.one {
			/*不是标准流了， 漂浮起来， 相当于不占位置，浮在标准流的上面*/
			float: left;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two {/*是标准流，因为浮动.one不占位置，所以.two在.one下面*/
			width: 300px;
			height: 300px;
			background-color: purple;
		}
	</style>

效果：

口诀：浮、漏、特

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */
    /* display: inline-block; */

    /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */
    float: left;
}

就是说 float 可以实现 inline-block 的效果，让元素可以一排显示，并且没有空隙。  

浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。

3.float应用（重要）：小米案例模仿

一个完整的网页，是 标准流 + 浮动 + 定位 一起完成的。

	<style>
		/*清除元素默认内外边距样式*/
		* {
			margin: 0;
			padding: 0;
		}
		/*清除列表样式 前面的小点点*/
		li {
			list-style: none;
		}
		.box {    /*总体大盒子水平居中处理*/
			width: 1226px;
			height: 615px;
			background-color: pink;
			margin: auto;
		}
		.left {    /*左边left盒子作漂浮处理，会飘在大盒子的上方*/
			float: left;
			width: 234px;
			height: 615px;
			background-color: purple;
		}
		.left img {    /*左边盒子放的图片宽度应该跟left盒子一样宽*/
			/*width: 234px;*/
			width: 100%;    /*百分百表示宽度占据盒子宽度的100%*/
		}
		.right {    /*右边right盒子作漂浮处理，会飘在大盒子的上方*/
			float: right;
			width: 992px;
			height: 615px;
			background-color: skyblue;
		}
		.right li {    /*对右边盒子内的块元素li作漂浮处理，不能给其他的设置*/
			float: left;
			width: 234px;
			height: 300px;
			background-color: pink;
			margin-left: 14px;    /*利用左边距来让盒子出现空白间隔，一定是左边距，看样图*/
			margin-bottom: 14px;
		}
	</style>
</head>
<body>
    <!-- 总体架构：设置大盒子box，包括一个左边的盒子left，右边的盒子ul列表 -->
	<div class="box">
		<div class="left">
			<img src="images/mi.jpg" alt="">
		</div>
		<ul class="right">
			<li>1</li>
               ...
			<li>8</li>
		</ul>
	</div>
</body>

结果展示：

4.导航栏案例：实际重要的导航栏中，不会直接用链接a 而是用 li 包含链接(li+a)的做法。

直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

5.浮动的扩展

1). 浮动元素与父盒子的关系

  • 子盒子的浮动参照父盒子对齐
  • 不会与父盒子的边框重叠，也不会超过父盒子的内边距 ​

2). 浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

  • 浮动的，那么当前盒子会与前一个盒子的顶部对齐，即水平摆成一排；
  • 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方，因为普通流占据空间，所以不会让盒子浮上来。
  • 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

3).如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题。

6.清除浮动（clear）

目的：解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。

使用场景：①父级没高度 ②子盒子浮动了 ③影响下方布局，则清除浮动。

/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			/*background-color: pink;*/
			border: 1px  solid red;
			/*清除浮动 方法二：给父级添加 overflow 就可以清除浮动 不需要加新标签*/
			overflow: hidden;
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}
		/*清除浮动 方法一：额外标签法*/
		.clear {
			clear: both;
		}

        /*清除浮动 方法三：给父级添加after伪元素*/
		/*下面是固定代码，要在父元素类名中引用.clearfix*/
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}
		.clearfix {
			*zoom: 1;  /*ie6,7 专门清除浮动的样式*/
		}
        /*清除浮动 方法四：给父级添加双伪元素*/
		/*下面是固定代码，要在父元素类名中引用.clearfix*/
        .clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;    /*ie6,7 专门清除浮动的样式*/
		}
	</style>
</head>     
<body>
	<div class="one clearfix">    /*父级元素盒子*/
		<div class="damao"></div>    /*子级元素兄弟一*/
		<div class="ermao"></div>    /*子级元素兄弟二*/
		<div class="clear"></div>    /*清除浮动 方法一：额外标签法*/
	</div>
	<div class="two"></div>    /*可能会被上述浮动干扰的其他普通流盒子*/
</body>

效果展示：

7.ps切图插件（ cutterman插件要求你的ps 必须是完整版）

官网: http://www.cutterman.cn/zh/cutterman

①用切片选中图片：选完之后 -- 图层菜单：新建基于图层的切片 -- 利用辅助线切图（基于参考线的切片）

②导出切片：文件菜单 -- 存储为web设备所用格式 ---- 选择 我们要的图片格式 ---- 点存储 --- 别忘了选中的切片

辅助线和切片的使用及清除：视图菜单 -- 清除 辅助线/ 清除切片

8.行高等与高度只能让单行文本垂直居中，两行不可。

9.子盒子宽度可以比父盒子大。

10.总结

七.学成在线（结构分析）

1.CSS属性书写顺序（重点）

  1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

2.布局流程：版心（可视区）、分析行模块以及每个行中的列、制作html结构、运用盒子模型divcss控制模块

3.页面制作（结构分析）：这个页面的版心是 1200像素 每个版心都要水平居中对齐，所以，我们干脆把版心定义为：

.w {
    width: 1200px;
    margin: auto;
}

（1）头部制作

  • 1号是版心盒子header 1200 * 42 的盒子水平居中对齐, 上下给一个margin值就好了。
  • 版心盒子 里面包含 2号盒子 logo
  • 版心盒子 里面包含 3号盒子 nav导航栏
  • 版心盒子 里面包含 4号盒子 search搜索框
  • 版心盒子 里面包含 5号盒子 user个人信息
  • 注意，要求里面的 4个盒子 必须都浮动

（2）banner制作

  • 1号盒子是通栏的大盒子banner， 不给宽度，给高度，给一个蓝色背景。
  • 2号盒子是版心， 要水平居中对齐。
  • 3号盒子版心内，左对齐 subnav侧导航栏。
  • 4号盒子版心内，右对齐 course 课程。

（3）课程表模块

  • 1号盒子 是 228 * 300 的盒子 右浮动 注意 浮动的元素 不会有外边距塌陷的问题
  • 1号盒子内 分为 上下 两个 子盒子
  • 2号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思，我们经常用)
  • 3号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思，我们经常用)

（4）精品推荐小模块

  • 复习点： 因为里面三个盒子都要垂直居中，利用继承性，给最大的盒子 一个垂直居中的代码就好了，哪些 样式可以继承吗？  Ans： font- line- text- color
  • 大盒子水平居中 goods 精品 ，注意此处有个盒子阴影
  • 1号盒子是标题 H3 左侧浮动
  • 2号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距（注意行内元素只给左右内外边距）
  • 3号盒子 右浮动 mod 修改

（5）精品推荐大模块

  • 1号盒子为最大的盒子 box 版心水平居中对齐
  • 2号盒子为上面部分 box-hd -- 里面 左侧标题H3 左浮动 右侧 链接 a 右浮动
  • 3号盒子为底下部分 box-bd --- 里面是无序列表 有 10个 小li 组成
  • 小li 外边距的问题， 这里有个小技巧。 给box-hd 宽度为 1215 就可以一行装开5个 li了
  • 复习点： 用到清除浮动 因为 box-hd 里面的盒子个数不一定多少，就不给高度了，但是里面的盒子浮动了， 影响下面的布局，此时需要浮动

（6）底部模块制作

  • 1号盒子通栏大盒子 底部 footer 给高度 底色是白色
  • 2号盒子版心水平居中
  • 3号盒子版权 copyright 左对齐
  • 4号盒子 链接组 links 右对齐

八.定位

1.定义：将盒子定在标准流和浮动的上面，定位 = 定位模式 +边偏移

2.边偏移：

3.定位模式（position）

3.1 静态定位（static）-了解

默认方式，相当于无定位；按照标准流摆放，没有边偏移，几乎用不到。

3.2 相对定位（relative）-重要

  • 相对于自己原来在标准流中位置来移动的。
  • 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

3.3 绝对定位（absolute）-重要

①完全脱标（不占原来的位置） ②父没定位就以浏览器为定位 ③父有定位就以父（或者祖先）进行定位。

绝对定位要和父级搭配使用：父级相对定位，子级绝对定位。

原因：父级需要占有位置，相对定位可按照标准流处理父级元素，子级可以随意摆放，绝对定位完全脱标。

3.4 固定定位（fixed）-重要

特殊的绝对定位：完全脱标，只认浏览器可视窗口 + 边偏移属性，和父级是否定位没关系。

4.哈根达斯：分析浮动和定位

//一个大的居中 div 包含 3 张图片；
//2 张小图片重叠在广告图片上方 —— 脱标，不占位置，需要使用绝对定位；
//2 张小图片分别显示在左上角和右下角 —— 需要使用边偏移确定准确位置。
	<style>
		.box { //父亲相对定位，这样可以让其他元素把他当标准流处理
			position: relative;
			width: 310px;
			height: 190px;
			border: 1px solid #ccc;
			margin: 100px auto;
			padding: 10px;
		}
		.top {  //子级绝对定位，位于父级上面不占用位置，且可以被准确移动定位。
			position: absolute;
			top: 0;
			left: 0;
		}
		.bottom {
			position: absolute;
			bottom: 0;
			right: 0;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/top_tu.gif" alt="" class="top">
		<img src="images/adv.jpg" alt="">
		<img src="images/br.gif" alt="" class="bottom">	
	</div>
</body>

效果展示：

结论：

  • 绝对定位：脱标，利用边偏移指定准确位置；
  • 浮动：脱标，不能指定准确位置，让多个块级元素在一行显示

5.新浪头条：分析固定定位

		.top {
			/*因为没有写宽度  默认的宽度是内容的宽度*/
			/*此时我们需要给这个top 盒子 通栏的盒子*/
			/*所以以后，定位的盒子，很多情况下，需要单写宽度*/
			/*所以以后，定位的盒子，如果需要通栏 那我们宽度就给 100%*/
			width: 100%;
			position: fixed;
			top: 0;
			height: 44px;
			/*background-color: pink;*/
			text-align: center;
  1. 在使用固定定位时，如果盒子中没有内容，需要指定宽度
  2. 设置底部内容图片的顶部 margin，可以让底部盒子初始显示在顶部图片的下方。

6.绝对定位盒子居中（不可以通过 margin:auto）

	<style>
		div {
			/*绝对定位 margin 左右auto 不能让盒子水平居中*/
			position: absolute;
			/*1.left 50% 走父亲宽度的一半*/	
			left: 50%;
			/*2.margin-left 左走自己宽度的一半  一定注意是 负值*/
			margin-left: -100px;
			width: 200px;
			height: 200px;
			background-color: pink;
			/*标准流 margin 左右auto 就可以让盒子水平居中*/
			/*margin: auto;*/
		}
	</style>

7.堆叠顺序（z-index）

定位盒子：默认后来者居上。

该属性只能应用于相对/绝对/固定定位，其他标准流/浮动/静态定位无效。

8.定位改变displaly属性

转换行内块方法：inline-block / float默认转换 / 绝对/固定定位。

一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽高。

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 

9.网页布局

一个完整的网页，有标准流 、 浮动 、 定位一起完成布局的。每个都有自己的专门用法。

1). 标准流：可以让盒子上下排列 或者 左右排列

2). 浮动：可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列

3). 定位：有层叠的概念，可以让多个盒子 前后 叠压来显示。 但每个盒子需要测量数值

10.淘宝轮播

		.taobao {
			/*子绝父相 绝对定位不可以margin：auto 但是相对定位可以*/    
			position: relative;
			width: 520px;
			height: 280px;
			background-color: pink;
			margin: 100px auto;
		}
		/*并集选择器 集体声明 让代码更简洁*/
		.arrow-l,
		.arrow-r {
			/*只能用定位来做，才能压住盒子*/
			/*不要占有位置 随便移动位置 必须用绝对定位*/
			position: absolute;
			/*垂直居中公式*/
			/*1. 走父级高度的 50%*/
			top: 50%;
			/*2. 往上走 自己高度 的一半*/
			margin-top: -15px;
			/*绝对定位的盒子 无须转换，直接给大小就好了*/
			width: 20px;
            ...
		}
		.arrow-l {
			left: 0;
			/*圆角矩形*/
			/*border-radius: 15px;*/
			/*右上角*/
			border-top-right-radius: 15px;
			/*右下角*/
			border-bottom-right-radius: 15px;
		}
		.arrow-r {
			right: 0;
			text-align: right;
			/*border-radius: 左上角 右上角  右下角  左下角;*/
			border-radius: 15px 0 0 15px;
		}
		.arrow-l:hover,
		.arrow-r:hover {    //并集表达式，鼠标移动到左右按钮上颜色改变
			background: rgba(0, 0, 0, .4);
		}
		.circle {    //小圆点浮在图片上面，所以绝对定位
			position: absolute;
            //绝对定位居中方法
			left: 50%;
			margin-left: -35px;
			width: 70px;
			background: rgba(255, 255, 255, 0.3);  //白色半透明小圆点
			border-radius: 7px;
		}
		.circle li {
			float: left;
            ...
			border-radius: 50%;    //设置成圆角方法
		}
		/*current 当前的意思  此处一定要注意 优先级的问题 当前小圆点染色*/
		.circle .current {
			background-color: #ff5000;
		}
	</style>
</head>
<body>
	<div class="taobao">
		<!-- 左按钮 -->
		<a href="#" class="arrow-l"> &lt; </a>
		<!-- 右按钮 -->
		<a href="#" class="arrow-r"> &gt; </a>
		<!-- 图片 -->
		<img src="images/taobao.jpg" alt="">
		<!-- 小圆点 -->
		<ul class="circle">
			<li></li>
			<li class="current"></li>
            ...
		</ul>
	</div>

效果展示：

九.高级技巧

1.元素的显示和隐藏

场景：类似网站广告，当点击关闭就不见了，重新刷新页面，会重新出现。

1.1 display 显示（重点）

display: none 隐藏对象
display：block 除了转换为块级元素之外 还可显示元素
//隐藏之后，不再保留原来的位置
//配合后s做特效，下拉菜单，原先没有，鼠标经过，显示下拉菜单

 1.2 visibility 可见性 （了解）

visibility：visible ; 　对象可视
visibility：hidden; 　  对象隐藏
//隐藏之后，继续保留原有位置

 1.3 overflow 溢出（重点）

    <style>
        div {
            /*overflow: hidden;*/
            /*溢出隐藏 -- 超出盒子大小的部分 隐藏起来*/
            /*overflow: scroll;*/
            /*显示滚动条总是会显示 - 不会超出盒子大小  内容能显示全但是  太丑了我们不常用*/
            overflow: auto;
            /*1.如果超出，就显示滚动条
            2.如果不超出，不显示滚动条 
            ...
        }
    </style>

1.4 总结

1.5 土豆显示与隐藏实例

<style>
		.box {
			position: relative;
			margin: 100px auto;
            ...
		}
		/*1. 原来盒子里面装有一个 黑色半透明的盒子 刚开始是看不见的隐藏*/
		.mask {
			display: none;
			position: absolute;
			top: 0;
			left: 0;       //下面是给黑色小盒子添加背景图片播放按钮
			background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;
		}
		/*2. 鼠标经过的时候，a里面的这个黑色半透明的盒子就显示出来了*/
		.box a:hover .mask {
			display: block;
		}
	</style>
</head>
<body>
	<div class="box">
		<a href="#">
			<div class="mask"></div>   //这个地方放一个黑色空盒子
			<img src="images/3.jpg" alt="">
		</a>
	</div>
</body>

效果展示：     鼠标移动上去后：

2. CSS用户界面样式

2.1 鼠标样式 cursor

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是禁止</li>
</ul>

2.2 轮廓线 outline

 <input  type="text"  style="outline: 0;"/>
<!-- 也可以设置为 outline:none; 表示取消轮廓线 -->

2.3 防止拖拽文本域 resize

<textarea  style="resize: none;"></textarea>

3. vertical-align 垂直对齐

仅用于行内元素或者行内块元素，对块级无效！

默认的图片会和文字基线对齐，导致产生图片底边空白。

去除图片在div中底下的空白方法：

		div img {
			/*因为默认的是基线对齐，所有底册有空白缝隙*/
			/*1. 只要不是 基线对齐就好了*/
			/*vertical-align: baseline;*/
			/*vertical-align: bottom;*/
			/*vertical-align: middle;*/
			/*2. 块级元素来说 vertical-align:  是无效的  就不会有基线对齐的问题了*/
			display: block;
		}

4. 溢出的文字省略号显示

<!-- white-space：用于强制一行显示内容 -->
white-space:normal ；    //默认处理方式
white-space:nowrap ;    //强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

<!-- text-overflow 文字溢出 -->
text-overflow : clip ；    //不显示省略标记（...），而是简单的裁切 
text-overflow：ellipsis ；    // 当对象内文本溢出时显示省略标记（...）

<!-- 总结三部曲 -->
  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

5.CSS精灵技术（sprite）-重点

5.1 精灵技术目的：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

5.2 解决方法：将页面中的大小背景图片（不是插入图片）放在一张大图片上，这样只需请求一次服务器。

5.3 步骤：

  1. 精确测量，每个小背景图片的大小和位置。
  2. 给盒子指定小背景图片时， 背景定位基本都是负值。

5.4 拼出pink：

	<style>
		div {    //这里设置了四个字母背景的公共属性，就不需要在下面重复写了
			float: left;
			background: url(images/abcd.jpg) no-repeat;
		}
		.p {    //wh是背景大小  backgro-position是背景在精灵图中的位置，多为负值
			width: 92px;
			height: 108px;
			background-position: -497px -278px;
		}
        ...
	</style>
    ...
<body>
	pink
	<div class="p"></div>
    ...
</body>

效果展示： 

6.滑动门技术

<li>
  <a href="#">
    <span>导航栏内容</span>    //经典布局a中包含span标签
  </a>
</li>

6.1 核心技术：利用CSS精灵（背景位置）和盒子padding撑开宽度,，来适应不同字数的导航栏。

6.2 步骤：

	<style>
		/*1. a 是设置左侧背景（左门）*/
		a {
	/*因为是滑动门，左右推拉 跟文字内容多少有关系，需要用文字撑开盒子，指定高度，用到行内块*/
			display: inline-block;
			height: 33px;
			background: url(images/to.png) no-repeat;
			margin: 100px;
			padding-left: 15px;
			color: #fff;
		}
		/*2. span 是设置 右侧 背景 （右门）*/
		a span {
			display: inline-block;
			height: 33px;
			/*一定注意 span 需要背景图片 右对齐*/
			background: url(images/to.png) no-repeat right top;
			padding-right: 15px;
		}
		/*3 因为整个导航栏都是链接所以 a 要包含 span */
		
	</style>

7.margin负值之美

突出显示某个商品列表中的盒子：

	<style>
		div {
			/*浮动的盒子是紧贴在一起的*/
			float: left;        /*想象产品列表*/
			width: 200px;
            ...
			margin-left: -1px;   	/*此处可以让重复部分的边框没那么粗…*/
			margin-top: -1px;
		}
		/*鼠标经过div 的意思  p:hover */
		div:hover {
			/*让当前鼠标经过的这个div 升到最高处*/
			border: 1px solid #f40;
			/*保证当前的这个盒子 是定位 就会压住标准流和浮动盒子*/
			position: relative;
			/*只能用相对定位  它是占位置的 否则会被其他元素占据原来的位置造成无法显示*/
			/*都是定位的盒子，通过z-index 来实现层级关系*/
			z-index: 1;
		}
	</style>

8.CSS三角形

绘制原理及效果：

	<style>
		div {
			/*我们用css 边框可以模拟三角效果*/
			/*宽度高度为0*/
			width: 0;
			height: 0;
			border-top: 10px solid red;
			border-right: 10px solid green;
			border-bottom: 10px solid blue;
			border-left: 10px solid pink;
		}
		p {
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px;
			/*4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明*/
			border-color:  transparent transparent transparent red;
			/*为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;*/
			font-size: 0;
			line-height: 0;
		}
	</style>

模仿京东三角形：

	<style>
		div {
			position: relative;
			width: 200px;
			height: 100px;
			background-color: pink;
			margin: 100px auto;
		}
		p {
			position: absolute;
			top: -40px;    //下面p的粗细为40px 所以向上移动露出完整的p
			left: 50%;		//表示块级元素居中
			margin-left: -20px;
			width: 0;		//设置三角形基本步骤
			height: 0;
			border-style: solid;
			border-width: 20px;
			border-color: transparent transparent pink transparent;
			font-size: 0;		//照顾兼容性低版本浏览器
			line-height: 0;
		}
	</style>
</head>
<body>
	<div>
		<p></p>
	</div>
</body>

十.综合案例

1.HTML结构简写：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 固定的左侧边栏 -->
    <div class="fixedbar"></div>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
            <!--使得用户名和头像正中间对齐-->
			<img src="images/user.jpg" 
                 alt="" style="vertical-align: middle;">
			lilei-hanmm
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<div class="subnav">
				<ul>
					<li><a href="#">前端开发 <span>></span></a></li>
                    ...
					<li><a href="#">产品 <span>></span></a></li>
				</ul>
			</div>
			<!-- 右侧 course -->
			<div class="course">
				<div class="course-hd">我的课程表</div>
				<div class="course-bd">
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
                        ...						
					</ul>
					<a href="#" class="all">全部课程</a>
				</div>
			</div>
		</div>
	</div>
	<!-- banner 部分end -->
	<!-- goods START -->
	<div class="goods w">
		<h3> 精品推荐 </h3>
		<div class="goods-item">
			|  <a href="#">jQuery</a>
			|  <a href="#">Spark</a>
			|  <a href="#">MySQL</a>
			|  <a href="#">JavaWeb</a>
			|  <a href="#">MySQL</a>
			|  <a href="#">JavaWeb</a>
		</div>
		<div class="mod"> 修改兴趣 </div>                                                                
	</div>
	<!-- goods END -->
	<!-- box start -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!-- 此地方一定要清除浮动，务必务必务必，不确定高度，会影响这个模块的布局 -->
		<div class="box-bd clearfix">
			<ul>
				<li>
					<img src="images/hot.png" alt="" class="hot">
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
                ...
			</ul>
		</div>
	</div>
	<!-- box end -->
	<!-- box start -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!-- 此地方一定要清除浮动，务必务必务必 -->
		<div class="box-bd clearfix">
		<!-- 重复上面的模块  -->
		</div>
	</div>
	<!-- box end -->

	<!-- footer start -->
	<div class="footer">
		<div class="w">
			<!-- 左侧 -->
			<div class="copyright">
				<img src="images/logo.png" alt="">
				<p>学成在线致力于普及中国最好的教育...</p>
				<a href="#" class="app"> 下载 app</a>
			</div>
			<!-- 右侧 -->
			<div class="links">
				<dl>
					<dt>关于学成网</dt>
                    ...
				</dl>
				<dl>
					<dt>新手指南</dt>
                    ...
				</dl>

				<dl>
					<dt>合作伙伴</dt>
                    ...
				</dl>
			</div>
		</div>
	</div>
	<!-- footer end -->
</body>
</html>

2.CSS样式简写

/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}
/*清除列表样式*/
li {
	list-style: none;
}
/*取消表单的轮廓线*/
input {
	outline: none;
}
/*去掉button 默认自带的边框*/
button {
	border: none;
}
body {
	background-color: #f3f5f7;
	/*方便写代码 一会别忘了删除*/
	/*height: 3000px;*/
}
a {
	text-decoration: none;
}
/*清除浮动的*/
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}
/*版心 1200 水平居中*/
.w {
	width: 1200px;
	margin: auto;
}
/*这是左边随着窗口滚动 跟着滚动的广告部分*/
.fixedbar {
	position: fixed;
	top: 200px;
	left: 50%;
	z-index: 999;
	/*-600 版心的一半  + 自己的宽度  = 780 */
	margin-left: -790px;
	width: 180px;
	height: 420px;
	background-color: pink;

}
/*header start*/
.header {
	height: 42px;
	/*background-color: pink;*/
	margin: 30px auto;
}
.logo {
	float: left;
	margin-right: 60px;
}
.nav {
	float: left;
}
.nav ul li {
	float: left;
}
.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 10px;
	margin-right: 20px;
	line-height: 40px;
	font-size: 18px;
	color: #050505;
	text-decoration: none;
}
/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
}
.search {
	float: left;
	margin-left: 70px;
}
.search input {
	float: left;
	width: 340px;
	height: 40px;
	border: 1px solid #00a4ff;
	border-right: 0;
	padding-left: 20px;
	color: #ccc;
}
.search button {
	float: left;
	width: 50px;
	height: 42px;
	background: url(images/btn.png);
}
.user {
	float: left;
	height: 42px;
	line-height: 42px;
	margin-left: 30px;
	font-size: 14px;
	color: #666;
}
/*banner start*/
.banner {
	height: 420px;
	background: #1c036c url(images/banner2.jpg) no-repeat top center;
}
.subnav {
	float: left;
	width: 150px;
	height: 420px;
	padding: 0 20px;
	/*背景半透明*/
	background: rgba(0, 0, 0, .3);
}
.subnav li {
	height: 45px;
	line-height: 45px;
}
.subnav li a {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}
.subnav li a:hover {
	color: #00b4ff;
}
.subnav  span {
	float: right;
}
.course {
	/*因为course 子盒子有了浮动，则就不会外边距塌陷的问题了*/
	float: right;
	width: 228px;
	height: 300px;
	background-color: #fff;
	margin-top: 50px;
}
.course-hd {
	height: 48px;
	background-color: #9bceea;
	font-size: 18px;
	text-align: center;
	line-height: 48px;
	color: #fff;
	/*文字加粗*/
	/*font-weight: bold;*/
	font-weight: 700;
}
.course-bd {
	/*没有宽度的盒子 padding 不会撑开盒子*/
	padding: 0 15px;
}
.course-bd ul {
	/*外边距塌陷的问题
	margin-top: 10px;*/
	padding-top: 10px;
}
.course-bd li {
	/*行高等与高度 只能让单行文本垂直居中*/
	height: 50px;
	border-bottom: 1px solid #ccc;
	margin-top: 10px;
}
.course-bd li h4 {
	font-size: 14px;
	color: #4e4e4e;
}
.course-bd li p {
	font-size: 12px;
	color: #a5a5a5;
}
.all {
	display: block;
	height: 38px;
	border: 1px solid #00a4ff;
	margin-top: 10px;
	font-size: 16px;
	color:  #00a4ff;
	text-align: center;
	line-height: 38px;
}
.all:hover {
	background-color: #00a4ff;
	color: #fff;
}
/*banner end*/
/*goods start*/
.goods {
	height: 60px;
	background-color: #fff;
	margin-top: 10px;
	/*利用行高可以继承的特性*/
	line-height: 60px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
.goods h3 {
	float: left;
	margin: 0 30px;
	font-size: 16px;
	color: #00a4ff;

}
.goods-item {
	float: left;
	color: #bfbfbf;
}
.goods-item a {
	font-size: 16px;
	color: #050505;
	margin: 0 30px;
}
.mod {
	float: right;
	margin-right: 30px;
	font-size: 14px;
	color: #00a4ff;
}
/*goods end*/
/*box start*/
.box {
	margin-top: 15px;
}
.box-hd {
	height: 60px;
	line-height: 60px;
	/*background-color: pink;*/
}
.box-hd h3 {
	float: left;
	font-size: 20px;
	color: #494949;
	/*让粗体不加粗 400 == normal*/
	font-weight: 400; 
}
.box-hd a {
	float: right;
	margin-right: 30px;
	font-size: 12px;
	color: #a5a5a5;

}
.box-bd {
	/*这个盒子一定不要给高度 因为我们可能放一行 也可能是2行 或者n行*/
	/*box-bd 宽度 超过了 版心 1200 是可以的，就就解决了问题*/
	width: 1215px;
}
.box-bd li {
	position: relative;
	float: left;
	width: 228px;
	height: 270px;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color: #fff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
.box-bd li img {
	width: 100%;
}
.box-bd .hot {
	position: absolute;
	top: 0;
	right: -4px;
	width: 40px;
}
.box-bd li h4 {
	margin: 20px;
	font-size: 14px;
	color: #050505;
	font-weight: 400;
}
.box-bd li p {
	margin: 0 20px;
	font-size: 12px;
	color: #999;
}
.box-bd p span {
	color: orange;
}
/*box end */
/*footer*/
.footer {
	height: 385px;
	padding-top: 30px;
	background-color: #fff;
}
.copyright {
	float: left;
}
.copyright p {
	font-size: 12px;
	color: #666;
	margin: 20px 0 15px 0;
}
.app {
	display: block;
	width: 118px;
	height: 34px;
	border: 1px solid #00a4ff;
	text-align: center;
	line-height: 34px;
	font-size: 16px;
	color: #00a4ff;
}
.links {
	float: right;
}
.links  dl {
	float: left;
	margin-left: 100px;
}
.links  dt {
	height: 35px;
	font-size: 16px;
	color: #333;
}
.links  dd a {
	font-size: 12px;
	color: #333;
}
.links  dd a:hover {
	color: #004aff;
}

3.效果：

Lyrelion
发布了29 篇原创文章 · 获赞 21 · 访问量 1663
私信 关注

猜你喜欢

转载自blog.csdn.net/Lyrelion/article/details/104574583
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022