本节继续介绍css在html页面重的应用实例。
(1)div的border-style属性:
none: 无样式
hidden: 除了同表格的边框发生冲突的时候,其它同none
dotted: 点划线
dashed: 虚线
solid: 实线
double: 双线,两条线加上中间的空白等于border-width的取值
groove: 槽状
ridge: 脊状,和groove相反
inset: 凹陷
outset: 凸出,和inset相反
<html> <head> <title>示例6.1</title> <style> div{ width: 200px; height: 200px; float:left } #div_01{ border-style: outset; border-bottom-color: red; border-width: 50px; } #div_02{ border-style: inset; border-bottom-color: red; border-width: 50px; } #div_03{ border-style: dotted; border-width: 5px; } #div_04{ border-style: solid; border-color: red; border-width: 5px; } </style> </head> <body style="margin:0px;"> <div id="div_01"></div> <div id="div_02"></div> <div id="div_03"></div> <div id="div_04"></div> </body> </html>
(2)用ul和li制作的导航栏:
<!DOCTYPE html> <html> <head> <title>示例6.2</title> <!--type属性干嘛的--> <style type="text/css"> * { margin:0px; } div { background-color:yellow; height:35px; width:800px; margin:0px auto; } ul li { float:left; list-style:none; width:150px; line-height:30px; } A:hover { font-size:x-large; background-color:pink; } </style> </head> <body> <div> <ul> <li><a href="#">公司简介</a></li> <li><a href="#">企业文化</a></li> <li><a href="#">产品介绍</a></li> <li><a href="#">交易大厅</a></li> <li><a href="#">联系我们</a></li> </ul> </div> </body> </html>
(3)列表与div的混合:
<!DOCTYPE html> <html> <head> <title>示例6.3</title> <style type="text/css"> * { font-size:12px; margin:0px; } .divIndex { height:390px; width:300px; margin:0px auto; padding:0px; } .div1 { height:35px; width:300px; background-color:#248AD4; color:white; text-indent:30px; line-height:35px; } .t1 { font-weight:bolder; text-indent:10px; line-height:25px; } .t2 { color:#236EB2; border-bottom:1px dashed #cccccc; line-height:25px; } .t3 { color:red; text-align:right; font-weight:bolder; border-bottom:1px dashed #cccccc; } .t4 { color:blue; font-weight:bolder; text-align:right; border-bottom:1px dashed #cccccc; } </style> </head> <body> <div class="divIndex"> <table id="td1" cellpadding="0px" cellspacing="0px"> <tr> <td> <div class="div1">程序设计学习进程信息</div> </td> </tr> <tr> <td> <table cellpadding="0px" cellspacing="0px" width="300px"> <tr> <td class="t1">基础班</td> <td></td> </tr> <tr> <td class="t2">北京-2014年6月14号</td> <td class="t3">预约报名中</td> </tr> <tr> <td class="t2">北京-2014年5月5号</td> <td class="t4">爆满已开班</td> </tr> <tr> <td class="t2">广州-2014年6月21号</td> <td class="t3">预约报名中</td> </tr> <tr> <td class="t2">北京-2014年5月20号</td> <td class="t4">爆满已开班</td> </tr> <tr> <td class="t1">进阶班</td> <td></td> </tr> <tr> <td class="t2">北京-2014年6月4号</td> <td class="t3">预约报名中</td> </tr> <tr> <td class="t2">北京-2014年4月26号</td> <td class="t4">爆满已开班</td> </tr> <tr> <td class="t2">广州-2014年6月22号</td> <td class="t3">预约报名中</td> </tr> <tr> <td class="t2">广州-2014年5月13号</td> <td class="t4">爆满已开班</td> </tr> <tr> <td class="t1">高级班</td> <td></td> </tr> <tr> <td class="t2">北京-2014年6月14号</td> <td class="t3">远程班预约报名中</td> </tr> <tr> <td class="t2">北京-2014年6月4号</td> <td class="t3">远程班预约报名中</td> </tr> </table> </td> </tr> </table> </div> </body> </html>
(4)伪选择器:
a标签的四个属性:
1.a:link{text-decoration:none ; color:#c00 ;}
2.a:visited {text-decoration:none ; color:#c30 ;}
3.a:hover {text-decoration:underline ; color:#f60 ;}
4.a:active {text-decoration:none ; color:#F90 ;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。写的时候尽量按照顺序。
<html> <head> <title>伪选择器</title> <style type="text/css"> p:hover { color: blue; cursor: pointer; font-size: 20px; } #p_firstline:first-line { font-size:25px; } #p_firstletter:first-letter { font-size:30px; color:red; } a:hover { text-decoration:none; color:red; font-size:25px; } a:active { color:purple; font-size:30px; } </style> </head> <body> <p id="p_firstline"> 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。<br/> 不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那 时候对标准的支持并不是企业的优先选择。</p> <p id="p_firstletter">比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是 好呢？ </p> <a href="##">伪选择器</a><br /> <a href="##">MenAngel</a><br /> <a href="##">sunjimeng</a><br /> <a href="##">孙继锰</a><br /> </body> </html>
(5)设置背景图片:
<html> <head> <style type="text/css"> div.div1 { width:300px; height:200px; background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_background.gif); background-repeat: repeat-x; } div.div2{ width:300px; height:200px; background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_background.gif); background-repeat: repeat-y; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
