CSS基础

最新推荐文章于 2024-07-12 14:38:32 发布
最新推荐文章于 2024-07-12 14:38:32 发布
阅读量57 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66176699/article/details/131018653
版权

CSS（层叠样式表）

CSS的三种应用情况

就近原则：谁离该元素离得近就用哪个CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>芜湖</title>
    <!--通过style标签定义css，称为内部样式，放在头部文件里-->
    <style>
        h1{
            color: cornflowerblue;
        }
    </style>

    <!--通过link标签导入外部的css，属于外部样式（多用这个），也放在头部文件里-->
    <link rel="stylesheet" href="../1.我的第一个css程序/css/style.css">
</head>
<body>

<!--在行内通过style属性定义css属于内联样式（行内样式）-->
<h1>鸡你太美</h1>

</body>
</html>

三种基本选择器

1.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <!--标签选择器：选择到所有应用了这个标签的元素-->
    <style>
        h1{
            color: rgba(99, 27, 158, 0.96);
            background: #9e0c10;
            /*border-radius做一个圆角边框*/
            border-radius:10px;
        }
        p{
            color: #2a709e;
            font-size: 100px;
        }
    </style>
</head>
<body>

<h1>鸡你太美</h1>
<p>基尼实在是太美</p>

</body>
</html>

2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <!--类选择器可以给标签分类，不同的类再实现不同的效果   .class
    可以复用，不同的标签可以在一个类里，同样的标签也可以放在不同的类中-->
    <style>
        .blue{
            color: #13789e;
        }
        .purple{
            color: #75109e;
        }
        .red{
            color: #9e0b0f;
        }
    </style>
</head>
<body>

<h1 class="blue">鸡你太美</h1>
<h1 class="red">鸡你太美</h1>
<h1 class="purple">鸡你太美</h1>

<p class="red">迎面走来的你让我如此蠢蠢欲动</p>
<p class="blue">迎面走来的你让我如此蠢蠢欲动</p>
<p class="purple">迎面走来的你让我如此蠢蠢欲动</p>

</body>
</html>

3.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
<!--id选择器
    id全局唯一，指向单个元素,优先级最高-->
    <style>
        .blue{
            color: #17779e;
        }
        #green{
            color: #2d9e10;
        }
    </style>
</head>
<body>

<p id="green" class="blue">再看一眼就会爆炸</p>

</body>
</html>

层次选择器

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
  <style>
<!--后代选择器
    选择某一元素的所有后代-->
    body p{
      color: #1c189e;
    }
  </style>
</head>
<body>
<p>鸡你太美</p>
<p>鸡你太美</p>
<p>鸡你太美</p>
<ul>
  <li><p>鸡你太美</p></li>
  <li><p>鸡你太美</p></li>
  <li><p>鸡你太美</p></li>
</ul>
</body>
</html>

子一代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子一代选择器</title>
  <style>
<!--子一代选择器
    只选择子一代-->
    body>p{
      color: #3a9e1e;
    }
  </style>
</head>
<body>
<p>鸡你太美</p>
<p>鸡你太美</p>
<p>鸡你太美</p>
<ul>
  <li><p>鸡你太美</p></li>
  <li><p>鸡你太美</p></li>
  <li><p>鸡你太美</p></li>
</ul>
</body>
</html>

相邻兄弟选择器（向下选择一个）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
  <style>
<!--选择同一层次向下的一个兄弟-->
    .bro+p{
      color: #9e2329;
    }
  </style>
</head>
<body>
<p>鸡你太美</p>
<p class="bro">鸡你太美</p>
<p>鸡你太美</p>
<ul>
  <li><p>鸡你太美</p></li>
  <li><p>鸡你太美</p></li>
  <li><p>鸡你太美</p></li>
</ul>
</body>
</html>

所有兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所有兄弟选择器</title>
  <style>
<!--选择同一层次向下的所有兄弟-->
    .bro~p{
      color: #9e1b9d;
    }
  </style>
</head>
<body>
<p class="bro">鸡你太美</p>
<p>鸡你太美</p>
<p>鸡你太美</p>
<ul>
  <li><p>鸡你太美</p></li>
  <li><p>鸡你太美</p></li>
  <li><p>鸡你太美</p></li>
</ul>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
  <style>
    ul li:first-child{
      /*选择其父元素的第一个子元素*/
      color: #9e1c96;
    }
    ul li:last-child{
      /*选择其父元素的最后一个子元素*/
      color: #359e11;
    }
    /*p的父元素的第二个孩子，且这个孩子要是p才有用*/
    p:nth-child(2){
      color: #9e0e0f;
    }
    /*p的父元素的第二个p类型的孩子*/
    p:nth-of-type(2){
      color: #56268c;
    }
  </style>
</head>
<body>
<h1>鸡你太美</h1>
<p>鸡你太美</p>
<p>鸡你太美</p>
<p>鸡你太美</p>
<ul>
  <li>鸡你太美</li>
  <li>鸡你太美</li>
  <li>鸡你太美</li>
</ul>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: #1b368c;
      text-align: center;
      color: #9e0c10;
      text-decoration: none;
      margin-right: 5px;
        font: bold 20px/50px Arial;
    }
    /*
    绝对等于:  =
    */
    a[class=first]{
      color: #48fd1e;
    }
    /*
    包含: *=  
    */
    a[class*=first]{
        color: purple;
    }
    /*
    以什么开头：^=
    */
    a[href^=http]{
        color:greenyellow;
    }
    /*
    以什么结尾： $=
    */
    a[href$=html]{
        color: aliceblue;
    }
  </style>
</head>
<body>
<p class="demo">
<a href="http://localhost:8080" class="item group first">1</a>
<a href="img.123.html" class="first">2</a>
<a href="img.123" class="item group first">3</a>
<a href="img.123" class="item first">4</a>
<a href="img.123" class="item group first">5</a>
<a href="img.123" class="item group">6</a>
<a href="img.123" class="item group first">7</a>
<a href="img.123.html" class="item group first">8</a>
<a href="img.123" class="item group">9</a>
</p>
</body>
</html>

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
<!--字体大小：font-size
    字体：font-family
    字体风格：font-style
    字体粗细：font-weight-->
    <style>
        .f1{
            font-size: 25px;
            font-family: 仿宋;
            font-style: italic;
            color: red;
            font-weight: normal;
        }
        .f2{
            font-size: 50px;
            font-family: 华文中宋;
            font-style: normal;
            color:green;
            font-weight: bold;
        }
        #t1{
            font-size: 75px;
            font-family: 华文仿宋;
            font-style: oblique;
            color: blue;
            font-weight: bolder;
        }
        #t2{
            font-size: 100px;
            font-family: 华文行楷;
            font-style: inherit;
            color: black;
            font-weight: lighter;
        }
    </style>
</head>
<body>
<p class="f1">鸡你太美</p>
<p class="f2">鸡你太美</p>
<p id="t1">鸡你太美</p>
<p id="t2">鸡你太美</p>
</body>
</html>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        /*1.设置文本颜色：rgba a是指透明度
          2.设置文本对齐方式：text-align
          3.设置文本首行缩进：text-indent
          4.设置文本的高度：line-height
          5.文本的装饰：text-decoration*/
        .text1{
            color: rgba(390,22,0,90%);
            text-align: center;
            text-indent: 2em;
            line-height: 25px;
            text-decoration: overline;
            /*文本阴影：颜色 水平偏移 垂直偏移 阴影半径*/
            text-shadow: #fd4239 10px 0px 10px;
        }
        .text2{
            color: rgba(390,220,0,90%);
            text-align: center;
            text-indent: 2em;
            line-height: 50px;
            text-decoration: line-through;
        }
        .text3{
            color: rgba(390,22,80,90%);
            text-align: center;
            text-indent: 2em;
            line-height: 75px;
            text-decoration: underline;
        }
        .text4{
            color: rgba(390,122,0,90%);
            text-align: center;
            text-indent: 2em;
            line-height: 100px;
            text-decoration: overline;
        }
        .text5{
            color: rgba(390,229,0,90%);
            text-align: center;
            text-indent: 2em;
            line-height: 125px;
            text-decoration: overline;
        }
        .img1{
            width: 500px;
            height: 100px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p class="text1">
  鸡你太美
</p>
<p class="text2">
  鸡你太美
</p>
<p class="text3">
  鸡你太美
</p>
<p class="text4">
  鸡你太美
</p>
<p class="text5">
  鸡你太美
</p>
<div>
    <img src="../../resources/image/八重神子.jpg" alt="八重神子" class="img1">
    八重神子
</div>
</body>
</html>

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
  <style>
    a{
      color: #61fd27;
    }
    /*鼠标悬浮在超链接上时的效果*/
    a:hover{
      color: blue;
      font-size: 50px;
    }
    /*点击超链接会产生的效果*/
    a:active{
      color: red;
    }
    img{
      width: 500px;
      height: 100px;
    }
  </style>
</head>
<body>

<a href="https://www.bilibili.com/" ><img src="../../resources/image/八重神子.jpg" alt="八重神子"></a>
<a href="https://gitee.com/liyupi/code-roadmap">学习</a>
<a href="https://www.w3school.com.cn/">多读书</a>

</body>
</html>

导航栏作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏作业</title>
    <link rel="stylesheet" href="../9.导航栏作业/css/导航栏.css">
</head>
<body>
<div class="bg">
<h2 class="mycls">分类</h2>
<ul class="nav">
    <li><a href="https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?spm=a21bo.jianhua.201867-main.1.5af911d9IhzrYE&wh_pid=dailyAct-257518">女装</a>&nbsp;&nbsp;内衣&nbsp;&nbsp;奢侈品</li>
    <li>女鞋&nbsp;&nbsp;男鞋&nbsp;&nbsp;箱包</li>
    <li>美妆&nbsp;&nbsp;饰品&nbsp;&nbsp;洗护</li>
    <li>男装&nbsp;&nbsp;运动&nbsp;&nbsp;百货</li>
    <li>手机&nbsp;&nbsp;数码&nbsp;&nbsp;企业礼品</li>
    <li>家装&nbsp;&nbsp;电器&nbsp;&nbsp;车品</li>
    <li>食品&nbsp;&nbsp;生鲜&nbsp;&nbsp;母婴</li>
    <li>医药&nbsp;&nbsp;保健&nbsp;&nbsp;进口</li>
</ul>
</div>
</body>
</html>

.bg{
    /*1.background-color 背景颜色
      2.background-image 背景图片
      3.background-position 位置
      4.background-repeat 平铺 默认是铺满
        repeat x是水平平铺
        repeat y是垂直平铺*/
    background-color: #fff7e8;
    background-image: url("image/2.jpg");
    background-repeat: no-repeat;
    background-position: 280px 10px;
    width: 20em;
    height: 20em;
}
.mycls{
    text-align: left;
    color: #000000;
}
.nav{
    /*list-style
    对列表前的小圆点进行操作*/
    list-style: none;
    font-size: 1.5em;
    text-indent: 2em;
    /*background:颜色 图片 位置 平铺*/
    background: #0dff00 url("image/1.jpg") 10px 10px no-repeat;
}
a{
    color: black;
    text-decoration: none;
    font-family: 华文行楷;
}
a:hover{
    color: #ff20d0;
    text-decoration: underline;
}

内外边距和边框

body{
    background-color: #4158D0;
    background-image: -webkit-linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    background-image: -moz-linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    background-image: -o-linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
#title1{
    color: white;
    width: 7em;
    text-align: center;
}
/*1.内边距  padding
  2.外边距  margin
  3.边框  border：粗细 样式 颜色
       solid实线  dashed虚线*/
.set div input{
    margin: 5px;
    border: 1px dashed red;
    padding: 10px;
}

display和浮动

div{
    /*display 设置元素应该生成的框的特性
    none  元素不显示
    block  块元素
    inline  行内元素
    inline-block  同时拥有块元素和行内元素的特性，使块元素显示在同一行*/
    /*display: inline-block;*/
}
.image1{
    /*float
    设置元素浮动，像个气球一样*/
    width: 200px;
    height: 200px;
    float: left;
}
.image2{
    width: 200px;
    height: 200px;
    float: right;
}
.image3{
    width: 200px;
    height: 200px;
    float: right;

使用float造成的父级元素边框塌陷问题

对元素使用float后会使元素脱离文档流，不在整个文档流的管辖范围内，其父级元素的高度随着浮动不存在了（前提是父级元素没有设置一个固定的高度）。父级元素会呈现一个消失的效果。边框塌陷导致高度消失。

1.给父级元素设置一个高度

.father{
    height=1000px;
}

2.在最下面添加一个div标签清除浮动

#clear{
    padding: 0;
    margin: 0;
    /*clear
    left  清除左侧浮动
    right  清除右侧浮动
    both  清除两侧浮动*/
    clear: both;
}

3.使用overflow

.father{
    /*overflow
    hidden  根据内容的高度来显示父级元素的高度,父级元素高度会变化
    scroll  内容超出父级元素的高度时侧边出现滚动栏，父级元素高度不会变化*/
    overflow=hidden;
}

4.使用伪类：after（常用）

.fa:after{
    content: '';
    display: block;
    clear: both;
}

定位

相对定位

#son2{
    background-color: pink;
    height: 50px;
    border: 1px solid red;
    margin: 10px;
    /*position
    relative表示相对定位，相对于原来的位置进行偏移
    right：离原来位置右边的距离
    left：离原来位置左边的距离
    top：离原来位置上面的距离
    bottom：离原来位置下面的距离*/
    position: relative;
    right: 20px;
    bottom: 20px;
}

小练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fhoJTo3z-1685760015725)(C:\Users\xiebowen\AppData\Roaming\Typora\typora-user-images\image-20230414190822973.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <link rel="stylesheet" href="css/练习.css">
</head>
<body>
<div id="square">
    <div><a href="https://www.bilibili.com/"><span>链接1</span></a></div>
    <div><a href="https://www.bilibili.com/" id="second"><span>链接2</span></a></div>
    <div><a href="https://www.bilibili.com/"><span>链接3</span></a></div>
    <div><a href="https://www.bilibili.com/" id="four"><span>链接4</span></a></div>
    <div><a href="https://www.bilibili.com/" id="five"><span>链接5</span></a></div>
</div>
</body>
</html>

#square{
    width: 320px;
    height: 330px;
    padding: 5px;
    background-color: whitesmoke;
    border: 1px solid darkred;
}
#square a{
    width: 100px;
    height: 100px;
    text-decoration: none;
    display: inline-block;
    background-color: pink;
    margin: 5px;
    text-align: center;
}
a:hover{
    /*因为使用了#square a来改变a标签的背景颜色，
    而a:hover也是改变a标签的颜色，但是前者的权重大，所以后者
    失效*/
    background-color: #1c189e !important;
}
#second{
    position: relative;
    left: 110px;
}
#four{
    position: relative;
    top: -330px;
    right: -210px;
}
#five{
    position: relative;
    top: -220px;
    right: -210px;
}
span{
    color: white;
    line-height: 100px;
    font-size: 18px;
}

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
  <link rel="stylesheet" href="css/绝对定位.css">
</head>
<body>
<div id="box">
  <div class="one">盒子1</div>
  <div class="two">盒子2</div>
  <div class="three">盒子3</div>
</div>
</body>
</html>

#box{
    height: 300px;
    border: 1px solid red;
    position: relative;
}
#box div{
    background-color: #1c189e;
    height: 90px;
    margin: 10px;
}
.two{
    /*absolute
    1.当父级元素没有定位时，相对于浏览器进行定位
    2.当父级元素有定位时，相对于父级元素进行定位，且无法脱离父级元素
    3.脱离标准文档流，不会再保留原来的位置*/
    position: absolute;
    left: 100px;
}

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <link rel="stylesheet" href="css/固定定位.css">
</head>
<body>
<div>111</div>
<div>222</div>
</body>
</html>

body{
    background-color: whitesmoke;
    height: 2000px;
}
div:nth-of-type(1){
    width: 100px;
    height: 100px;
    background-color: pink;
    /*fixed
    相对于浏览器来说，固定在某个位置不动*/
    position: fixed;
    right: 0;
    bottom: 0;
}
div:nth-of-type(2){
    width: 50px;
    height: 50px;
    background-color: #1b368c;
    position: absolute;
    right: 0;
    bottom: 0;
}

图层z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kcbzkbNq-1685760015726)(C:\Users\xiebowen\AppData\Roaming\Typora\typora-user-images\image-20230415104710153.png)]

z-index越大，图层显示优先级越高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/图层.css">
</head>
<body>
<div>
    <img src="../../resources/image/帕瓦1.jpg" alt="">
    <img src="../../resources/image/帕瓦2.jpg" alt="">
</div>
</body>
</html>

img:first-child{
    width: 500px;
    height: 500px;
    /*高级图层会显示在低级图层上面，低级图层会被高级图层遮挡*/
    z-index: 0;
}
img:last-child{
    width: 500px;
    height: 500px;
    z-index: 1;
    position: absolute;
    left: 120px;
}
初入java之练气一层
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Css简单动画实现蔡徐坤跳舞
qq_41640555的博客
08-17 1万+
(学习css动画突发奇想做的。) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
CSS基础语句
weixin_53968665的博客
12-25 1361
CSS
STM32-OLED显示GIF图片，（基尼太美）小黑子打篮球.zip
11-09
STM32-OLED显示GIF图片，（基尼太美）小黑子打篮球.zip
我用AI帮我唱了首“基尼太美”，颠覆了我的认知！太牛逼了
小草的博客
05-26 800
看大侠用AI唱“基尼太美”
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础知识
ashfiqa的博客
01-21 2095
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 3267
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2628
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css基础知识
健康平安的活着的专栏
05-12 1870
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教学1
08-03
CSS基础教学1 CSS是 Cascading Style Sheets 的缩写，译为层叠样式表，是一种用于描述网页样式的语言。CSS主要用于控制网页的布局、颜色、字体、背景等各种样式元素。 在本教程中，我们将学习如何使用CSS对...
css基础教程
01-24
css基础教程，针对css提供基础讲解，让初学者可以很好的学习
css 基础样式 base.css
04-28
css基础样式
CSS基础入门（详细总结笔记）
程序员阿龙的博客
08-12 3348
CSS基础入门，详细总结
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1211
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 637
仅对已定位的元素（）有效，默认值为0，可以为负值。
css画半圆&&画圆弧
最新发布
M1512415的博客
07-12 166
【代码】css画半圆&&画圆弧。
CSS基础知识.docx
07-23
"此文档主要介绍了CSS的基础知识，包括盒子模型、...了解并熟练掌握这些CSS基础知识，将有助于创建更美观、响应式和易于维护的网页设计。在实际工作中，灵活运用CSS选择器和理解盒子模型对于布局和样式控制至关重要。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值