CSS（重点选择器）

2023-11-01

文章目录

CSS 指层叠样式表 (Cascading Style Sheets)，美化页面

CSS入门

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

    <!--规范，<style> 可以编写CSS代码，每一个声明最好使用 ; 结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
            ...
            }
    -->
    <style>
        h1{
            color: crimson;
        }
    </style>
    
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

最好把HTML文件和CSS文件分开

在这里插入图片描述

CSS的优点：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件

CSS的三种导入方式

行内样式: 在标签元素中，编写一个style属性，编写样式
内部样式:在标签内，

优先级：就近原则

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

    <!--2.内部样式:-->
    <style>
        h1{
            color: gold;
        }
    </style>

    <!--3.外部样式:
         链接式:
    -->
    <link rel="stylesheet" href="css/style.css">
    <!--3.外部样式:
         导入式
    -->
    <style>
        @import url("css/style.css");
    </style>
    

</head>
<body>

<!--优先级，就近原则  -->
<!--1.行内样式: 在标签元素中，编写一个style属性，编写样式-->
<h1 style="color: blue">我是标题</h1>

</body>
</html>

/*3.外部样式  使用 <link rel="stylesheet" href="css/style.css"> 引用 
 href: 指的是css文件的路径
*/
h1{
    color: crimson;
}

拓展：外部样式的两种写法

链接式

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

导入式

<style>
        @import url("css/style.css");
</style>

选择器(重点)

基本选择器***

标签选择器

标签选择器：会选择这个页面上所有的这个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

  <style>
    /*标签选择器：会选择这个页面上所有的这个标签*/
    h1{
      color: gold;    /*字体颜色*/
      background: blue;  /*背景颜色*/
      border-radius: 24px;  /*设置四个边角的弧度*/
    }
    p{
      font-size: 80px;
    }
  </style>
</head>
<body>

<h1>Java</h1>
<h1>Python</h1>
<p>hello</p>
</body>
</html>

类选择器

类选择器的格式 .class的名称{}

可以多个标签归类，同一个class，可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>

  <style>
    /*类选择器的格式  .class的名称{}
    优点：可以多个标签归类，同一个class，可以复用
     */
    .sgl{
      color: gold;
    }
    .coco{
      color: crimson;
    }
  </style>
</head>
<body>

<h1 class="sgl">标题1</h1>
<h2 class="coco">标题2</h2>
<h3 class="sgl">标题3</h3>
<p class="sgl">p标签</p>
</body>
</html>

id选择器

id选择器: id必须保证全局唯一！否则就报错 #id的名称{}

优先级:id选择器 > 类选择器 > 标签选择器不遵循就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>

  <style>
    /*id选择器  id必须保证全局唯一！否则就报错
      #id的名称{}
      优先级:
          不遵循就近原则
          id选择器 > 类选择器 > 标签选择器
     */
    #sgl{
      color: crimson;
    }
    .style1{
      color: gold;
    }
    h1{
      color: aqua;
    }
  </style>
</head>
<body>

<h1 class="style1" id="sgl">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

层次选择器

后代选择器

后代：指的是所有后代

body p{
      background: gold;
    }

子选择器

指的是一代

body>p{
      background: antiquewhite;
    }

相邻兄弟选择器

相邻（向下）只有一个

.active + p{
      background: green;
    }

通用选择器

当前选中的元素的向下所有的兄弟元素

.active~p{
      background: lightslategrey;
    }

具体代码：

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

  <style>
    /*p{*/
    /*  background: #a72d2d;*/
    /*}*/

    /*后代选择器*/
    /*body p{*/
    /*  background: gold;*/
    /*}*/

    /*子选择器*/
    /*body>p{*/
    /*  background: antiquewhite;*/
    /*}*/

    /*相邻兄弟选择器  相邻（向下） 只有一个*/
    /*.active + p{*/
    /*  background: green;*/
    /*}*/

    /*通用选择器  当前选中的元素的向下所有的兄弟元素*/
    .active~p{
      background: lightslategrey;
    }
  </style>
</head>
<body>

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

</body>
</html>

结构伪类选择器

伪类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  不适应类和id选择器-->
  <style>
    /*ul的第一个子元素*/
    ul li:first-child{
      background: green;
    }

    /*ul的第最后一个子元素*/
    ul li:last-child{
      background: #3e23a0;
    }

    /*选中p1 ： 定位到父元素，选择当前的第一个元素
    p:nth-child(1) : 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才可以！！！
    */
    p:nth-child(2){  /*有h1标签在前，选择第一个不会生效，因为h1是body标签的第一个子元素了，选择第二个才定位到p1*/
      background: gold;
    }

    /*选中父元素下的p元素的第一个类型*/
    p:nth-of-type(2){  /*type表示类型，当前为p类型，所以选择第一个可以生效，对应的就是p元素的第几个了*/
      background: #8b411f;
    }

    /*了解即可*/
    /*a:hover{*/
    /*  background: #b40d50;*/
    /*}*/

  </style>
</head>
<body>

<!--  <a href="">伪类</a>-->
  <h1>h1</h1>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>

</body>
</html>

效果：

在这里插入图片描述

属性选择器***

id 和 class结合

格式：a[]{}

= 是绝对等于
*= 是包含这个元素
^= 以什么开头的元素
$= 以什么结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

  <style>
      .demo a{  /*后代选择器  .demo定位到p标签 和 p a{} 一样*/
      float: left;   /*float 浮动*/
      display: block; /*成为块元素*/
      height: 50px;  /*高度和宽度*/
      width: 50px;
      border-radius: 10px;  /*四个边角的弧度*/
      background: #3e23a0;
      text-align: center;  /*居中对其*/
      color: lightslategrey;
      text-decoration: none;  /*去掉数字下的下划线*/
      margin-right: 5px;  /*外边距的宽度、*/
      font: bold 20px/50px Arial;   /*blod粗体  20px字体的大小 50字体在哪个位置*/
    }
      /*属性名 或者  属性名 = 属性值（正则）
        = 是绝对等于
        *= 是包含这个元素
        ^= 以什么开头的元素
        $= 以什么结尾
      */
      /*存在id属性的元素       a[]{}  */
      /*a[id]{*/
      /*  color: gold;*/
      /*}*/

      /*id=first*/
      /*a[id=first]{*/
      /*  background: #66a71c;*/
      /*}*/

      /*class 中有links的元素  = 是绝对等于 *= 是包含这个元素*/
      /*a[class*="links"]{*/
      /*  background: #d94019;*/
      /*}*/

      /*选中href中以http开头的元素  ^= 以什么开头的元素*/
      /*a[href^=https]{*/
      /*  background: gold;*/
      /*}*/

      /*选中以pdf结尾的   $= 以什么结尾*/
      /*a[href$=pdf]{*/
      /*  background: #14f580;*/
      /*}*/

  </style>
</head>
<body>

  <p class="demo">
    <!--以下href都是随意写的，为了测试属性选择器-->
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item">10</a>
  </p>
</body>
</html>

在这里插入图片描述

美化网页元素

span标签：重要突出的文字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>

  <style>
    #title1{
      font-size: 50px;  /*字体大小*/
    }
  </style>
</head>
<body>

欢迎学习<span id="title1">CSS</span>

</body>
</html>

字体样式

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

    <!--
       font-family  字体
       color 字体颜色
       font-size  字体大小
       font-weight   字体的粗细
    -->
    <style>
        body{
            font-family:"Arial Black",楷体;   /*字体*/
            color: #8b411f;   /*字体颜色*/
        }
        h1{
            font-size: 50px;  /*字体大小*/
        }
        .p1{
            font-weight: bold;  /*字体的粗细*/
        }

        #p2{
            font: oblique bolder 12px "斜体" ;  /*字体粗细 大小 字体样式*/
        }
    </style>
</head>
<body>

<h1>故事介绍</h1>
<p class="p1">
  小鸡带着小兔走了一会儿就出了森林。小兔说：“谢谢你，我来时在河对岸的山坡下藏了一个苹果，你跟我一起去，我请你吃苹果。”
</p>
<p>
  “哦，太好了，谢谢你！”小河马高兴地说。
</p>

<p>
    In our parents'generation,there are less people who have the eyesight problem
</p>

<p id="p2">
    这时，一只小河马游到岸边，说道：“我送你们过河吧！”“太感谢你了！”小兔、小鸡齐声说
</p>

</body>
</html>

文本样式

颜色 color
文本对齐方式 text-align=center
首行缩进 text-indent:2em
行高 line-height 单行文字上下居中
装饰 text-decoration
文本图片水平对齐方式 vertical-align: middle

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

    <!--
       font-family  字体
       color 字体颜色
       font-size  字体大小
       font-weight   字体的粗细
    -->
    <style>
        h1{
            color: green;
            text-align: center;  /*文本居中center 右right 左left等等*/
        }
        .p1{
            text-indent: 2em;  /*首行缩进*/
        }
        .p3{
            background: gold;
            height: 300px;
            line-height: 300px;  /*行高 和 块高 高度一致就可以居中*/
        }

        .l1{
        text-decoration: underline;  /*下划线*/
        }
        .l2{
            text-decoration: line-through; /*中划线*/
        }
        .l3{
            text-decoration: overline;   /*上划线*/
        }
        a{
            text-decoration: none;  /*超链接去下划线*/
        }
        img,span{
            vertical-align: middle; /*使文字在照片右边的中间*/
        }
    </style>
</head>
<body>

<p class="l1">11111111</p>
<p class="l2">22222222</p>
<p class="l3">33333333</p>
<a href="">44444</a>   /*a标签默认右下划线*/
<h1>故事介绍</h1>
<p class="p1">
  小鸡带着小兔走了一会儿就出了森林。小兔说：“谢谢你，我来时在河对岸的山坡下藏了一个苹果，你跟我一起去，我请你吃苹果。”
</p>
<p>
  “哦，太好了，谢谢你！”小河马高兴地说。
</p>

<p class="p3">
    In our parents'generation,there are less people who have the eyesight problem
</p>

<p id="p2">
    这时，一只小河马游到岸边，说道：“我送你们过河吧！”“太感谢你了！”小兔、小鸡齐声说
</p>

<p>
    <img src="images/2.jpg" alt="">
    <span>123456789</span>
</p>

</body>
</html>

阴影

/*text-shadow：阴影的颜色，水平偏移，垂直偏移，阴影半径*/
    #price{
      text-shadow: #5b35e5 10px -10px 2px;
    }

超链接伪类

a:hover{} 最为常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>

  <style>
    /*默认的颜色*/
    a{
      text-decoration: none;
      color: #000000;
    }
    /*鼠标悬浮的状态*/
    a:hover{
      color: #65c222;
      font-size: 50px;
    }
    /*鼠标按住未释放的状态*/
    a:active{
      color: #f30a0a;
    }
    /*访问完后的颜色*/
    /*a:visited{*/
    /*  color: gold;*/
    /*}*/
    /*text-shadow：阴影的颜色，水平偏移，垂直偏移，阴影半径*/
    #price{
      text-shadow: #5b35e5 10px -10px 2px;
    }
  </style>
</head>
<body>

<a href="#">
  <img src="images/3.png" alt="">
</a>

<p>
  <a href="#">码出高效: Java开发手册</a>
</p>

<a href="">作者:孤尽老师</a>
<p id="price">￥99</p>

</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>

<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
    <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
    <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
    <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
    <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
    <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
    <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>

</ul>
</div>

</body>
</html>

#nav{
    width: 250px;
    background: darkgray;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*  颜色，图片，平铺方式，图片位置*/
    background: #f30a0a url("../images/6.png") no-repeat 210px 10px;
}
/*list-style:
       none:去掉原点（也可以去掉有序列表的数字）
       circle:空心圆
       decimal:数字
       square:正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/j.png");
    background-repeat: no-repeat;
    background-position: 150px 0px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

效果图：

在这里插入图片描述

背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>

  <style>
    div{
      width: 800px;
      height: 500px;
      border: 1px solid red;
      background-image: url("images/2.jpg");  /*默认是全部平铺的 repeat*/
    }
    .div1{
      background-repeat: repeat-x;  
    }
    .div2{
      background-repeat: repeat-y;
    }
    .div3{
      background-repeat: no-repeat;
    }

  </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

渐变

网站（直接复制代码即可测试）: https://www.grabient.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>

  <!--径向家渐变，原型渐变
   网站（直接复制代码即可测试）: https://www.grabient.com/
  -->
  <style>
    body{
      background-color: #4158D0;
      background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    }

  </style>
</head>
<body>

</body>
</html>

小测试：

修改百度的背景颜色选中百度的body标签，添加渐变代码即可

在这里插入图片描述

盒子模型

在这里插入图片描述

margin:外边距
border:边框
padding:内边距

边框border

border:粗细,样式(边框线的样式), 颜色;

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

    <style>
        /*body总有一个默认的外边框margin:0*/
        /*h1,ul,li,a,body{*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    text-decoration: none;*/
        /*}*/
        /*border:粗细，样式（边框线的样式） 颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background: #FFCC70;
            line-height: 30px;
            margin-top: 0px;
        }
        form{
            background: #65c222;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed midnightblue;
        }
        div:nth-of-type(3) input{
            border: 2px dashed #d70c3b;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
        <span>用户名:</span>
        <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="email">
        </div>
    </form>
</div>

</body>
</html>

内外边距

内外边距原理一样

margin:4px;　　　　　　　　　　上下左右分别具有4像素

margin:2px 4px;　　　　　　　　上下为二像素，左右为4像素

margin:10px 20px 30px　　　　上：10px 左、右：20px 下：30px

margin:1px 2px 3px 4px　　　　上：1px 右：2px 下:3px 左：4px

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

  <style>
    /*body总有一个默认的外边框margin:0*/
    /*h1,ul,li,a,body{*/
    /*    margin: 0;*/
    /*    padding: 0;*/
    /*    text-decoration: none;*/
    /*}*/
    /*border:粗细，样式（边框线的样式） 颜色*/

    /*外边距的用处: 居中元素
    margin:0 auto
    auto:表示居中对齐
    
    */
    #box{
      width: 300px;
      border: 1px solid red;
      margin: 0 auto;
    }
    h2{
      font-size: 16px;
      background: #FFCC70;
      line-height: 30px;
      margin-top: 10px;
    }
    form{
      background: #65c222;
    }
    input{
      border: 1px solid red;
    }
    div:nth-of-type(1){
      padding: 0px 2px;
    }
  </style>
</head>
<body>

<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>用户名:</span>
      <input type="text">
    </div>
    <div>
      <span>密码:</span>
      <input type="password">
    </div>
    <div>
      <span>邮箱:</span>
      <input type="email">
    </div>
  </form>
</div>

</body>
</html>

圆角边框

4个角

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

  <style>
    /*左上  右上 右下 左下  顺时针方向
      圆圈： 圆角 = 半径
    */  
    div{
      width: 100px;
      height: 100px;
      border: 5px solid red;
      border-radius: 100px;
    }
  </style>
</head>
<body>

<div></div>

</body>
</html>

阴影

box-shadow: 10px 10px 100px 100px yellow;

box-shadow属性接收一个由5个参数组成的值，每个值的意思如下：

h-shadow: 水平阴影的位置。

v-shadow:垂直阴影的位置。

blur：模糊距离

spread：阴影的尺寸

color：阴影的颜色

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

    <style>
        div{
            text-align: center;   /*居中*/
        }
        img{
            width: 100px;
            height: 100px;
            border: 1px solid yellow;
            border-radius: 90px;
            box-shadow: 10px 10px 100px 100px yellow;
        }
    </style>
</head>
<body>

<div>
    <img src="images/2.jpg" alt="">
</div>


</body>
</html>

浮动

块级元素：独占一行

h1~h6  p  div  列表...

行内元素：不独占一行

span  a  img  strong  em  ...

行内元素可以被包含在块级元素中，反之，不可以！！

display

display:
block: 块元素
inline:行内元素
inline-block：是块元素但是可以内联，在一行
none: 消失

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

  <style>
    /*display:
      block: 块元素
      inline:行内元素
      inline-block：是块元素  但是可以内联，在一行
      none: 消失
      */
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
  </style>
</head>
<body>

<div>div标签</div>
<span>span标签</span>

</body>
</html>

float

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

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

<div id="father">
  <div class="layer01"><img src="images/2.jpg" alt=""></div>
  <div class="layer02"><img src="images/66.jpeg" alt=""></div>
  <div class="layer03"><img src="images/661.jpeg" alt=""></div>
  <div class="layer04">
    浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子为止
  </div>
</div>

</body>
</html>

1、左右浮动

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;
}

效果显示：上面出现黑色的父级边框问题，在父级边框塌陷的问题中解决

在这里插入图片描述

解决后的效果：下面父级边框塌陷问题有具体代码添加问题

在这里插入图片描述

父级边框塌陷的问题

clear

clear: both;  两侧不允许浮动
clear: right;  右侧不允许浮动
clear: left;   左侧不允许浮动
clear: none;

解决方案：

增加父级元素的高度

#father{
    border: 1px #000 solid;
    height: 300px;
}

增加一个空的div标签，清除浮动（需要把父级元素的 height: 300px; 去掉）

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

在父级元素添加

overflow: hidden; 隐藏（常用）

overflow: scroll; 出现滚动条（一般不用）

#father{
    border: 1px #000 solid;
    overflow: hidden;
}

父类添加一个伪类：after

#father{
    border: 1px #000 solid;
}
#father:after{
    content: '';
    display: block;
    clear: both;
}

在这里插入图片描述

练习：QQ会员顶部登录效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ会员</title>

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

<div class="wrap">
    <!--头部-->
    <header class="nav-header">
        <div class="header-contain">
            <a href="" class="top-logo"><img src="images/66.jpeg" width="100" height="90"></a>
            <nav class="top-nav">
                <ul>
                    <li><a href="">功能特权</a></li>
                    <li><a href="">游戏特权</a></li>
                    <li><a href="">生活特权</a></li>
                    <li><a href="">会员活动</a></li>
                    <li><a href="">成长体系</a></li>
                    <li><a href="">年费专区</a></li>
                    <li><a href="">超级会员</a></li>
                </ul>
            </nav>
            <div class="top-right">
                <a href="">登录</a>
                <a href="">开通超级会员</a>
            </div>
        </div>
    </header>
</div>

</body>
</html>

* {
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
.nav-header{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,0.6);
}
.header-contain{
    width: 1180px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
}
.top-logo,.top-nav,.top-nav li,.top-right{
    height: 90px;
    display: inline-block;
    vertical-align: top;
}
.top-nav{
    margin: 0 48px;
}
.top-nav li{
    line-height: 90px;
    width: 90px;
}
.top-nav li a{
    display: block;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.top-nav li a:hover{
    color: blue;
}
.top-right a{
    display: inline-block;
    font-size: 16px;
    text-align: center;
    margin-top: 25px;
    border-radius: 35px;
}
.top-right a:first-of-type{
    height: 38px;
    width: 93px;
    line-height: 38px;
    color: #fad65c;
    border: 1px #fad65c solid;
}
.top-right a:first-of-type:hover{
    color: #986b0d;
    background: #fad65c;
}
.top-right a:last-of-type{
    width: 140px;
    height: 40px;
    font-weight: 700;
    line-height: 40px;
    background: #fad65c;
    color: #986b0d;
}
.top-right a:last-of-type:hover{
    background: #fddc6c;
}

在这里插入图片描述

定位

相对定位 relative

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留（设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。）

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

position: relative;  /*相对定位  上下左右*/
top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

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

    <style>
        /*相对定位: 相对与自己原来的位置进行偏移*/
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            border: 1px solid #1656c4;
            background: #1656c4;
            position: relative;  /*相对定位  上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            border: 1px solid #3bb873;
            background: #3bb873;
        }
        #third{
            border: 1px solid #d2a82a;
            background: #d2a82a;
            position: relative;  /*相对定位  上下左右*/
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

练习：

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

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

<div id="father">
  <a id="f1" href="">链接1</a>
  <a id="f2" href="">链接2</a>
  <a id="f3" href="">链接3</a>
  <a id="f4" href="">链接4</a>
  <a id="f5" href="">链接5</a>
</div>

</body>
</html>

#father{
    border: 1px solid red;
    width: 300px;
    height: 300px;
    padding: 10px;
}
a{
    width: 100px;
    height: 100px;
    text-decoration: none;
    background: #ffa1f2;
    line-height: 100px;
    text-align: center;
    color: white;
    display: block;
}
a:hover{
    background: #0000FF;
}
#f2{
   position: relative;
   left: 200px;
    bottom: 100px;
}
#f4 {
    position: relative;
    left: 100px;
    bottom: 200px;
}
#f5{
    position: relative;
    left: 200px;
    bottom: 200px;
}

在这里插入图片描述

绝对定位和固定定位

绝对定位（absolute）
1. 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
2. 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
固定定位（fixed）
1. 将元素放置在浏览器窗口的固定位置，拖拽窗口时元素位置不变。

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

  <style>
    body{
      height: 1000px;
    }
    div:nth-of-type(1){ /*绝对定位：相对于浏览器*/
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      right: 0px;
      bottom: 20px;
    }
    div:nth-of-type(2){/*固定定位: 在那个位置不管怎样就是不动*/
      width: 100px;
      height: 100px;
      background: yellow;
      position: fixed;
      right: 0px;
      bottom: 0px;
    }
  </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

z-index

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

**注释：**元素可拥有负的 z-index 属性值。

**注释：**Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

图层 z-index: 默认是0，最高无限制

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

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

<div id="content">
  <ul>
    <li><img src="images/tp.jpg" alt=""></li>
    <li class="tipText">以闪亮之名!!!</li>
    <li class="tipBg"></li>
    <li>时间:2099-05-26</li>
    <li>地点:暂不确定</li>
  </ul>
</div>

</body>
</html>

#content{
    width: 880px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 20px;
    line-height: 25px;
    border: 1px black solid;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 126px;
    height: 25px;
    top: 362px;
}
.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: black;
    opacity: 0.5; /*背景透明度*/
    filter: alpha(opacity=50);  /*最好两个都写上，版本支持可能不一样*/
}

总结

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

html5