CSS+DIV-理解CSS+div佈局

原創 zhangjingqiang 2018-09-12 06:53

10-1.html

<html>
<head>
<title>div 標記範例</title>
<style type="text/css">
<!--
div{
  font-size:18px;            /* 字號大小 */
  font-weight:bold;          /* 字體粗細 */
  font-family:Arial;          /* 字體 */
  color:#FF0000;            /* 顏色 */
  background-color:#FFFF00;      /* 背景顏色 */
  text-align:center;          /* 對齊方式 */
  width:300px;            /* 塊寬度 */
  height:100px;            /* 塊高度 */
}
-->
</style>
     </head>
<body>
  <div>
  這是一個div標記
  </div>
</body>
</html>
10-2.html
<html>
<head>
<title>div與span的區別</title>
     </head>
<body>
  <p>div標記不同行：</p>
  <div><img src="building.jpg" border="0"></div>
  <div><img src="building.jpg" border="0"></div>
  <div><img src="building.jpg" border="0"></div>
  <p>span標記同一行：</p>
  <span><img src="building.jpg" border="0"></span>
  <span><img src="building.jpg" border="0"></span>
  <span><img src="building.jpg" border="0"></span>
</body>
</html>
10-3.html
<html>
<head>
<title>border-style</title>
<style type="text/css">
<!--
div{
  border-width:6px;
  border-color:#000000;
  margin:20px; padding:5px;
  background-color:#FFFFCC;
}
-->
</style>
     </head>

<body>
  <div style="border-style:dashed">The border-style of dashed.</div>  
  <div style="border-style:dotted">The border-style of dotted.</div>
  <div style="border-style:double">The border-style of double.</div>
  <div style="border-style:groove">The border-style of groove.</div>
  <div style="border-style:inset">The border-style of inset.</div>
  <div style="border-style:outset">The border-style of outset.</div>
  <div style="border-style:ridge">The border-style of ridge.</div>
  <div style="border-style:solid">The border-style of solid.</div>
</body>
</html>
10-4.html
<html>
<head>
<title>border-bottom的運用</title>
     </head>
<body>
<p style="border-bottom: 8px dotted blue;">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.
</p>
<p>Next paragraph</p>
</body>
</html>
10-5.html
<html>
<head>
<title>瀏覽器對待background-color的不同</title>
<style type="text/css">
<!--
.chara1{
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
}
.tableborder{
  border:1px solid #000000;
}
.cell{
  border:10px dashed #000000;
  text-align:center;
  background-color:#e799f8;
}
-->
</style>
     </head>
<body>
<table cellpadding="10" cellspacing="25" class="chara1 tableborder">
  <tr>
    <td class="cell" height="80px" width="120px">content</td>
  </tr>
</table>
</body>
</html>
10-6.html
<html>
<head>
<title>padding-bottom的運用</title>
     </head>
<body>
<p style="border-bottom: 8px dotted blue; padding-bottom: 30px;">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.
</p>
<p>Next paragraph</p>
</body>
</html>
10-7.html
<html>
<head>
<title>padding</title>
<style type="text/css">
<!--
.outside{
  padding:10px 30px 50px 100px;  /* 同時設置，順時針 */
  border:1px solid #000000;    /* 外邊框 */
  background-color:#fffcd3;    /* 外背景 */
}
.inside{
  background-color:#66b2ff;    /* 內背景 */
  border:1px solid #005dbc;    /* 內邊框 */
  width:100%; line-height:40px;
  text-align:center;
  font-family:Arial;
}
-->
</style>
     </head>
<body>
<div class="outside">
  <div class="inside">padding</div>
</div>
</body>
</html>
10-8.html
<html>
<head>
<title>margin-bottom的運用</title>
     </head>
<body>
<p style="border-bottom: 8px dotted blue; padding-bottom: 30px; margin-bottom: 60px;">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.
</p>
<p>Next paragraph</p>
</body>
</html>
10-9.html
<html>
<head>
<title>兩個行內元素的margin</title>
<style type="text/css">
<!--
span{
  background-color:#a2d2ff;
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  padding:10px;
}
span.left{
  margin-right:30px;
  background-color:#a9d6ff;
}
span.right{
  margin-left:40px;
  background-color:#eeb0b0;
}
-->
</style>
     </head>
<body>
  <span class="left">行內元素1</span><span class="right">行內元素2</span>
</body>
</html>
10-10.html
<html>
<head>
<title>兩個塊級元素的margin</title>
<style type="text/css">
<!--
div{
  background-color:#a2d2ff;
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  padding:10px;
}
-->
</style>
     </head>
<body>
  <div style="margin-bottom:50px;">塊元素1</div>
  <div style="margin-top:30px;">塊元素2</div>
</body>
</html>
10-11.html
<html>
<head>
<title>父子塊的margin</title>
<style type="text/css">
<!--
div.father{            /* 父div */
  background-color:#fffebb;
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  padding:10px;
  border:1px solid #000000;
}
div.son{            /* 子div */
  background-color:#a2d2ff;
  margin-top:30px;
  margin-bottom:0px;
  padding:15px;
  border:1px dashed #004993;
}
-->
</style>
     </head>
<body>
  <div class="father">
    <div class="son">子div</div>
  </div>
</body>
</html>
10-12.html
<html>
<head>
<title>設置父塊的高度</title>
<style type="text/css">
<!--
div.father{            /* 父div */
  background-color:#fffebb;
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  padding:10px;
  border:1px solid #000000;
  height:40px;        /* 設置父div的高度 */
}
div.son{            /* 子div */
  background-color:#a2d2ff;
  margin-top:30px; margin-bottom:0px;
  padding:15px;
  border:1px dashed #004993;
}
-->
</style>
     </head>
<body>
  <div class="father">
    <div class="son">子div</div>
  </div>
</body>
</html>
10-13.html
<html>
<head>
<title>margin設置爲負數</title>
<style type="text/css">
<!--
span{
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  padding:10px;
  border:1px dashed #000000;
}
span.left{
  margin-right:30px;
  background-color:#a9d6ff;
}
span.right{
  margin-left:-53px;      /* 設置爲負數 */
  background-color:#eeb0b0;
}
-->
</style>
     </head>
<body>
  <span class="left">行內元素1</span><span class="right">行內元素2</span>
</body>
</html>
10-14.html
<html>
<head>
<title>float屬性</title>
<style type="text/css">
<!--
body{
  margin:15px;
  font-family:Arial;
  font-size:12px;
}
.father{
  background-color:#fffea6;
  border:1px solid #111111;
  padding:25px;        /* 父塊的padding */
}
.son1{
  padding:10px;        /* 子塊son1的padding */
  margin:5px;          /* 子塊son1的margin */
  background-color:#70baff;
  border:1px dashed #111111;
  float:left;          /* 塊son1左浮動 */  
}
.son2{
  padding:5px;
  margin:0px;
  background-color:#ffd270;
  border:1px dashed #111111;
}
-->
</style>
     </head>
<body>
  <div class="father">
    <div class="son1">float1</div>
    <div class="son2">float2</div>
  </div>
</body>
</html>
10-15.html
<html>
<head>
<title>float屬性</title>
<style type="text/css">
<!--
body{
  margin:15px;
  font-family:Arial;
  font-size:12px;
}
.father{
  background-color:#fffea6;
  border:1px solid #111111;
  padding:25px;        /* 父塊的padding */
}
.son1{
  padding:10px;
  margin:5px 0px 0px -35px;  /* 負數margin */
  background-color:#70baff;
  border:1px dashed #111111;
  float:left;          /* 塊son1左浮動 */  
}
.son2{
  padding:5px;
  margin:0px;
  background-color:#ffd270;
  border:1px dashed #111111;
}
-->
</style>
     </head>
<body>
  <div class="father">
    <div class="son1">float1</div>
    <div class="son2">float2</div>
  </div>
</body>
</html>
10-16.html
<html>
<head>
<title>float屬性</title>
<style type="text/css">
<!--
body{
  margin:15px;
  font-family:Arial;
  font-size:12px;
}
.father{
  background-color:#fffea6;
  border:1px solid #111111;
  padding:25px;        /* 父塊的padding */
}
.son1{
  padding:5px;
  background-color:#70baff;
  border:1px dashed #111111;
}
.son2{
  padding:5px;        /* 子塊son2的padding */
  margin:5px;
  background-color:#ffd270;
  border:1px dashed #111111;
  float:right;        /* 子塊son2向右浮動 */
}
-->
</style>
     </head>
<body>
  <div class="father">
    <div class="son1">float1</div>
    <div class="son2">float2</div>
  </div>
</body>
</html>
10-17.html
<html>
<head>
<title>float屬性</title>
<style type="text/css">
<!--
body{
  margin:15px;
  font-family:Arial;
  font-size:12px;
}
.father{
  background-color:#fffea6;
  border:1px solid #111111;
  padding:25px;        /* 父塊的padding */
}
.son1{
  padding:5px;
  margin-right:3px;      /* 子塊son1的右margin */
  background-color:#70baff;
  border:1px dashed #111111;
  float:left;          /* 子塊son1向左浮動 */
}
.son2{
  padding:5px;
  background-color:#ffd270;
  border:1px dashed #111111;
  float:left;          /* 子塊son2也向左浮動 */
  width:60%;
}
-->
</style>
     </head>
<body>
  <div class="father">
    <div class="son1">float1</div>
    <div class="son2">CSS（Cascading Style Sheet），中文譯爲層疊樣式表，是用於控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。</div>
  </div>
</body>
</html>
10-18.html
<html>
<head>
<title>float屬性 clear</title>
<style type="text/css">
<!--
body{
  margin:5px;
  font-family:Arial;
  font-size:13px;
}
.block1{
  padding-left:10px;
  margin-right:10px;
  float:left;          /* 塊1向左浮動 */
}
h3{
  background-color:#a5d1ff;  /* 標題的背景色 */
  border:1px dotted #222222;  /* 標題邊框 */
  clear:left;          /* 清除float對左側的影響 */
}
-->
</style>
     </head>
<body>
  <div class="block1"><img src="building2.jpg" border="0"></div>  
  <div>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因爲它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演着重要的角色。本章從CSS的基本概念出發，介紹CSS語言的特點，以及如何在網頁中引入CSS，並對CSS進行初步的體驗。</div>
  <h3>CSS的概念</h3>
  <div>CSS（Cascading Style Sheet），中文譯爲層疊樣式表，是用於控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。</div>
</body>
</html>
10-19.html
<html>
<head>
<title>float屬性 clear</title>
<style type="text/css">
<!--
body{
  margin:5px;
  font-family:Arial;
  font-size:13px;
}
.block1{
  padding-left:10px;
  margin-right:10px;
  float:left;          /* 塊1向左浮動 */
}
.block2{
  padding-right:10px;
  margin-left:10px;
  float:right;        /* 塊2向右浮動 */
}
h3{
  background-color:#a5d1ff;  /* 標題的背景色 */
  border:1px dotted #222222;  /* 標題邊框 */
  clear:both;          /* 清除兩端的float影響 */
}
-->
</style>
     </head>
<body>
  <div class="block1"><img src="building2.jpg" border="0"></div>
  <div>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因爲它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演着重要的角色。<br><br></div>
  <div class="block2"><img src="building3.jpg" border="0"></div>
  <div>CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。本章從CSS的基本概念出發，介紹CSS語言的特點，以及如何在網頁中引入CSS，並對CSS進行初步的體驗。</div>
  <h3>CSS的概念</h3>
  <div>CSS（Cascading Style Sheet），中文譯爲層疊樣式表，是用於控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。</div>
</body>
</html>
10-20.html
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
  margin:10px;
  font-family:Arial;
  font-size:13px;
}
#father{
  background-color:#a0c8ff;
  border:1px dashed #000000;
  width:100%;
  height:100%;
}
#block{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  position:absolute;    /* absolute絕對定位 */
  left:20px;        /* 塊的左邊框離頁面左邊界20px */
  top:40px;        /* 塊的上邊框離頁面上邊界40px */
}
-->
</style>
     </head>
<body>
  <div id="father">
    <div id="block">absolute</div>
  </div>
</body>
</html>
10-21.html
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
  margin:10px;
  font-family:Arial;
  font-size:13px;
}
#father{
  background-color:#a0c8ff;
  border:1px dashed #000000;
  width:100%;
  height:100%;
}
#block{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  position:absolute;    /* absolute絕對定位 */
  right:75%;        /* 塊的右邊框離頁面右邊界70% */
  bottom:10%;        /* 塊的下邊框離頁面下邊界10% */
}
-->
</style>
     </head>
<body>
  <div id="father">
    <div id="block">absolute</div>
  </div>
</body>
</html>
10-22.html
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
  margin:10px;
  font-family:Arial;
  font-size:13px;
}
#father{
  background-color:#a0c8ff;
  border:1px dashed #000000;
  width:100%;
  height:100%;
}
#block{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  position:absolute;    /* absolute絕對定位 */
  right:20px; left:30px;  /* 同時設置4個位置 */
  bottom:10%; top:10%;  
}
-->
</style>
     </head>
<body>
  <div id="father">
    <div id="block">absolute</div>
  </div>
</body>
</html>
10-23.html
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
  margin:10px;
  font-family:Arial;
  font-size:13px;
}
#father{
  background-color:#a0c8ff;
  border:1px dashed #000000;
  width:100%;
  height:100%;
  padding:5px;
}
#block1{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  position:absolute;    /* absolute絕對定位 */
  left:30px;
  top:35px;  
}
#block2{
  background-color:#ffbd76;
  border:1px dashed #000000;
  padding:10px;  
}
-->
</style>
     </head>
<body>
  <div id="father">
    <div id="block1">absolute</div>
    <div id="block2">block2</div>
  </div>
</body>
</html>
10-24.html
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
  margin:10px;
  font-family:Arial;
  font-size:13px;
}
#father{
  background-color:#a0c8ff;
  border:1px dashed #000000;
  width:100%;
  height:100%;
  padding:5px;
}
#block1{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  position:absolute;    /* absolute絕對定位 */
  left:30px;
  top:35px;  
}
#block2{
  background-color:#ffbd76;
  border:1px dashed #000000;
  padding:10px;
  position:absolute;    /* absolute絕對定位 */
  left:50px;
  top:60px;  
}
-->
</style>
     </head>
<body>
  <div id="father">
    <div id="block1">block1</div>
    <div id="block2">block2</div>
  </div>
</body>
</html>
10-25.html
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
  margin:10px;
  font-family:Arial;
  font-size:13px;
}
#father{
  background-color:#a0c8ff;
  border:1px dashed #000000;
  width:100%; height:100%;
  padding:5px;
}
#block1{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  position:relative;    /* relative相對定位 */
  left:15px;        /* 子塊的左邊框距離它原來的位置15px */
  top:10%;
}
-->
</style>
     </head>
<body>
  <div id="father">
    <div id="block1">relative</div>
  </div>
</body>
</html>
10-26.html
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
  margin:10px;
  font-family:Arial;
  font-size:13px;
}
#father{
  background-color:#a0c8ff;
  border:1px dashed #000000;
  width:100%; height:100%;
  padding:5px;
}
#block1{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  position:relative;    /* relative相對定位 */
  left:15px;        /* 子塊的左邊框距離它原來的位置15px */
  top:10%;
}
#block2{
  background-color:#ffc24c;
  border:1px dashed #000000;
  padding:10px;
}
-->
</style>
     </head>
<body>
  <div id="father">
    <div id="block1">relative</div>
    <div id="block2">block2</div>
  </div>
</body>
</html>
10-27.html
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
  margin:10px;
  font-family:Arial;
  font-size:13px;
}
#father{
  background-color:#a0c8ff;
  border:1px dashed #000000;
  width:100%; height:100%;
  padding:5px;
}
#block1{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  position:relative;    /* relative相對定位 */
  left:15px;        /* 子塊1的左邊框距離它原來的位置15px */
  top:30px;        /* 子塊1的左邊框距離它原來的位置30px */
}
#block2{
  background-color:#ffc24c;
  border:1px dashed #000000;
  padding:10px;
  position:relative;    /* relative相對定位 */
  left:10px;        /* 子塊2的左邊框距離它原來的位置10px */
  top:20px;        /* 子塊2的上邊框距離它原來的位置15px */
}
-->
</style>
     </head>
<body>
  <div id="father">
    <div id="block1">relative</div>
    <div id="block2">block2</div>
  </div>
</body>
</html>
10-28.html
<html>
<head>
<title>z-index屬性</title>
<style type="text/css">
<!--
body{
  margin:10px;
  font-family:Arial;
  font-size:13px;
}
#block1{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  position:absolute;
  left:20px;
  top:30px;
  z-index:1;          /* 高低值1 */
}
#block2{
  background-color:#ffc24c;
  border:1px dashed #000000;
  padding:10px;
  position:absolute;
  left:40px;
  top:50px;
  z-index:0;          /* 高低值0 */
}
#block3{
  background-color:#c7ff9d;
  border:1px dashed #000000;
  padding:10px;
  position:absolute;
  left:60px;
  top:70px;
  z-index:-1;          /* 高低值-1 */
}
-->
</style>
     </head>
<body>
  <div id="block1">AAAAAAAA</div>
  <div id="block2">BBBBBBBB</div>
  <div id="block3">CCCCCCCC</div>
</body>
</html>
10-29.html
<html>
<head>
<title>輕輕鬆鬆給圖片簽名</title>
<style type="text/css">
<!--
body{
  margin:15px;
  font-family:Arial;
  font-size:12px;
  font-style:italic;
}
#block1{
  padding:10px;    /* 給圖片加框 */
  border:1px solid #000000;
  float:left;
}
#block2{
  color:white;
  padding:10px;
  position:absolute;
  left:255px;      /* 移動到圖片上 */
  top:205px;
}

-->
</style>
     </head>
<body>
<div id="father">
  <div id="block1"><img src="building4.jpg" border="0"></div>
  <div id="block2">isaac photo</div>
</div>
</body>
</html>
10-30.html
<html>
<head>
<title>文字陰影效果</title>
<style type="text/css">
<!--
body{
  margin:15px;
  font-family:黑體;
  font-size:60px;
  font-weight:bold;
}
#block1{
  position:relative;
  z-index:1;
}
#block2{
  color:#AAAAAA;    /* 陰影顏色 */
  position:relative;
  top:-1.06em;    /* 移動陰影 */
  left:0.1em;
  z-index:0;      /* 陰影重疊關係 */
}

-->
</style>
     </head>
<body>
<div id="father">
  <div id="block1">CSS定位陰影</div>
  <div id="block2">CSS定位陰影</div>
</div>
</body>
</html>

來源：《精通CSS+DIV網頁樣式與佈局》
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

路遇一個“乞討者“

楊木藝 2019-02-24 14:19:35

如果同事暗中傷害你，應該怎麼辦？

這個饅頭有餡 2019-02-24 13:59:08

職場中，抱怨越多的員工，越被領導瞧不起！

這個饅頭有餡 2019-02-24 13:59:08

老程序員被裁，應屆生卻能月薪 1.3 萬？這你能忍？

前端高達 2019-02-24 13:48:04

遇到到處蹭吃卻從不請客吃飯的主怎麼辦？

樑軍年 2019-02-24 13:26:35

Linux基本操作命令

wbzjacky 2019-02-24 13:12:38

高標準機房綜合配線安裝

wbzjacky 2019-02-24 13:12:38

444句英語

wbzjacky 2019-02-24 13:12:37

IPsec ***實驗

wbzjacky 2019-02-24 13:12:37

真實的模擬***綜合實驗

wbzjacky 2019-02-24 13:12:37

網絡系統集成

wbzjacky 2019-02-24 13:12:37

CISCO路由AAA的Easy ***

wbzjacky 2019-02-24 13:12:37

三層交換機的HSRP、vlan、端口聚合

wbzjacky 2019-02-24 13:12:37

CISCO訪問控制列表 企業網絡管理的必殺技

wbzjacky 2019-02-24 13:12:37

HSRP和二層交換機的端口聚合、vlan

wbzjacky 2019-02-24 13:12:37