z-index,标签之间的嵌套规则,精灵图,整站练习(css初始化)

2017-07-30 19:20:53来源:CSDN作者:boxyuan人点击

分享

z-index定位:

作用:设置页面中元素的层级关系取值:正整数

标签之间的嵌套规则:


  1. 行内元素只能包含行内元素
  2.  块级元素可以包含所有的行内元素和部分块内元素
  3. p标签h标签不能包含块级元素

精灵图:

将页面上较小的图放在一张大图上

制作精灵图:

  1. 精灵图必须是小的图片
  2. 精灵图之间一定要留有足够的间隙
  3. 精灵图的大小一定要大于所有的图片中最大 的那个
  4. 完成精灵图一定要在精灵图下面留有足够的空隙
  5. 背景图不要放在精灵图上

整站练习:




css初始化

  1. 清除标签的margin和padding
  2. 清除img的边框
  3. 清除li标签前的小点
  4. 给页面设置一个统一的字体大小和颜色,还要设置body的背景颜色,body{font-size:14px}
  5. 清除浮动
  6. a标签设置字体颜色,下划线,以及hover
  7. 设置浮动

整体css初始化源码

/*css初始化,begin*/html,body,ul,li ,p ,h1,h2,h3,img,input{	margin: 0;	padding: 0;}img{	border: 0;}ul{	list-style: none;}body{	font-size: 14px;	color: darkgray;	font-family: "宋体";	background-color:papayawhip;	}/*清除浮动*/.clearfix:after{	content: "";	height: 0;	line-height: 0;	display: block;	visibility: hidden;	clear: both;}.clearfix{	zoom:1px;}a{	 	color: darkgray;	text-decoration: none;}a:hover{	color:orange;}.f1{	float: left;}.fr{	float: right;}/*css初始化,end*/



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台