div第二課 margin外邊框px大小 border邊框的設置

時間 2019-11-22

標籤 div 第二 margin 邊框大小 border 設置欄目 CSS 简体版

原文原文鏈接

內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>盒模型</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style>
   #container{
       width: 1002px;
       height: 800px;
       background: blue;
   }
   #header{
       height: 100px;
       background: green;
   }
   #main{
       height: 500px;
       background: purple;
   }
   #lside{
       width: 700px;
       background: pink;
   }

   .four{
       width: 300px;
       height: 200px;
       background: black;
       float: left;ide

//margin設置外邊框大小ui

        margin: 10px;
   }

   #rside{
       width: 302px;
       background: red;
   }
   #footer{
       height: 200px;
   }
</style>
</head>
    <body>
       <div id="container">
       <div id="header"></div>
       <div id="main">
       <div id="lside">
           <div></div>
           <div></div>
           <div></div>
           <div></div>
       </div>
       <div id="rside"></div>
       </div>
       <div id="footer"></div>

       </div>
    </body>
</html>spa

border邊框設置：xml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style>
   #container{
       width: 800px;
       background: black;
   }
   #header{
       width: 300px;
       height: 300px;
       background: blue;
       border: 20px rdige green;
       /*border 邊框 solid 實線背景綠色*/
   }
</style>
</head>
    <body>
       <div id="container">
           border三要素寬，形狀，顏色，畫一個三角形
           <div id="header"></div>
           <div id="main"></div>
           <div id="footer"></div>
       </div>
    </body>
</html>
htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。