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