1000元配置

2000元配置

3000元配置

4000元配置

5000元配置

6000元配置

7000元配置

8000元配置

9000元配置

万元配置

i3配置

 i5配置

i7配置

APU配置

R5配置

R7配置

游戏攻略

软件教程

Win10教程

Win7教程

Mac教程

Linux教程

U盘教程

Server教程

首页 > 网页制作 > CSS

浅谈HTML（css基础样式）

admin CSS 2022-02-06 16:03:54 HTML   css   基础"

solid 边框加粗
border：5px 设置边像素
display:inline-block 横着显示块状的
line-height:40px 字体上下居中
text-align：center 字体左右居中
margin-right：20px 调整外界边框

CSS Code复制内容到剪贴板
  1. "margin: 0px">  
  2.   
  3.       
  4.   
  5.     "width: 80px;height: 40px;border: 5px salmon solid; 
  6.  
  7.     display: inline-block; line-height: 40px; text-align: center; 
  8.  
  9.     margin-right:20px">呵呵
  
  •   
  •    
  •   
  •     "width: 80px; height: 40px;border: 5px slateblue solid; 
  •  
  •     display: inline-block;line-height: 40px; text-align: center; 
  •  
  •     margin-right: 60px">导航
    •   

    www.jb51.net

     

    2. margin;边距，顺序是上 ，右， 下， 左 可以负数

    CSS Code复制内容到剪贴板
    1. "width: 200px;height: 200px;border: 5px salmon solid;">  
    2.   
    3.     "width: 100px;height: 100px;border: 5px seagreen solid; 
    4.  
    5.     margin: 20px 30px 20px 50px">
      
  •   
  •       
  •   
    •   

    www.jb51.net

    2.1 padding:内边距 顺序一样，上，左，下，右，从内边缘开始长胖

    CSS Code复制内容到剪贴板
    1. "width: 200px;height: 200px;border: 5px salmon solid;">  
    2.   
    3.     "width: 100px;height: 100px;border: 5px seagreen solid; 
    4.  
    5.     padding: 20px 30px 20px 50px">
      
  •   
  •       
  •   
  •   

    • www.jb51.net

    3.margin-top 设置元素的上外边距，如果有多个边距则选择最大值

    CSS Code复制内容到剪贴板
    1. "width: 200px;height: 200px;background-color: #FF0000; 
    2.  
    3. margin-top: 100px">  
    4.   
    5.     "width: 100px;height: 100px;background-color: aqua; 
    6.  
    7.     margin-top: 30px">  
    8.   
    9.       
    10.   
    11.    
    12.   
    13.   

    www.jb51.net

     

    浮动调整

    1.无浮动效果

    CSS Code复制内容到剪贴板
    1. "width: 200px; height: 200px;border: 10px darkmagenta solid">无与伦比  
    2.   
    3. "width: 300px;height: 300px;background-color: chartreuse">的美丽  
    4.   
    5.   
    6.   
    7.   

    www.jb51.net

     

    2.有浮动的效果

    CSS Code复制内容到剪贴板
    1. "width: 200px; height: 200px;border: 10px salmon solid;float:left">无与伦比  
    2.   
    3. "width: 300px; height: 300px;background-color: seashell">美妙绝伦  
    4.   
    5.   
    6.   

    7.   

    www.jb51.net

    3.清除浮动

    CSS Code复制内容到剪贴板
    1. "width: 200px;height: 200px;border: 10px darkgoldenrod solid;float: left">无与伦比  
    2.   
    3. "clear: left;width: 300px;height: 300px;background-color: chartreuse;">美妙绝伦  
    4.   

    5. 热门文章

      最近发表

      标签列表

      潘少俊衡

      | 桂ICP备2023010378号-4

      Powered By EmpireCMS

      爱享小站

      中德益农

      谷姐神农

      环亚肥料

      桂ICP备2023010378号-4

      桂公网备 45012202000125号

      联系我们

      商业合作

      广告投放

      投稿须知

      使用手机软件扫描微信二维码

      关注我们可获取更多热点资讯

      感谢潘少俊衡友情技术支持