css学习笔记三

最新推荐文章于 2024-10-10 10:50:43 发布

dfdaimj8379

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量80

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/ybtest/p/7436521.html

版权

定位：

position:absolute;　　绝对定位：设置该属性会脱离文档流，没有浮动效果，下面块会与上面重合。默认情况下，设置了绝对定位的块，它的top、left是相对于浏览器。当一个元素的父元素设置了绝对定位的时候，该元素在设置定位的时候（绝对、相对、固定），该元素的top和left相对的是父元素。

position:relative;　　相对定位：设置该属性不会脱离文档流，浮动有效果，设置了相对元素的块，不管它的父元素是否有定位，它的top，lef始终相对于它的父元素。

只有设置了定位的块才有top，left属性。

div默认position:static; 存在于文档流，浮动有效果。

position:fixed; 　　固定定位：脱离文档流，不会出现滚动条。

用于布局的css技术：浮动、盒子模型、定位。

z-index:2; 层级显示数值大的显示在最上面。

overflow：hidden 超出部分隐藏

　　　　　auto　　超出时候显示滚动条

　　　　　scroll 不管超出没有都显示滚动条

======================================================================================================================================

布局实例；

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/demo.css" rel="stylesheet" />
</head>

<body>
　　<div id="dqq">
　　　　<div id="dtitle">
　　　　　　<h2><a href="javascript:;">汽车</a> /<a href="jacascript:;"> 在线购车</a></h2>
　　　　</div>
　　　　<div id="dtop">
　　　　　　<div id="dpic"><a href="javascript:;"><img src="image/2.jpg" /></a></div>
　　　　　　<div id="dword"><a href="javascript:;">8万元买到高品质 7月热销自主小型SUV推荐</a></div>
　　　　</div>
　　　　<div id="dlist">
　　　　　　<ul>
　　　　　　　　<li><a href="javascript:;">成都车展SUV新车亮点多众泰T300售5.68-9.18万</a></li>
　　　　　　　　<li><a href="javascript:;">成都车展SUV新车亮点多众泰T300售5.68-9.18万</a></li>
　　　　　　　　<li><a href="javascript:;">成都车展SUV新车亮点多众泰T300售5.68-9.18万</a></li>
　　　　　　　　<li><a href="javascript:;">成都车展SUV新车亮点多众泰T300售5.68-9.18万</a></li>
　　　　　　　　<li><a href="javascript:;">成都车展SUV新车亮点多众泰T300售5.68-9.18万</a></li>
　　　　　　　　<li><a href="javascript:;">成都车展SUV新车亮点多众泰T300售5.68-9.18万</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</body>
</html>

css：

*{
padding:0px;
margin:0px;
font-family:"黑体";
list-style-type:none;
}
a{
text-decoration:none;
}
#dqq{
width:350px;
height:312px;
border:solid 1px #D2E1F1;
}
#dtitle{
height:32px;
line-height:32px;
background-color:#F6FAFD;
padding-left:10px;
}
#dtitle h2{
font-size:16px;
width:100%;
color:#0873C0;
}
#dtitle a{
font-size:16px;
color:#0873C0;
}
#dtitle a:hover{
text-decoration:underline;
}
#dtop{
height:76px;
width:100%;
margin:10px 0px;
}
#dpic,#dword{
float:left;
}
#dpic{
margin:0px 10px;
}
#dword{
width:180px;
margin-top:18px;

line-height:25px;
}
#dword a{
font-weight:100;
color:#3B639F;
}
#dword a:hover{
text-decoration:underline;
}
#dlist{
margin-left:10px;
}
#dlist li{
line-height:26px;
padding-left:5px;
}
#dlist li a{
font-size:14px;
color:#172C45;
}
#dlist li a:hover{
color:#F00;
}