亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

淺談HTML（css基礎(chǔ)樣式）

  發(fā)布時間：2016-06-27 09:56:17   作者：佚名   我要評論
下面小編就為大家?guī)硪黄獪\談HTML（css基礎(chǔ)樣式）。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

solid 邊框加粗
border：5px 設(shè)置邊像素
display:inline-block 橫著顯示塊狀的
line-height:40px 字體上下居中
text-align：center 字體左右居中
margin-right：20px 調(diào)整外界邊框

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <body style="margin: 0px">  
  2.   
  3.     <!--默認(rèn)8px-->  
  4.   
  5.     <div style="width: 80px;height: 40px;border: 5px salmon solid; 
  6.  
  7.     display: inline-block; line-height: 40px; text-align: center; 
  8.  
  9.     margin-right:20px">呵呵</div>  
  10.   
  11.    
  12.   
  13.     <div style="width: 80px; height: 40px;border: 5px slateblue solid; 
  14.  
  15.     display: inline-block;line-height: 40px; text-align: center; 
  16.  
  17.     margin-right: 60px">導(dǎo)航</div>  

chabaoo.cn

 

2. margin;邊距，順序是上 ，右， 下， 左 可以負(fù)數(shù)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="width: 200px;height: 200px;border: 5px salmon solid;">  
  2.   
  3.     <div style="width: 100px;height: 100px;border: 5px seagreen solid; 
  4.  
  5.     margin: 20px 30px 20px 50px"></div>  
  6.   
  7.     <!--margin;邊距，順序是上 ，右， 下， 左  可以負(fù)數(shù)-->  
  8.   
  9. </div>  

chabaoo.cn

2.1 padding:內(nèi)邊距 順序一樣，上，左，下，右，從內(nèi)邊緣開始長胖

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="width: 200px;height: 200px;border: 5px salmon solid;">  
  2.   
  3.     <div style="width: 100px;height: 100px;border: 5px seagreen solid; 
  4.  
  5.     padding: 20px 30px 20px 50px"></div>  
  6.   
  7.     <!--padding:內(nèi)邊距 順序一樣，上，左，下，右，從內(nèi)邊緣開始長胖-->  
  8.   
  9. </div>  

chabaoo.cn

3.margin-top 設(shè)置元素的上外邊距，如果有多個邊距則選擇最大值

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="width: 200px;height: 200px;background-color: #FF0000; 
  2.  
  3. margin-top: 100px">  
  4.   
  5.     <div style="width: 100px;height: 100px;background-color: aqua; 
  6.  
  7.     margin-top: 30px"></div>  
  8.   
  9.     <!--margin-top 設(shè)置設(shè)置元素的上外邊距，如果有多個邊距則選擇最大值-->  
  10.   
  11.    
  12.   
  13. </div>  

chabaoo.cn

 

浮動調(diào)整

1.無浮動效果

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="width: 200px; height: 200px;border: 10px darkmagenta solid">無與倫比</div>  
  2.   
  3. <div style="width: 300px;height: 300px;background-color: chartreuse">的美麗</div>  
  4.   
  5. <!--background-color:設(shè)置背景顏色  bordex設(shè)置邊框-->  
  6.   
  7. <!--沒有浮動的效果-->  

chabaoo.cn

 

2.有浮動的效果

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="width: 200px; height: 200px;border: 10px salmon solid;float:left">無與倫比</div>  
  2.   
  3. <div style="width: 300px; height: 300px;background-color: seashell">美妙絕倫</div>  
  4.   
  5. <!--有浮動效果-->  
  6.   
  7. <br>  

chabaoo.cn

3.清除浮動

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="width: 200px;height: 200px;border: 10px darkgoldenrod solid;float: left">無與倫比</div>  
  2.   
  3. <div style="clear: left;width: 300px;height: 300px;background-color: chartreuse;">美妙絕倫</div>  
  4.   
  5. <!--clear:left 清除浮動，只可以清除左浮動  
  6.   
  7. clear:both 清除所有浮動  
輸出的結(jié)果是，和沒寫浮動是一樣的

以上就是小編為大家?guī)淼臏\談HTML（css基礎(chǔ)樣式）全部內(nèi)容了，希望大家多多支持腳本之家~

原文地址：http://www.cnblogs.com/pythonxiaohu/p/5614514.html

相關(guān)文章

最新評論