浅谈HTML(css基本款式)

2020-10-17 16:44 jianzhan

solid 边框加粗
border:5px 设定边像素
display:inline-block 横着显示信息块状的
line-height:40px 字体样式左右垂直居中
text-align:center 字体样式上下垂直居中
margin-right:20px 调剂外部边框

CSS Code拷贝內容到剪贴板
  1. <body style="margin: 0px">  
  2.   
  3.     <!--默认设置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">导航栏</div>  

 

2. margin;边距,次序是上 ,右, 下, 左 能够负数

CSS Code拷贝內容到剪贴板
  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;边距,次序是上 ,右, 下, 左  能够负数-->  
  8.   
  9. </div>  

2.1 padding:内边距 次序1样,上,左,下,右,从内边沿刚开始长胖

CSS Code拷贝內容到剪贴板
  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:内边距 次序1样,上,左,下,右,从内边沿刚开始长胖-->  
  8.   
  9. </div>  

3.margin-top 设定元素的上外边距,假如有好几个边距则挑选最大值

CSS Code拷贝內容到剪贴板
  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 设定设定元素的上外边距,假如有好几个边距则挑选最大值-->  
  10.   
  11.    
  12.   
  13. </div>  

 

波动调剂

1.无波动实际效果

CSS Code拷贝內容到剪贴板
  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:设定情况色调  bordex设定边框-->  
  6.   
  7. <!--沒有波动的实际效果-->  

 

2.有波动的实际效果

CSS Code拷贝內容到剪贴板
  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>  

3.消除波动

CSS Code拷贝內容到剪贴板
  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 消除全部波动  
輸出的結果是,和没写波动是1样的

以上便是网编为大伙儿带来的浅谈HTML(css基本款式)所有內容了,期待大伙儿多多适用脚本制作之家~

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