您的位置：首页 > Web前端 > CSS

css系列（6）css的运用（二）

2016-07-27 16:08 519 查看
[b] 本节继续介绍css在html页面重的应用实例。[/b]

[b] (1)div的border-style属性:[/b]

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>




[b] (2)用ul和li制作的导航栏:[/b]

<!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>




[b] (3)列表与div的混合:[/b]

<!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>




[b] (4)伪选择器:[/b]

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>




[b] (5)设置背景图片:[/b]

<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>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航