css

CSS3

什么是CSS

  • Cascading Style Sheet 层叠级联样式表

  • CSS 表现 美化页面

  • 发展史

  • CSS1.0

  • CSS2.0 DIV+CSS，CSS和HTML结构分离 网页简单 SEO

  • CSS2.1 浮动 定位

  • CSS3.0 圆角 阴影 动画

CSS入门

  • 基本语法

  • 选择器

  • 两种写法

  • 1 css和html写在一个文件使用，在head中用style包裹

  • 2 创建css文件，直接写，在html中link一下

  • 推荐2

  • CSS优势

  • 内容丰富，结构统一清晰，利用SEO

image-20241212163310601

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css入门</title>

<!--  <style>-->
<!--    h1{-->
<!--      color: aquamarine;-->
<!--    }-->
<!--  </style>-->

  <link rel="stylesheet" href="css/style.css">


</head>
<body>
<h1>我是标题</h1>
</body>
</html>

三种css导入方式

  • 行内样式，内部样式，外部样式
  • 行内是标签内 style属性定义
  • 内部是style标签内定义
  • 外部是外部写好，然后link链接或者@import导入
  • 如果同时定义，行内最大，内部外部看哪个离元素更近，结果是更近的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  导入式-->
<!--  <link rel="stylesheet" href="css/style.css">-->
<!--  链接式-->
  <style>
    @import url(css/style.css);
  </style>

</head>
<body>
<h1 style="color: blueviolet">zhm学css</h1>
<h2>zhm学css2</h2>
</body>
</html>

选择器（重点）

  • 学好基本选择器和属性选择器

基本选择器

  • 标签选择器，所有标签同时改变

    标签名

  • 类选择器，所有类名相同组件同时改变

    .类名

  • id选择器，id全局唯一，指定改变

    id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    h1{
      color: blue;
    }
  </style>
</head>
<body>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .lxzq{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="lxzq">类选择器</h1>
<h1>类选择器</h1>
<h1 class="lxzq">类选择器</h1>
<h1>类选择器</h1>

<button class="lxzq">类选择器</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #idxzq{
            color: beige;
        }
    </style>
</head>
<body>
<h1 id="idxzq">id选择器</h1>
<h1>id选择器</h1>
<h1>id选择器</h1>
<h1>id选择器</h1>
</body>
</html>

层次选择器

  • 三种基本选择器+标签使用
  • 语法-> 选择（空格，>，+，~）标签名
  • 后代选择器 后代选择器，body后代所有p（所有）
  • 子选择器，body下的一代的p（所有）
  • 相邻兄弟选择器（下面1个）
  • 通用兄弟选择器（下面所有）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
  /*  !**/
  /*  后代选择器，body后代所有p*/
  /*   *!*/
    body p{
      background-color: blueviolet;
    }
  /*!*子选择器，body下的一代的p*!*/
    body>p{
      background-color: blue;
    }
  /*!*  相邻兄弟选择器，class为ppp的同辈下一个p，只有一个*!*/
    .ppp+p{
      background-color: brown;
    }
  /*  通用兄弟选择器，class为ppp的同辈所有p，所有*/
    .ppp~p{
      background-color: coral;
    }



  </style>
</head>
<body>

<p>p1</p>
<p class="ppp">p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>
<p class="ppp">p7</p>
<p>p8</p>

</body>
</html>

结构伪类选择器

  • 带：的选择器就是伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*有：的就是伪类选择器*/
    /*ul下的第一个li*/
    ul li:first-child{
      background: coral;
    }
    /*ul下的最后一个li*/
    ul li:last-child{
        background: blueviolet;
    }
    /*p标签父级的第二个标签，如果是p类型，就执行，不然不执行*/
    p:nth-child(2){
        background: blue;
    }
    /*p标签父级的第二个p标签*/
    p:nth-of-type(2){
        background: brown;
    }
  </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>l1</li>
  <li>l2</li>
  <li>l3</li>
</ul>

</body>
</html>

属性选择器

  • 属性选择器是三种基本选择器+属性特别选取（用正则表达式）

  • =//绝对等于
*=//包含
^=//开头是
$=//结尾是

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: bisque;
      text-align: center;
      color: blueviolet;
      text-decoration: none;
      margin: 5px;
      font: bold 50px/50px Arial;
    }

    /*a标签有id属性*/
    a[id]{
      background: yellow;
    }
    /*a标签id属性完全等于first*/
    a[id="first"]{
      background: yellow;
    }
    /*a标签class属性包含img和links*/
    a[class*="img links"]{
      background: yellow;
    }
    /*a标签的跳转链接href开头是http*/
    a[href^="http"]{
      background: yellow;
    }
    /*a标签的href结尾是jpg*/
    a[href$="jpg"]{
      background: yellow;
    }
    /*class是links的href结尾是jpg*/
    .links[href$="jpg"]{
      background: #000000;
    }
  </style>

</head>
<body>
<p class="demo">
  <a href="https://www.baidu.com" class="links item first" id="first">1</a>
  <a href="http://www.baidu.com" class="links second">2</a>
  <a href="sb/1.jpg" class="img links">3</a>
  <a href="sb/2.mp3" class="video links">4</a>
  <a href="sb/2.jpg" class="img links">5</a>
  <a href="../1我的第一个css程序/index.html" class="css links">6</a>
  <a href="../2导入方式/3.pdf" class="links pdf">7</a>
  <a href=" " class="null links last" id="last">8</a>

</p>
</body>
</html>

字体样式

  • css作用

  • 美化网页，吸引人

  • 字体样式font

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*span标签写突出的内容*/
    span{
        font-size: larger;
    }
    body{
        /*字体风格，可以写中英两种*/
        font-family: 楷体,"Arial";
        /*字体颜色*/
        color: cornflowerblue;
    }
    #title{
        color: red;
        /*字体大小，可以写数字px或者em 1em=一个空格*/
        font-size: 100px;
    }
    .pang{
        font-size: 50px;
        /*字体粗细大小，可以写数字，最大1000*/
        font-weight: bolder;
    }
  </style>
</head>
<body>
<span>《星游记》</span>nb
<h1 id="title">《星游记》</h1>
<p class="pang">
  《星游记》光世界观的建立就花了两个月，写故事梗概用了半年时间，每个人物都有自己的小传，脚本还会边做边修。
</p>
<p class="pang">
  该动画主要讲述了一位地球上的普通少年麦当为了完成与父亲麦林的约定，出发寻找被全世界视为谎言的彩虹海，并在找寻的路途上结识了亚亚罗星球国王咕咚·萌西和太阳系最后一个星学家笛亚，几人一起击败强大的敌人向彩虹海进发的冒险故事。
</p>
</body>
</html>

  • 另一种写一起 要按顺序 font：image-20241215152355494image-20241215152526486

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .ttt{
      font:bolder 50px 微软雅黑;
    }
  </style>
</head>
<body>
<p class="ttt">
  fucker该动画主要讲述了一位地球上的普通少年麦当为了完成与父亲麦林的约定，出发寻找被全世界视为谎言的彩虹海，并在找寻的路途上结识了亚亚罗星球国王咕咚·萌西和太阳系最后一个星学家笛亚，几人一起击败强大的敌人向彩虹海进发的冒险故事。
</p>
</body>
</html>

image-20241215152550302

必写参数前面会有？，类似这个font，必写参数就是fon-tsize和font-family

文本样式

  • rgb 红绿蓝 rgba 红绿蓝透明度
  • text-属性
  • text-align位置，text-decoration下划线，text-indent首行缩进
  • line-height行高 height块高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #hio{
      /*rgb 红绿蓝 rgba 红绿蓝透明度*/
      color: rgb(0,255,255);
      color: #00FFFF;
      color: rgba(0,255,255,0.3);
      /*文本居中*/
      text-align: center;
      /*文本下划线*/
      text-decoration: underline;
    }
    #hio2{
      /*文本中划线*/
      text-decoration: line-through;
    }
    #hio3{
      /*文本上划线*/
      text-decoration: overline;
    }

    #yiban{
      /*背景颜色*/
      background: brown;
      /*块的高度*/
      height: 200px;
    }

    .haojiu{
      /*块内文本每行行高*/
      /*块的高度=块内文本每行行高，可以实现单行文字上下居中*/
      line-height: 200px;
      /*首行缩进2em=2空格*/
      text-indent: 2em;
    }

    span,img{
      /*文字在图片后面的中间，文字图片水平对齐*/
      vertical-align: middle;
    }

  </style>
</head>
<body>
<h1 id="hio">Java io流</h1>
<h1 id="hio2">Java io流2</h1>
<h1 id="hio3">Java io流3</h1>

<img src="resoures/img/72.jpg" alt="" height="400">
<span>这漫画确实nb，哎呦我，牛逼汤圆汤圆汤圆汤圆汤圆汤圆汤圆汤圆汤圆</span>

<p class="haojiu" id="yiban">
  好久没搞过 IO 了，老王看到这幅思维导图也是吃了一惊。想想也是，他当初学习 Java IO 的时候头也大，乌央乌央的一片，全是类，估计是所有 Java 包里面类最多的，一会是 Input 一会是 Output，一会是 Reader 一会是 Writer，真不知道 Java 的设计者是怎么想的。
  看着肺都快要气炸的小二，老王深深地吸了一口气，耐心地对小二说：“主要是 Java 的设计者考虑得比较多吧，所以 IO 给人一种很乱的感觉，我来给你梳理一下。”
  00、初识 Java IO IO，即in和out，也就是输入和输出，指应用程序和外部设备之间的数据传递，常见的外部设备包括文件、管道、网络连接。 Java 中是通过流处理IO 的，那么什么是流？
  流（Stream），是一个抽象的概念，是指一连串的数据（字符或字节），是以先进先出的方式发送信息的通道。 当程序需要读取数据的时候，就会开启一个通向数据源的流，这个数据源可以是文件，内存，或是网络连接。类似的，当程序需要写入数据的时候，就会开启一个通向目的地的流。这时候你就可以想象数据好像在这其中“流”动一样。
</p>
<p class="haojiu">
  一般来说关于流的特性有下面几点： 先进先出：最先写入输出流的数据最先被输入流读取到。 顺序存取：可以一个接一个地往流中写入一串字节，读出时也将按写入顺序读取一串字节，不能随机访问中间的数据。（RandomAccessFile除外）
  只读或只写：每个流只能是输入流或输出流的一种，不能同时具备两个功能，输入流只能进行读操作，对输出流只能进行写操作。在一个数据传输通道中，如果既要写入数据，又要读取数据，则要分别提供两个流。
  01、传输方式划分 就按照你的那副思维导图来说吧。 传输方式有两种，字节和字符，那首先得搞明白字节和字符有什么区别，对吧？ 字节（byte）是计算机中用来表示存储容量的一个计量单位，通常情况下，一个字节有 8 位（bit）。
  字符（char）可以是计算机中使用的字母、数字、和符号，比如说 A 1 $ 这些。 通常来说，一个字母或者一个字符占用一个字节，一个汉字占用两个字节。
</p>
</body>
</html>

超链接伪类和阴影（补充）

  • 主要用a:hover{}，代表鼠标悬停状态
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*去掉链接下划线*/
    a{
      text-decoration: none;
      color: cornflowerblue;
    }
    /*鼠标悬浮的状态，鼠标移到a标签就变色*/
    a:hover{
      color: yellow;
      font-size: 50px;
    }
    /*鼠标按住未释放的状态*/
    a:active{
      color: green;
    }
    /*访问过的链接的状态*/
    /*a:visited{*/
    /*  color: red;*/
    /*}*/
    #price{
      /*阴影颜色 x坐标 y坐标 阴影粗细*/
      text-shadow: #00FFFF 5px 5px 1px;
    }
    img,span{
      vertical-align: middle;
    }
  </style>
</head>
<body>
<a href="https://www.baidu.com" >
  <img src="../8文本样式/resoures/img/72.jpg" alt="">
  <span>wcnm</span>
</a>
<p>
  <a href="https://www.baidu.com" target="_blank">本子：屈辱</a>
</p>
<p>
  <a href="#">作者：马牛逼</a>
</p>
<p id="price">
  <a href="#">价格：$233</a>
</p>


</body>
</html>

练习列表样式

  • list-style: none
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="nav">
  <h1 class="title">全部商品分类</h1>
  <ul >
    <li>
      <a href="#">瓜子</a>&nbsp;&nbsp;<a href="#">瓜子</a>&nbsp;&nbsp;<a href="#">瓜子</a>&nbsp;&nbsp;
    </li>
    <li>
      <a href="#">牛肉</a>&nbsp;&nbsp;<a href="#">牛肉</a>&nbsp;&nbsp;<a href="#">牛肉</a>&nbsp;&nbsp;
    </li>
    <li>
      <a href="#">瓜皮</a>&nbsp;&nbsp;<a href="#">瓜皮</a>&nbsp;&nbsp;<a href="#">瓜皮</a>&nbsp;&nbsp;
    </li>
    <li>
      <a href="#">臭狗</a>&nbsp;&nbsp;<a href="#">臭狗</a>&nbsp;&nbsp;<a href="#">臭狗</a>&nbsp;&nbsp;
    </li>
  </ul>
</div>
</body>
</html>

.nav{
    background: bisque;
    width: 250px;
    height: 300px;
}

.title{
    background: red;
    font-family: 微软雅黑;
    font-size: 25px;
    font-weight: bold;
    height: 60px;
    line-height: 60px;
    text-indent: 2em;
}
ul{
    background: bisque;
}

ul li{
    text-indent: 0em;
    /*去掉列表的黑点表头，黑点可以改很多样式*/
    list-style: none;
    height: 50px;
}
a{
    font-size: 20px;
    color: #000;
    text-decoration: none;
}
a:hover{
    color: brown;
    text-decoration: underline;
}

背景图像

  • background属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 1000px;
      height: 500px;
      /*border: solid 1px red;*/
      border-color: red;
      border-width: 1px;
      border-style: solid;
      /*默认repeat全部*/
      background-image: url("resources/FKR.png");
    }
    .div1{
      /*repeat一行*/
      background-repeat: repeat-x;
    }
    .div2{
      /*repeat一列*/
      background-repeat: repeat-y;
    }
    .div3{
      /*不repeat，只有一个*/
      background-repeat: no-repeat;
    }


  </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      /*background-color: #4158D0;*/
      background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    }
  </style>
</head>
<body>
<!--xkaxla-->

</body>
</html>

盒子模型

image-20241216180151928

  • margin，外边距
  • border，边框
  • padding，内边距
  • 都有上下左右
  • body等标签有默认内外边距，可以自己设置为0

1em=16px

内外边距

  • 三种改变方法image-20241216190941745

    用margin: 0 auto;可以让div标签居中，左右的auto会自动缩进

  • 盒子计算方式：元素到底多大

    image-20241216225231596

    margin+border+padding+内容宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body,h1,h2,ul,li,a{
      padding: 0;
      margin: 0;
    }
    h2{
      font-size: 20px;
      line-height: 30px;
      height: 30px;
      background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    }
    #box{
      border: red 1em solid ;
      width: 300px;
      margin: 0 auto;
      /*默认上右下左*/
      padding: 1px 2px 3px 4px;
      /*下面四句和上面等价*/
      padding-top: 1px;
      padding-right: 2px;
      padding-bottom: 3px;
      padding-left: 4px;
      /*上下1px 左右2px*/
      padding: 1px 2px;
    }
    form{
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
    }
    input{
      margin: 8px;
    }
    div:nth-of-type(1) input{
      border: 4px solid cornflowerblue;
    }
    div:nth-of-type(2) input{
      border: 5px dashed cadetblue;
    }
    div:nth-of-type(3) input{
      border: 6px solid chartreuse;
    }

  </style>
</head>
<body>
<!--所有东西套div标签，结构清晰-->
<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      用户名:<input type="text">
    </div>
    <div>
      密码:<input type="text">
    </div>
    <div>
      邮箱:<input type="text">
    </div>
  </form>
</div>
</body>
</html>

圆角边框和盒子阴影

  • border-radius 圆角边框 越大越远
  • 设置顺序是左上角开始的顺时针
  • box-shadow 传入参数，开始位置x，开始位置y，模糊度，大小，颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .title{
      height: 100px;
      width: 100px;
      border: 1px solid red;
      /*阴影起始点x位置 y位置 模糊度 大小 颜色*/
      box-shadow: 10px 10px 5px yellow;
    }
    img{
        box-shadow: 0 0 100px yellow;
        border: 2px solid black;
        border-radius: 50%;
        /*图片居中要先设成块级元素*/
        display: block;
        margin: 0 auto;
    }
    .divimg{
        height: 100px;
        width: 200px;
        margin: 0 auto;
    }
  </style>
</head>
<body>
<div class="title"></div>
<div class="divimg">
    <img src="resources/FKR.png" alt="">
</div>
<img src="resources/FKR.png" alt="">

</body>
</html>

display

  • display：inline-block
  • 既是块级元素，又能内联写在一行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .father{
      height: 100px;
      width: 208px;
      border: 1px solid red;
      display: inline-block;
    }
    .erzi{
      height: 100px;
      width: 100px;
      border: 1px solid red;
      /*既是块级元素，又能内联，在一行*/
      display: inline-block;
    }
    span{
      height: 100px;
      width: 100px;
      border: 1px solid red;
      display: inline-block;
    }
  </style>
</head>
<body>
<div class="father">
<div class="erzi">我是div块元素</div>
<span>我是span行内元素</span>
</div>
</body>
</html>

浮动

  • float
  • 写了float，相当于有两层，在第二层，有层的概念
  • 左右right，left碰到另一个浮动块会停止
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            border: 1px solid red;
        }
        .father{
        }
        .child1{
            height: 300px;
            width: 300px;
            display: inline-block;
            float: right;
        }
        .child2{
            height: 600px;
            width: 300px;
            display: inline-block;
            float: right;
        }
        .child3{
            height: 300px;
            width: 600px;
            display: inline-block;
            float: left;

        }
        .child4{
            font-size: 10px;
            line-height: 10px;
            display: inline-block;
            float: right;
            clear: both;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="child1">图1 </div>
    <div class="child2">图2 </div>
    <div class="child3">图3 </div>
    <div class="child4"><p>句1句1句11句1</p> </div>
</div>

</body>
</html>

解决父级边框塌陷

  • display和flow都能使标签方便排列
  • display 只能左边竖着或者横着
  • flow更方便，但有父级边框塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            border: 1px solid red;
        }
        .father{
            /*防父级塌陷
            1加大父级高度*/
            /*height: 1500px;*/
            /*防父级塌陷
            3父级元素加overflow,可以包裹浮动元素*/
            /*overflow: hidden;*/
        }
        /*防父级塌陷
        4添加一个伪类,本质是最后面加一个空div*/
        .father:after{
            content: "";
            display: block;
            clear: both;
        }
        .child1{
            height: 200px;
            width: 200px;
            float: right;
            clear: both;
        }
        .child2{
            height: 400px;
            width: 300px;
            float: left;
            /*
            清除浮动对该元素的影响，重启一行
            left:在该元素前不允许有左浮动，否则重启一行
            right:在该元素前不允许有右浮动，否则重启一行
            both:重启一行
            */
            clear: right;
        }
        .child3{
            height: 300px;
            width: 400px;
            float: right;
            clear: left;
        }
        .child4{
            font-size: 10px;
            line-height: 10px;
            float: right;
            clear: both;
        }
        /*防父级塌陷
        2最下面加一个空div，清除浮动both*/
        .float{
            border: 0px;
            margin: 0px;
            padding: 0px;
            clear: both;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="child1">图1 </div>
    <div class="child2">图2 </div>
    <div class="child3">图3 </div>
    <div class="child4"><p>句1句1句11句cscac1</p> </div>

<!--    <div class="float"></div>-->
</div>

</body>
</html>

相对定位

  • position: relative;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      padding: 20px;
    }
    div{
      padding: 10px;
      margin: 10px;
    }
    .father{
      border: 1px solid red;
      padding: 0 ;
    }
    .box1{
      border: 2px dashed brown;
      /*相对定位,top=-20就是直接往top走20,left=+20就是忘left反方向走20,20代表距离*/
      position: relative;
      top: -20px;
      /*距离左边20 就是向右20*/
      left: 20px;
    }
    .box2{
      border: 2px dashed #0ddccb;
    }
    .box3{
      /*相对定位,上下左右*/
      border: 2px dashed #b7bd06;
      position: relative;
      /*只是改变位置,不是浮动,不会让父级塌陷*/
      bottom: -20px;
      right: 20px;
    }
  </style>
</head>
<body>
<div class="father">
  <div class="box1">这是第一个盒子</div>
  <div class="box2">这是第二个盒子</div>
  <div class="box3">这是第三个盒子</div>
</div>
</body>
</html>

练习

image-20241218154152120

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      margin: 0;
      padding: 0;
    }
    .father{
         height: 300px;
         width: 300px;
         border: 1px solid red;
         padding: 10px;
     }
    a{
      text-decoration: none;
      color: white;
      line-height: 100px;
        height: 100px;
        width: 100px;
        display: block;
        text-align: center;
        background: #C850C0;
    }
    a:hover{
         background: #0093E9;
    }
    #a2,#a4{
      position: relative;
      top: -100px;
      right: -200px;
    }
    #a5{
      position: relative;
      top: -300px;
      right: -100px;
    }

  </style>
</head>
<body>
<div class="father">
<div class="a" id="a1"><a href="#">链接1</a></div>
<div class="a" id="a2"><a href="#">链接2</a></div>
<div class="a" id="a3"><a href="#">链接3</a></div>
<div class="a" id="a4"><a href="#">链接4</a></div>
<div class="a" id="a5"><a href="#">链接5</a></div>
</div>
</body>
</html>

绝对定位和固定定位

  • 父级position: relative;

    定位标签position: absolute;

    再设置离父级的上下左右距离，没父级就和把浏览器页面当父级

  • 固定定位 position: fixed;

    再设置离边框的上下左右距离

    image-20241218165651986

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      /*和子元素 position: absolute联动*/
      position: relative;
      height: 10000px;
    }
    div{
      text-align: center;
      line-height: 100px;
      font-size: 10px;
    }
    div:nth-of-type(1){
      /*绝对定位,
      如果父级元素没用position: relative;
      就相对于浏览器定位*/
      position: absolute;
      /*离定位点边框的距离*/
      right: 0;
      bottom: 0;
      height: 100px;
      width: 100px;
      background: #C850C0;
    }
    div:nth-of-type(2){
      /*固定定位*/
      position: fixed;
      right: 0;
      bottom: 0;
      height: 50px;
      width: 50px;
      line-height: 50px;
      background: #0093E9;
    }

  </style>
</head>
<body>
<div>绝对定位</div>
<div>固定定位</div>
</body>
</html>

z-index

  • 图层层级概念，有浮动布局才有这个概念
  • z-index默认1，2，3，4，5，6到无限，越大越在上面
  • z-index只在设置了position才生效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
    <ul>
        <li class="tp"><img src="resources/img/js.jpg" alt=""></li>
        <li class="bj"></li>
        <li class="title-tip">学习js,找kuang-shen</li>
        <li>日期:2024.12.18</li>
        <li>地点:天宫一号</li>
    </ul>
</div>
</body>
</html>

div,ul,li{
    margin: 0;
    padding: 0;
}
.content{
    width: 300px;
    border: 2px solid black;
    overflow: hidden;
    font-size: 16px;
    font-family: 楷体,Arial;
    line-height: 32px;
}
ul,li{
    list-style: none;
}
.bj{
    background: #000000;
    opacity: 50%;
    filter: alpha(opacity=50);

}
ul{
    position: relative;
}
.bj,.title-tip{
    width: 300px;
    height: 30px;
    position: absolute;
    top:157px;
}
.title-tip{
    color: white;
    z-index: 999;
}
.tp{
    /* z-index只在设置了position才生效*/
    /*position: relative;*/
    z-index: 999;
}

优站

image-20241219104100765

posted @ 2025-04-22 22:08  学习java的白菜  阅读(14)  评论(0)    收藏  举报