CSS3颜色渐变
background-image:linear-gradient(black,blue,green,red);
默认从上到下显示。
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>背景属性的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 height:45px; 10 border:2px solid red; 11 } 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li> 17 <h3>颜色渐变（默认从上到下）</h3> 18 <div style="background-image:linear-gradient(black,blue,green,red) ;background-color:gray; height:200px;border:1px solid red;background-repeat:no-repeat;"> 19 20 </div> 21 </li> 22 23 </ul> 24 </body> 25 </html>
background-repeat背景图片平铺
背景填充的方式。
语法：background-repeat：<repeat-style>[,<repeat-style>]
repeat-style可以取的值：repeat-x（北京在横向上平铺）， repeat-y（背景在纵向上平铺），repeat（在横向上和纵向上平铺），no-repeat（背景图像不平铺），round（CSS3背景图片自动缩放直到适应并填充满整个容器），space（背景图像以相同的间距平铺且填充满整个容器或某个方向）。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>背景属性的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 height:45px; 10 border:2px solid red; 11 } 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li> 17 <h3>背景图片默认平铺</h3> 18 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;"> 19 背景图片 20 </div> 21 </li> 22 <li> 23 <h3>背景图片no-repeat不平铺</h3> 24 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:no-repeat;"> 25 背景图片 26 </div> 27 </li> 28 <li> 29 <h3>背景图片repeat-x横向平铺</h3> 30 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-x;"> 31 背景图片 32 </div> 33 </li> 34 <li> 35 <h3>背景图片repeat-y纵向平铺</h3> 36 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-y;"> 37 背景图片 38 </div> 39 </li> 40 <li> 41 <h3>背景图片round:将背景图片自动缩放知道适应并填充满整个容器</h3> 42 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:round;"> 43 背景图片 44 </div> 45 </li> 46 <li> 47 <h3>背景图片space:以相同的间距平铺且填充满整个容器或某个方向</h3> 48 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:space;"> 49 背景图片 50 </div> 51 </li> 52 </ul> 53 </body> 54 </html>
示例效果如下：
backgroun-attachment
背景图像是随对象内容滚动还是固定的。（使用频率：几乎不用）
语法：background-attachment：<attachment>[，<attachment>]*
attchment：fixed（背景图像相对于窗体固定），local（背景图像相对于元素固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容，CSS3），scroll（默认方式，背景图像相对于元素固定，也就是说元素内容滚动时背景图像不会跟着动，因为背景图像总是要跟随元素本身。但会随着元素的祖先元素或窗体一起滚动）
background-position（重点难点）
设置或者检索对象的背景图像位置，必须先指定background-image属性值。
使用频率非常高。
语法：background-position:<position>[,<position>]
position可以取的值有：left | center | right | top | bottom | <percentage> | <length> | 等（查看手册）
background-position该属性提供两个参数值。CSS3中可以提供四个值，每个percentage或length偏移前都必须跟着一个关键字（即left|right|center|bottom|top），偏移量相对关键字位置进行偏移。例如（假设要定义背景图像在容器中右下方，并且距离邮编和底部各20px）：
background:url(test1.jpg) no-repeat right 20px bottom 20px
也可以设置3个参数值，例如：
background:url(test1.jpg) no-repeat left bottom 20px
如果提供两个参数，则第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，则该值用于横坐标，纵坐标默认为50%（即center）。
不适用具体坐标的常见位置如下图所示：（这种应用并不多）
使用坐标，显示图片中的某一位置。（向下为正方向，向上为负方向，向左为负方向，向右为正方向）。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>背景属性的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 height:45px; 10 border:2px solid red; 11 } 12 </style> 13 </head> 14 <body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;"> 15 <ul> 16 <li> 17 <h3>背景图片的位置（原图）</h3> 18 <div style="background-image:url(../images/jd2015img.png);height:200px;background-repeat:no-repeat;padding-left:20px;line-height:20px;"> 19 原图样式 20 </div> 21 </li> 22 <li> 23 <h3>背景图片的位置（难点）</h3> 24 <div style="background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;"> 25 手机未选中 26 </div> 27 </li> 28 <li> 29 <h3>背景图片的位置（难点）</h3> 30 <div style="background-position:0 -26px;background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;"> 31 手机选中 32 </div> 33 </li> 34 35 </ul> 36 </body> 37 </html>
示例效果如下：
background
背景设置的复合属性，可以只通过这一个属性设置背景图片，背景颜色，是否平铺等内容。使用频率非常高。
语法：background：[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]
顺序方面内有特别的要求。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>背景属性的设置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 height:45px; 10 border:2px solid red; 11 } 12 </style> 13 </head> 14 <body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;"> 15 <ul> 16 <li> 17 <h3>背景属性的综合属性设置</h3> 18 <div style="background:url(../images/jd2015img.png) 0 -26px no-repeat;padding-left:20px;height:20px;"> 19 手机选中 20 </div> 21 </li> 22 </ul> 23 </body> 24 </html>
list-style-type
列表项样式，主要用在<li>标签，使用频率较低。
也可以通过list-style-image属性指定自己的图片作为列表项样式。
取值的种类较多，查看操作手册即可。
一般都是使用list-style-type:none，即没有列表项图标。
列表属性都具有继承性。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>列表项样式</title> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <ul> 10 <li> 11 <h3>列表类型的样式</h3> 12 <ul> 13 <li style="list-style-type:square;">第一项（列表项图标为方块）</li> 14 <li style="list-style-type:none;">第二项（没有列表项图标）</li> 15 </ul> 16 </li> 17 <li> 18 <h3>列表类型的样式</h3> 19 <ul> 20 <li style="list-style-type:square;">第一项（列表项图标为方块）</li> 21 <li style="list-style-type:none;">第二项（没有列表项图标）</li> 22 </ul> 23 </li> 24 <li> 25 <h3>列表项都具有继承性</h3> 26 <ul style="list-style-type:none;"> 27 <li>第一项（继承父标签）</li> 28 <li style="list-style-type:square;">第二项（不适用从父标签继承过来的样式）</li> 29 </ul> 30 </li> 31 </ul> 32 </body> 33 </html>
list-style-image
自定义列表项前面的图标。使用频率几乎为0。
list-style
列表项属性的综合设置（可以综合设置上述的列表项属性），使用频率较高。
练习：新浪头部导航的设计与制作
需要实现的效果
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>新浪导航条的实现</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 #zong { 9 border:0px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <h3>新浪导航条的实现</h3> 15 <div id="zong" style="width:140px;background:url(../images/bg2.png) 135px -200px no-repeat;"> 16 <div id="d1"> 17 <a href="#" style="text-decoration:none;color:black;font-weight:bolder;">新闻</a> 18 <a href="#" style="text-decoration:none;color:black;">军事</a> 19 <a href="#" style="text-decoration:none;color:black;">社会</a> 20 </div> 21 <div id="d2"> 22 <a href="#" style="text-decoration:none;color:black;font-weight:bolder;">财经</a> 23 <a href="#" style="text-decoration:none;color:black;">股票</a> 24 <a href="#" style="text-decoration:none;color:black;">基金</a> 25 </div> 26 <div id="d3"> 27 <a href="#" style="text-decoration:none;color:black;font-weight:bolder;">科技</a> 28 <a href="#" style="text-decoration:none;color:black;">手机</a> 29 <a href="#" style="text-decoration:none;color:black;">探索</a> 30 </div> 31 </div> 32 </body> 33 </html>
方法二：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>新浪导航条的实现方法二</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 .nav-mod-1 { 9 width:174px; 10 background:url(http://i0.sinaimg.cn/home/main/index2013/0719/bg2.png) no-repeat 176px -183px; 11 margin-left: 2px; 12 display: inline; 13 overflow: hidden;/*将多余的部分隐藏掉*/ 14 float:left;/*左浮动*/ 15 padding:2px 5px 18px 0; 16 } 17 .main-nav ul { 18 height:26px; 19 clear:both; 20 overflow:hidden; 21 } 22 ul,ol { 23 list-style:none; 24 } 25 ul,li{ 26 margin:0; 27 padding:0; 28 } 29 .main-nav li { 30 float:left;/*左浮动*/ 31 width:27px; 32 margin-left:13px; 33 line-height:26px; 34 text-align:center; 35 white-space:nowrap; 36 display:inline; 37 } 38 39 </style> 40 </head> 41 <body> 42 <div class="main-nav"> 43 <div class="nav-mod-1"> 44 <ul> 45 <li><a href="http://news.sina.com.cn/" target="_blank"><b>新闻</b></a></li> 46 <li><a href="http://mil.news.sina.com.cn/" target="_blank">军事</a></li> 47 <li><a href="http://news.sina.com.cn/society/" target="_blank">社会</a></li> 48 <li><a href="http://news.sina.com.cn/world/" target="_blank">国际</a></li> 49 </ul> 50 <ul> 51 <li><a href="http://finance.sina.com.cn/" target="_blank"><b>财经</b></a></li> 52 <li><a href="http://finance.sina.com.cn/stock/" target="_blank">股票</a></li> 53 <li><a href="http://finance.sina.com.cn/fund/" target="_blank">基金</a></li> 54 <li><a href="http://finance.sina.com.cn/futuremarket/" target="_blank">期货</a></li> 55 </ul> 56 <ul> 57 <li><a href="http://tech.sina.com.cn/" target="_blank"><b>科技</b></a></li> 58 <li><a href="http://mobile.sina.com.cn/" target="_blank">手机</a></li> 59 <li><a href="http://tech.sina.com.cn/discovery/" target="_blank">探索</a></li> 60 <li><a href="http://finance.sina.com.cn/forex/" target="_blank">外汇</a></li> 61 </ul> 62 </div> 63 </div> 64 </body> 65 </html>
扫一扫
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
