授業後の宿題箱の模型とは何ですか.ボックスモデルの属性は何個ありますか?彼らの役割はそれぞれ何ですか.

                 CSS            
  (content)、   (padding)、  (border)、   (margin)， CSS           
      （border）(        4     )
  ：border-width|border-style|border-color
        （padding）(            4    )
padding-top:    
padding-right:    
padding-bottom:    
padding-left:    
        （margin）(            4    )
margin-top:    
margin-right:    
margin-bottom:    
margin-left:    

2.箱の模型にはどのような解析方法がありますか.彼らにはどんな違いがありますか.ボックスには2つの解析方法があります.スタイルシートにbox-sizingと入力すると、border-boxとcontent-boxが表示されます.1つ目は枠ボックスサイズで、2つ目はコンテンツサイズです.1つの要素にサイズを設定すると、デフォルトでは要素コンテンツのサイズ、つまりcontent-boxが設定されます.これは後期レイアウトで多くの不便がありますが、border-boxを使用すると、私たちが設定した寸法は実際には、内容寸法+両側の内側余白+両側の枠線幅3に等しい.北京大学の青い鳥のウェブサイトの中心のクラスを開く情報のブロックのHTMLコードを作ります:

	
		
		
		
	
	
		

			
センター    
			

				
8 12 ：  +  クラス
				
8 16 ：    の    クラス
				
8 23 :Javaエリートクラス
				
8 31 ：      
				
9 5 ：     クラス
				
9 9 :       
				
9 16 ：ネットマーケティング   
			
		
	

CSSスタイル:

h1,
ul,
li {
	margin: 0px;
	padding: 0px;
}

#nav {
	width: 250px;
	box-sizing: border-box;
	margin: auto;
	border: 1px solid gray;
	border-radius: 8px;
	background: linear-gradient(to bottom, #5EC2F9, #ffffff, #FFFFFF, #ffffff,#ffffff);
}

h1 {
	color: white;
	font-size: 16px;
	border-bottom: 1px solid white;
	padding: 8px;
	background: url(../img/bg.gif)10px no-repeat;
	text-indent: 2.5em;
}

ul {
	width: 220px;
}

li {
	font-size: 16px;
	list-style-type: none;
	background: url(../img/dotBg.gif)0px 2px no-repeat;
	margin-top: -6px;
	padding: 8px 18px;
}

ul li:last-of-type {
	margin-bottom: 10px;
}

a {
	color: gray;
	text-decoration: none;
}

a:hover {
	color: orangered;
}

4.商品分類リストページHTMLコードを作成する:

	
		
		
		
	
	
		

			

				
ドリンク
				
    
				
カジュアルなおやつ
				
  の   
				
ヘルスケア
				
    
				
ビューティー
				
クリーニングせんじょう
				
  、   
				
ホームデパート
			
		
	

CSSスタイル:

#nav {
	border: 2px solid orange;
	border-radius: 8px;
	width: 200px;
	padding: 3px;
	height: 479px;
}

a {
	color: black;
	text-decoration: none;
}
a:hover{
	color: orangered;
}
li {
	list-style-type: none;
	font-size: 14px;
	font-family: "    ";
	margin-left: -40px;
	padding: 0px;
}

ul li:nth-of-type(1) {
	margin-top: -18px;
	background-image: url(../img/icon_01.jpg);
	background-repeat: no-repeat;
	line-height: 48px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(2) {
	background-image: url(../img/icon_02.jpg);
	background-repeat: no-repeat;
	line-height: 50px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(3) {
	background-image: url(../img/icon_03.jpg);
	background-repeat: no-repeat;
	line-height: 48px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(4) {
	background-image: url(../img/icon_04.jpg);
	background-repeat: no-repeat;
	line-height: 45px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(5) {
	background-image: url(../img/icon_05.jpg);
	background-repeat: no-repeat;
	line-height: 48px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(6) {
	background: url(../img/icon_06.jpg);
	background-repeat: no-repeat;
	line-height: 47px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(7) {
	background-image: url(../img/icon_07.jpg);
	background-repeat: no-repeat;
	line-height: 47px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(8) {
	background-image: url(../img/icon_08.jpg);
	background-repeat: no-repeat;
	line-height: 48px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(9) {
	background-image: url(../img/icon_09.jpg);
	background-repeat: no-repeat;
	line-height: 48.3px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(10) {
	background-image: url(../img/icon_10.jpg);
	background-repeat: no-repeat;
	line-height: 46px;
	text-indent: 3.5em;
}

5.権威あるカリキュラムの無料体験登録ページHTMLコードを作成する:

	
		
		
		
	
		
	
		

			

				
*   : 
				
*   : 
				
*   : 
				
				

						  :
					
						   
						 
						 
					
				
				

					  :
					
						   
						16
						17
						18
						19
						20
					
				
				

			
		
	

CSSスタイル:

body {
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;
}

body div:first-of-type {
	color: white;
	width: 350px;
	box-sizing: border-box;
	margin-top: 35px;
	text-align: center;
	padding: 35px 25px 50px 0px;
	font-size: 16px;
}

P span {
	margin-left: -45px;
}

span {
	color: red;
}

input{
	border-radius: 4px;
	line-height: 20px;
	width: 200px;
}

select {
	border-radius: 5px;
}

form p:nth-of-type(4),
form p:nth-of-type(5) {
	padding-right: 170px;
}

a {
	margin-left: 4px;
	margin-right: 4px;
	font-weight: 900;
}