CSS背景案例，三大特性，盒子边框内边距149

最新推荐文章于 2024-05-23 22:10:35 发布

IE吃饭

最新推荐文章于 2024-05-23 22:10:35 发布

阅读量191

点赞数

文章标签： css

本文链接：https://blog.csdn.net/luojunjie1999/article/details/107253704

版权

1.背景图像固定

      background-attachment: fixed;

2.背景复合写法
在这里插入图片描述

      background: pink url() no-repeat fixed top;

3.背景颜色半透明
在这里插入图片描述

      background: rgba(255, 0, 0, 0.3);

五彩导航小案例

<style>
    .nav a{
      display: inline-block;
      width: 120px;
      height: 58px;
      background-color: pink;
      line-height: 50px;
      text-align: center;
      text-decoration: none;
      color: #ffffff;
    }
    .nav .bg1{
      background: url(bg1.png) no-repeat;
    }
    .nav .bg1:hover{
      background-image: url(bg2.png);
    }
    .nav .bg2{
      background: url(bg3.png) no-repeat;
    }
    .nav .bg2:hover{
      background-image: url(bg4.png);
    }
  </style>
  <body>
    <div class="nav">
      <a href="#" class="bg1">五彩导航</a>
      <a href="#" class="bg2">五彩导航</a>
    </div>
  </body>

CSS层叠性

在这里插入图片描述

CSS继承性

在这里插入图片描述

CSS优先级

权重高的优先级高
在这里插入图片描述
注意事项

盒子模型

在这里插入图片描述
1.盒子边框border

    div{
      width: 300px;
      height: 200px;
      /* 边框宽度 */
      border-width: 4px;
      /* 边框样式 ，solid实线边框,dashed虚线边框,dotted点线边框*/
      border-style:dotted;
      /* 边框颜色 */
      border-color: pink;
    }

边框简写方法
没有顺序要求

      border: 4px solid pink;

边框分写方法

      border-top: 2px dashed red;
      border-bottom: 3px solid blue;
      border-left: 4px dotted yellow;
      border-right: 5px solid #000;

表格细线边框
在这里插入图片描述

2.盒子内边距padding
就是边框与内容之间的距离

      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;

属性值：

在这里插入图片描述

新闻导航栏案例

   <style>
      .nav {
        height: 41px;
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
        background-color: #fcfcfc;
        line-height: 41px;
      }
      .nav a{
        display:inline-block;
        height: 41px;
        color: #4c4c4c;
        font-size: 14px;
        text-decoration: none;
        padding: 0 20px;
      }
      .nav a:hover{
        background-color: #ff8500;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <a href="#">微博</a>
      <a href="#">新浪网</a>
      <a href="#">新浪微博</a>
      <a href="#">新浪导航网</a>
    </div>
  </body>

IE吃饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS背景案例，三大特性，盒子边框内边距149

1.背景图像固定 background-attachment: fixed;2.背景复合写法 background: pink url() no-repeat fixed top;3.背景颜色半透明 background: rgba(255, 0, 0, 0.3);五彩导航小案例<style> .nav a{ display: inline-block; width: 120px; height:
复制链接

扫一扫