css學習筆記三

最後更新：2017-08-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：logs text src org xmlns es2017 index div pos

定位：

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

原圖：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

執行個體圖：

css學習筆記三

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More