CSS篇.day03-按钮,圆角,阴影,自适应,层级,三栏布局

已于 2022-12-26 21:05:08 修改
阅读量789 收藏 4
点赞数 2
分类专栏： Web--- 文章标签： css 前端 html
于 2022-12-21 23:24:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54379580/article/details/128343546
版权

目录

一.按钮

二.圆角

三.阴影

四.自适应

1.宽度自适应

2.高度自适应

五.层级z-index

六.三栏布局

1.浮动实现

2.定位实现

3.表格布局实现

4.弹性布局(flex)实现

5.网格布局实现

一.按钮

  • button标签, 默认为内联块,  去自带边框 border: 0;
  • input标签, type="button"
  • a/div/p等元素, 转换为内联块设置宽高实现按钮

标签组, 结合float浮动实现

实现按钮禁用效果, 可结合透明度opacity(值0-1)和鼠标样式 cursor: not-allowed;

<body>
  <!-- 按钮     按钮组(结合浮动)  -->
  <!-- 方式1:   默认内联块 display: inlin-block;    去掉自带边框 可设置边框 border: 0; -->
  <button>按钮1</button>
  <!-- 方式2:  自带圆角(设置除宽高以外的属性时,圆角变直角) -->
  <input type="button" value="按钮2">
  <!-- 方式3: a链接/div/p等元素  变为内联块  设置宽高  -->
  <a href="#">按钮3</a>
 <!-- 图片按钮 -->
 <input type="image" src="../practice/豆瓣/images/a.png"> 
</body>

  <style type="text/css">
    button{
      width: 100px;
      height: 50px;
      background-color: rgb(240, 171, 171);
      border:  0; /* 去掉button自带边框 */
      /* 实现按钮禁用效果  结合透明度,以及鼠标样式 */
      opacity: 0.5;
      cursor: not-allowed; /*禁用*/
    }

    input{
      width: 100px;
      height: 50px;
      background-color: skyblue;
      border: 0;
    }

    a{
      display: inline-block;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      text-decoration: none;
      background-color: rgb(151, 235, 183);
    }
  </style>

二.圆角

  • border-radius  可同时设置四个角圆角效果,规则: 1个值四角相同, 2个值(左上和右下同)(右上和左下同)
  • border-top-left-radius  左上角
  • border-top-right-radius   右上角
  • border-bottom-right-radius  右下角
  • border-bottom-left-radius  左下角
<style>
   div{
      margin: 20px;
      width: 200px;
      height: 200px;
      line-height: 200px;
      text-align: center;
      font-size: 30px;
      background-color: rgb(246, 247, 180);
      /* 圆角      相当于在四个角放置四分之一的圆,可用数字+px, 或 % 来控制圆半径大小 数字越大,圆角越大   
                  设值规则: 1个值四角相同  2个值(左上和右下同)(右上和左下同) */
      border-radius: 20%;   /* 可以同时为元素的四个角设置圆角效果。 */
      border-top-left-radius: 20px;         /* 左上角设置圆角效果  */
      border-top-right-radius: 40px;       /* 右上角设置圆角效果  */
      border-bottom-right-radius: 60px;   /* 右下角设置圆角效果  */
      border-bottom-left-radius: 80px;   /* 左下角设置圆角效果  */
   }
</style>

三.阴影

  • 文本阴影  text-shadow: offset-x offset-y blur(模糊半径) color;  默认none(无阴影)
  • 盒子阴影  box-shadow: h-shadow   v-shadow  blur  spread(尺寸) color  outset/inset(外/内部);
<style>
 /* 阴影 */
      /* 文本阴影 */
      /* text-shadow: offset-x offset-y blur color;  默认none(无阴影)
            offset-x / offset-y: 必填参数，阴影的水平/垂直偏移量，可以为负值
            blur: 可选，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
            color: 可选参数，设置阴影的颜色，默认为color属性值
        可以同时设定多组阴影效果，按照定义顺序依次罗列(上右下左) */
      text-shadow: 10px 5px 5px rebeccapurple;
      text-shadow: 10px 5px 1px rgb(212, 182, 244),10px 5px 2px rgb(137, 70, 117),10px 5px 2px rgb(76, 188, 102), 1px 1px 6px rgb(238, 100, 100);

      /* 盒子阴影 */
      box-shadow: 20px 20px 2px 3px rgb(76, 188, 102) inset;
      /* box-shadow: h-shadow v-shadow blur spread color inset;
            h-shadow：必填参数，设置阴影水平方向的偏移量，可以为负值；
            v-shadow：必填参数，设置阴影垂直方向的偏移量，可以为负值；
            blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
            spread：可选参数，设置阴影的尺寸(外延)；
            color：可选参数，设置阴影的颜色；
            inset：可选参数，将默认的外部阴影 (outset) 改为内部阴影。
      */
</style>

四.自适应

1.宽度自适应

  • 块元素未设置宽,则为父盒子的宽度, 使用%时,为父盒子宽度的%
  • 块元素使用绝对定位, 但未设置宽度, 此时盒子宽度由内容撑开内容

2.高度自适应

  • 不设置高度或 hight: auto; 父元素高度为子元素撑开的高度
  • 最小/大高度 min-height/ max-height  IE6不兼容(使用_hight) 低版本中hight充当该属性
  • 过滤器(兼容低版本浏览器)

过滤器( 兼容低版本浏览器 )
           _   IE6中使用  _height
          *   IE6,IE7识别  *height
          \0  IE8及以上版本识别,其他浏览器都不识别
          \9   只有IE识别   height: 100px\9;   
          !important 最高权重   IE6不兼容

五.层级z-index

  • 整数(可正可负), 默认为0    数越大,层级越高,显示在前面
  • 用于设置了position: relative | absolute | fixed的元素或父元素设置了 display: flex属性的子元素中起作用，在其他元素中是不起作用的父子元素中, 父未设置z-index, 当子的z-index大于或等于0时, 子元素层级大于父元素

六.三栏布局

1.浮动实现

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .left{
      float: left;
      width: 15%;
      height: 100vh;
      background-color: antiquewhite;
    }
    .right{
      float: right;
      width: 15%;
      height: 100vh;
      background-color: antiquewhite;
    }
    .center{
      height: 100vh;
      background-color: rgb(197, 197, 93);
    }
    .main::after{
      content: '';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    /* .left{
      float: left;
      width: 15%;
      height: 100vh;
      background-color: antiquewhite;
    }
    .right{
      float: right;
      width: 15%;
      height: 100vh;
      background-color: antiquewhite;
    }
    .center{
      float: left;
      width: 70%;
      height: 100vh;
      background-color: rgb(197, 197, 93);
    } */

  </style>
</head>
<body>
  <div class="main">
    <div class="left"></div>
    <div class="right"></div>
    <!-- 中间内容盒子需放到最后, 避免放在中间独占一行,导致.right右浮动受影响 -->
    <div class="center"></div>
    
  </div>
</body>
</html>

2.定位实现

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    /* 采用定位的方式实现三栏布局, 给中间的的盒子设置左和右的距离 */
    .main{
      position: relative;
    }
    .left{
      position: absolute;
      top: 0;
      left: 0;
      width: 15%;
      height: 100vh;
      background-color: rgb(240, 214, 214);
    }
    .right{
      position: absolute;
      top: 0;
      right: 0;
      width: 15%;
      height: 100vh;
      background-color: rgb(240, 214, 214);
    }
    .center{
      position: absolute;
      left: 15%;
      right: 15%;
      height: 100vh;

      background-color: rgb(247, 200, 208);
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>
</html>

3.表格布局实现

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    /* 表格布局 */
    /* 左中右布局:  
        若实现一行排,  则每个盒子占一个单元格table-cell  
        需给父盒子加width,如果没有, 则宽高由子元素内容决定
        盒子未给高度,则由内容撑开
    */
    .main{
      display: table;
      width: 100%;
    }
    .left{
      display: table-cell;
      background-color: rgb(243, 203, 203);
    }
    .right{
      display: table-cell;
      background-color: rgb(244, 184, 184);
    }
    .center{
      display: table-cell;
      background-color: rgb(250, 218, 223);
    }

  /* 上中下布局
    一竖列, 则每个盒子占一列table-row, 
    盒子宽高由内容撑开, 宽度为最长内容盒子的宽度 
  */
    .main1{
      display: table;
      width: 100%;
    }
    .left1{
      display: table-row;
      background-color: rgb(245, 144, 144);
    }
    .right1{
      display: table-row;
      background-color: rgb(249, 111, 111);
    }
    .center1{
      display: table-row;
      background-color: rgb(228, 149, 161);
    }
    
  </style>
</head>
<body>
  <div class="main">
    <div class="left">1111111111111111111111111111111</div>
    <div class="center">1111111111111111111111111111</div>
    <div class="right">111111111111111111</div>
  </div>
  <div class="main1">
    <div class="left1">2222222222</div>
    <div class="center1">2222222222222222222</div>
    <div class="right1">222222222222222222222222222222222</div>
  </div>
</body>
</html>

4.弹性布局(flex)实现

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .main{
      display: flex;
      width: 100%;
      height: 100vh;
      justify-content: center;
      align-items: center;
    }
    .left{
      width: 200px;
      height: 100vh;
      background-color: rgb(231, 216, 196);
    }
    .right{
      width: 200px;
      height: 100vh;
      background-color: antiquewhite;
    }
    .center{
      /* 剩余空间给中间部分 */
      flex: 1;
      height: 100vh;
      background-color: rgb(238, 238, 167);
    }
  </style>


<body>
  <div class="main">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

5.网格布局实现

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .main{
      display: grid;
      grid-template-columns: 200px 1fr 200px;
      grid-template-rows: 100vh;
    }
    .left{
      background-color: rgb(231, 216, 196);
    }
    .right{
      background-color: antiquewhite;
    }
    .center{
      background-color: rgb(238, 238, 167);
    }
  </style>

PreviousNotes:

CSDN

CSDN

Mteee.
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mteee.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值