CSS3

最新推荐文章于 2024-11-01 12:26:05 发布
最新推荐文章于 2024-11-01 12:26:05 发布
阅读量310 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XXMRXXX/article/details/108411807
版权

文章目录

01 CSS的简单介绍

1.css是什么？
2.css怎么用？
3.css选择器(重点+难点)
4.美化网页(文字，阴影，超链接，列表，渐变)
5.盒子模型
6.浮动
7.定位
8.网页东西(特效)

1.1 什么是css

Cascading Style Sheet层叠级联样式表
CSS：表现层(美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…
在这里插入图片描述

1.2 发展史

css 1.0 基础
css 2.0 DIV (块)+ CSS，HTML跟CSS结构分离的思想，网页变得简单，SEO
css 2.1 浮动，定位
css 3.0 圆角边框，阴影，动画，浏览器兼容性

1.3 快速入门

练习格式
在这里插入图片描述

style
建议规范
在这里插入图片描述
css优势
1.内容和表现分离
2.页面结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于html的css文件
5.利用SEO，容易被搜索引擎收录
拓展
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

1.4 css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

	<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级： 就近原则(谁离标题这行代码最近就是谁)
    一般是行内样式大于{内部样式，外部样式}
-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<!--<h1 style="color: red">我是标题</h1>-->
<h1>我是标题</h1>

</body>
</html>

拓展：外部样式两种写法
·链接式
html

	<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

·导入式
css2.1特有的

    <!--导入式-->
    <style>
        @import url("style.css");
    </style>

02 选择器

作用：选择页面上的某一个或者某一类元素

2.1 基本选择器

1.标签选择器
选择一类标签
格式：
标签{}

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

    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: red;
            background: #3cbda6;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }

    </style>
</head>
<body>

<h1>学Java</h1>
<p>听狂神说</p>

</body>
</html>

2.类 选择器
选择所有class属性一致的标签，跨标签
格式：
.类名{}

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

    <style>
        /*类选择器格式   .class的名称{}
            好处：可以多个标签归类，是同一个class，可以复用
        */
        .dy{
            color: red;
        }

        .ff{
            color: purple;
        }
    </style>
</head>
<body>
<h1 class="dy">标题1</h1>
<h1 class="ff">标题2</h1>
<h1 class="dy">标题3</h1>

<p class="dy">段落</p>

</body>
</html>

3.id 选择器
格式
#id名称{}

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

    <style>
        /*id选择器的格式
            #id名称{}
            注意：
                id必须保证全局唯一，不可复用
            优先级不遵循就近原则：
                id选择器 > class选择器 > 标签选择器
        */
        #dy{
            color: red;
        }

        .style1{
            color: #80ff42;
        }

        h1{
            color: purple;
        }
    </style>

</head>
<body>

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

</body>
</html>

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

2.2 层次选择器

1.后代选择器：祖爷爷 爷爷 爸爸 你
在某个元素后面

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

2.子选择器：一代，不可隔代

        /*子选择器*/
        /*仅可作用于p1p2p3*/
        body>p {
            background: green;
        }

3.相邻兄弟选择器：同代

        /*相邻兄弟选择器
            对下不对上，只作用一个
        */
        .active + p{
            background: #80ff42;
        }

4.通用选择器

        /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素，此处为p2p3*/
        .active~p{
            background: purple;
        }

代码

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

    <style>
        /*p{*/
        /*    background: green;*/
        /*}*/

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

        /*子选择器*/
        /*仅可作用于p1p2p3*/
        /*body>p {*/
        /*    background: green;*/
        /*}*/

        /*相邻兄弟选择器
            对下不对上，只作用一个
        */
        /*.active+p{*/
        /*    background: #80ff42;*/
        /*}*/

        /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素，此处为p2p3*/
        .active~p{
            background: purple;
        }
    </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>

</body>
</html>

在这里插入图片描述

2.3 结构伪类选择器

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

    <!--避免使用class跟id选择器-->
    <style>
        /*选中ul的第一个子元素*/
        ul li:first-child{
            background: #80ff42;
        }

        /*选中ul的最后一个子元素*/
        ul li:last-child {
            background: purple;
        }

        /*选中第一个p元素p1：定位到父元素，选择当前的第一个元素
           选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效。
           nth-child(n):n表示当前元素的父级元素下的第i个元素，如果该元素跟冒号前的标签类别不一致，则不会改变，
           即当在p1前面添加h1时p:nth-child(1) {}的操作无效
           (按顺序选择)
        */
        p:nth-child(1) {
            background: green;
        }

        p:nth-child(2) {
            background: green;
        }

        /*选择父级元素下的第二个类型为p的元素(按类型选择)*/
        p:nth-of-type(2) {
            background: blue;
        }

        /*动作：当鼠标移动到该类标签时会发生变化*/
        a:hover{
            background: red;
        }

    </style>
</head>
<body>

    <a href="">a</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>

在这里插入图片描述

2.4 属性选择器

id跟class的结合

<!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: blue;  /*背景色*/
            text-align: center;  /*文字对齐方式：居中*/
            color: red; /*文字颜色*/
            text-decoration: none; /*去掉文字下划线*/
            margin-right: 10px; /*外边距*/
            font: bold 20px/50px Arial; /*文字粗体 大小/行高 family*/

        }

        /*存在id属性的元素a[]{}
            []内：1.属性名
                  2.属性名=属性值(值可以用正则匹配)
                  注意：=表示绝对等于
                        *=表示包含
                        ^=表示以某个元素开头
                        $=表示以某个元素结尾
        */
        /*a[id] { !*a标签里带有id属性的*!*/
        /*    background: brown;*/
        /*}*/

        /*id=first的元素*/
        /*a[id=first] {*/
        /*    background: yellow;*/
        /*}*/

        /*class中有links的元素*/
        /*a[class*="links"]{*/
        /*    background: purple;*/
        /*}*/

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

        /*选中class中以item结尾的元素*/
        a[class$=item]{
            background: purple;
        }

    </style>
</head>
<body>

<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item active">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 last">10</a>
</p>

</body>
</html>

在这里插入图片描述
总结：
= 绝对等于
*= 包含
^= 以…开头
$= 以…结尾

03 美化网页元素

3.1 为什么要美化？

1.有效的传递页面信息
2.美化网页
3.凸显页面主题
4.提高用户的体验

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

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

    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>

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

</body>
</html>

3.2 字体样式

    <!--
    font-family  字体样式
    font-size  字体大小
    font-weight 字体粗细 属性值为bold等效于<strong>住</strong>标签
    color  字体颜色
    -->
    <style>
        body{
            font-family: "Arial Black", 宋体;
            color: red;
        }

        h1{
            /*font-size: 50px;*/
            font-size: 5em;
        }

        .p1{
            font-weight: bold;
        }

    </style>

3.3 文本样式

1.颜色
color
rgb
rgba
2.对齐方式
text-align = center
3.缩进
text-indent: 2em;
4.行高
line-height
注意：单行文字上下居中
line-height = height
5.下划线
text-decoration: underline

        .a1{
            text-decoration: underline;  /*下划线*/
        }

        .a2{
            text-decoration: line-through; /*中划线*/
        }

        .a3 {
            text-decoration: overline; /*上划线*/
        }

6.文本图片相互参照对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        水平对齐~参照物 a， b

    -->
    <style>
        img, span{
            vertical-align: middle;  /*img和span标签相互参照居中对齐*/
        }
    </style>
</head>
<body>

<p>
    <img src="images/T-mac.jpg" alt="" width="200px" height="150px">
    <span>特雷西·麦克格雷迪</span>
</p>

</body>
</html>

代码：

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

    <!--颜色：
            单词
                RGB 0~F
                RGBA 最后一维为透明度
        text-align:文字对齐方式
        text-indent: 2em;  段落首行缩进2个em
        height: 200px; 块高度
        line-height: 行高
            注意：行高和块高度一致可实现上下居中
    -->
    <style>
        h1{
            /*color: #ff8486;*/
            color: rgb(0, 255, 255);
            /*color: rgba(0, 255, 255, 0.5);*/ /*透明度0.5*/
            text-align: center;  /*居中*/
            /*text-align: right;  !*右对齐*!*/
            /*text-align: left;  !*左对齐*!*/

        }

        .p1 {
            text-indent: 2em;  /*首行缩进2个em*/
        }

        .p3 {
            background: #80ff42;
            height: 200px;
            line-height: 200px;
        }

        .a1{
            text-decoration: underline;  /*下划线*/
        }

        .a2{
            text-decoration: line-through; /*中划线*/
        }

        .a3 {
            text-decoration: overline; /*上划线*/
        }

        a{
            text-decoration: none;  /*超链接去下划线*/
        }

        img, span{
            vertical-align: middle;  /*img和span标签相互参照居中对齐*/
        }

    </style>
</head>
<body>


    <p>
        <img src="images/T-mac.jpg" alt="" width="200px" height="150px">
        <span>特雷西·麦克格雷迪</span>
    </p>

    <a href="">123</a>

    <p class="a1">12138</p>
    <p class="a2">12138</p>
    <p class="a3">12138</p>



    <h1>故事介绍</h1>
    <p class="p1">
        “很久很久以前流传着一个古老传说，这世上存在着七颗名为龙珠的圆球散落各处，只要集齐七颗龙珠并念出咒文，便可召唤出神龙，无论任何愿望都可替许愿人达成”。
    </p>

    <p>
        住在深山中的孙悟空本领高强，一次偶然的机会他随天才科学家·布尔玛一起走出大山，开始致力于寻找分散在世界各地的七颗龙珠。在这期间，还结识了好色的龟仙人与乌龙、一看到女人就面红耳赤的雅木茶以及自大的和尚小林等伙伴，不但经历了各种各样的冒险和奇遇，也惹出一连串爆笑的故事。当然，也有许多邪恶的家伙们为了满足私欲而寻找龙珠，为此与悟空等人展开了一连番的激斗。为了实现愿望、突破自我、变得更强，围绕着悟空及他的伙伴们，在大世界的浪漫冒险就这样开始了 ！
    </p>

    <p class="p3">
        Early in the day it was whispered that we should sail in a boat, only thou and I, and never a soul in the world would know of this our pilgrimage to no country and to no end.
    </p>

</body>
</html>

3.4 阴影

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

3.5 超链接伪类

正常情况下，a，a:hover

<style>
        /*默认颜色*/
        a{
            text-decoration: none;
            color: black;
        }

        /*鼠标悬停状态,这个是重点*/
        a:hover{
            color: blue;
            font-size: 50px;
        }

        /*鼠标点击未释放状态*/
        a:active {
            color: red;
        }

        /*鼠标点击后状态*/
        /*a:visited{*/
        /*    color: darkred;*/
        /*}*/

        /*text-shadow：阴影颜色 水平偏移  垂直偏移 阴影半径*/
        #price{
            text-shadow: #48b6ff 10px 10px 2px;
        }
    </style>

3.6 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" 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>

</div>
</ul>
</body>
</html>


#nav{
    width: 261px;
    background: grey;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
    text-align: left;
}

/*ul  li*/
/*
列标前的小图标：
list-style：
    none  没有东西
    circle 空心圆
    decimal 数字
    square 实心正方形
    disc (默认)小黑点

*/
/*ul{*/
/*    background: grey;*/
/*}*/

ul li{
    height: 30px;
    /*list-style: disc; !*去掉圆点*!*/
    list-style: none; /*去掉圆点*/
    text-indent: 1em;
    /*background: grey;*/
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover{
    color: orange;
    text-decoration: underline;
}

在这里插入图片描述

3.7 背景

背景颜色
背景图片

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/dogHead.jpg"); /*默认是全部平铺的*/
        }

        .div1{
            background-repeat: repeat-x;
        }

        .div2{
            background-repeat: repeat-y;
        }

        .div3{
            background-repeat: no-repeat;
        }
    </style>

练习
在这里插入图片描述

3.8 渐变

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

    <!--径向渐变，圆形渐变-->
    <style>
        body{
            background-color: #4158D0;
            background-image: linear-gradient(243deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        }
    </style>
</head>
<body>

</body>
</html>

04 盒子模型

4.1 什么是盒子模型

在这里插入图片描述

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

4.2 边框

1.边框的粗细
2.边框的样式
3.边框的颜色

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


    <!--外边距的妙用：居中元素-->
    <style>
        /*
            h1, ul, li, a, body 总有一个默认的外边距，因此需要初始化设置
        */
        /*h1, ul, li, a, body {*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    text-decoration: none;*/
        /*}*/
        body{
            margin: 0;
        }

        #box{
            width: 300px;
            border: 1px solid red; /*border参数列表: 粗细 样式 颜色*/
            margin: 0 auto;

        }

        /*
            margin:0 一个参数表示上
            margin:0 1px 两个参数表示上下和左右
            margin:0 0 0 0 四个参数表示上左下右
        */

        h2{
            font-size: 16px;
            background: #48b6ff;
            line-height: 30px;
            height: 30px;
            margin: 0;
            color: white;
        }

        form{
            background: green;
        }

        /*input{*/
        /*    border: 1px solid black;*/
        /*}*/


        /*结构伪类选择器*/
        div:nth-of-type(1) input{
            border: 3px solid black;
        }

        div:nth-of-type(2) input{
            border: 3px dashed #0910ff;
        }

        div:nth-of-type(3) input{
            border: 2px dashed #3a8027;
        }

        /*
            内边距padding参数等效于外边距margin
        */
        div:nth-of-type(1){
           padding: 10px 2px;
        }

    </style>
</head>
<body>


<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>

        <div>
            <span>密码：</span>
            <input type="text">
        </div>

        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

在这里插入图片描述

4.3 内外边距

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

    <!--外边距可以用来居中-->
    <style>
        /*
            body总有一个默认的外边距
        */
        body{
            margin: 0;
        }
        /*
            border: 粗细 样式 颜色
        */
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        h2{
            font-size: 16px;
            background: #48b6ff;
            line-height: 30px;
            margin: 0;
            color: white;

        }

        form{
            background: green;
        }

        div:nth-of-type(1) input{
            border: 3px solid black;
        }

        div:nth-of-type(2) input{
            border: 3px dashed #0910ff;
        }

        div:nth-of-type(2) input{
            border: 2px dashed #3a8027;
        }

    </style>
</head>
<body>


<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名</span>
            <input type="text">
        </div>

        <div>
            <span>密码</span>
            <input type="text">
        </div>

        <div>
            <span>邮箱</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

在这里插入图片描述
盒子的计算方式：margin+border+padding+内容宽度

4.4 圆角边框

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

    <!--左上 右上 右下 左下 顺时针方向-->
    <!--
        圆圈：圆角超过根二下宽度的一半时即为一个圆
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*border-radius: 50px 20px 10px 5px;*/
            border-radius: 100px;   /*这时候变成一个圆*/

        }
    </style>
</head>
<body>

<div>

</div>
</body>
</html>

画半圆和改方形图片为圆形

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

    <style>
        div{
            width: 100px;
            height: 50px;
            margin: 30px;
            border-radius: 50px 50px 0px 0px;
            background: red;
        }

        img{
            border-radius: 50px;
        }
    </style>
</head>
<body>

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

</body>
</html>

4.5 阴影

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

    <style>
        /*div{*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    border: 10px solid red;*/
        /*    box-shadow: 80px 80px 1px yellow;*/
        /*}*/

        /*margin: 0 auto 居中要求
            块元素，并且有固定宽度
        */
        img{
            border-radius: 50px;
            box-shadow: 15px 15px 100px yellow;
        }
    </style>
</head>
<body>

<div style="width: 500px; height: 1000px;display: block;text-align: center " >
        <img src="../3.圆角边框/images/dogHead.jpg" alt="">
</div>


</body>
</html>

05 浮动

5.1 标准文档流

在这里插入图片描述
块级元素：独占一行
h1~h6 p div 列表…
行内元素：不独占一行
span a img strong…
行内元素可以被包含在块级元素中，反之不可

案例：
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="head-contain">
                <a href="" class="top-logo"><img src="images/dogHead.jpg" height="90" width="145" alt=""></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>

style.css

* {
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
}
.nav-header{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,.6);
}

.head-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{
    width: 93px;
    height: 38px;
    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;
}

页面效果图

在这里插入图片描述

5.2 display

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

    <style>
        /*
            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>

1.这个也是一种实现行内元素排列的方式，但是我们很多情况都使用float

5.3 float

1.左右浮动 float

div{
    margin: 10px;
    padding: 5px;
}

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

.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: right;
    clear: both
}

.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: right;
    clear: both
}

.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
    clear: both
}
/*
    clear: right; 右侧不允许有浮动元素
    clear: left; 左侧不允许有浮动元素
    clear: both; 两侧不允许有浮动元素
    clear: none;
*/
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    li-height: 23px;
    display: inline-block;
    float: right;
    clear: right;
    clear: both; /*清除浮动后，layer04的元素排在下面而不是浮动成一排在最左边，保持块元素特性*/
}

float：浮动的时候改变页面大小会出现布局改变的情况，叫做塌陷

5.4 父级边框塌陷

/*
    clear: right; 右侧不允许有浮动元素
    clear: left; 左侧不允许有浮动元素
    clear: both; 两侧不允许有浮动元素
    clear: none;
*/
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    li-height: 23px;
    display: inline-block;
    float: right;
    clear: both;
}

问题：元素浮动后跑出父级边框
解决
1.增加父级边框高度

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

2.增加一个空的div标签，对其清除浮动

<body>

<div id="father">
    <div class="layer01"><img src="images/dogHead.jpg" alt=""></div>
    <div class="layer02"><img src="images/girl.jpg" alt=""></div>
    <div class="layer03"><img src="images/T-mac.jpg" alt=""></div>
    <div class="layer04">浮动的盒子可以向左浮动，也可以享有浮动，直到它的外边缘碰到框或另一个浮动盒子为止
    </div>
    <!--增加一个空的div-->
    <div class="clear"></div>
</div>
    

</body>

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

在这里插入图片描述
3.overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 200px;
            height: 150px;
            overflow: scroll;/*滚动条解决溢出*/
        }
    </style>
</head>
<body>
<div id="content">
    <img src="images/dogHead.jpg" alt="">
    <p>
        发江安河快乐十分举案说法快捷键撒花返回即可合法科技师范哈
    </p>
</div>
</body>
</html>

在这里插入图片描述
可以通过给父级边框增加overflow使得图片不会超出文本框

#father{
    border: 1px #000 solid;
    /*height: 800px;*/
    overflow: hidden;
}

4.父类添加一个伪类：after

/*等效于用编程的方式实现增加一个空的div*/
/*认可度最高的解决方案*/
#father:after{/*添加伪类*/
    content: ''; /*加一个空文本*/
    display: block; /*使得空文本变成块状元素*/
    clear: both;
}

小结：
1.浮动元素后面增加空的div
优点：简单
缺点：代码中尽量避免空div
2.设置父元素高度
优点：简单
缺点：元素高度不可控制
3.overflow
优点：适合下拉的一些场景
缺点：不需要滚动条的话就很诡异
4.在父类添加伪类：after 推荐使用
在不改动原有html代码基础上优化，没有副作用

5.5 对比

display
方向不可控制，不会存在父级边框塌陷
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

06 定位

6.1 相对定位

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--相对定位
                相对于自己原来的位置进行偏移~
            -->

            <style>
                body{
                    padding: 20px;
                }
                div{
                    margin: 10px;
                    padding: 5px;
                    font-size: 12px;
                    line-height: 25px;

                }
                #father{
                    border: 1px solid #666;
                    padding: 0;
                }
                #first{
                    border: 1px solid #662222;
                    background: #ffed7d;
                    position: relative;  /*相对定位：上下左右*/
                    top: -20px; /*top相对原来往上偏移*/
                    left: 20px;
                }
                #second{
                    border: 1px solid #36662a;
                    background: #ff3cec;
                }
                #third{
                    border: 1px solid #312366;
                    background: #40ffe9;
                    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></title>
</head>
<body>

</body>
</html>

相对定位：相对于原来的位置进行指定的偏移，相对定位仍然在标准文档流中，原来的位置会被保留。

6.2 绝对定位

定位：基于xxx定位

1.没有父级元素定位的前提下，相对于浏览器定位
2.父级元素存在定位时会相对于父级元素定位
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

<!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 #666;
            padding: 0;
            position: relative; /*给出父级元素的定位*/
        }
        #first{
            border: 1px solid #662222;
            background: #ffed7d;
        }
        #second{
            border: 1px solid #36662a;
            background: #ff3cec;
            position: absolute;/*绝对定位*/
            right: 30px;
        }
        #third{
            border: 1px solid #312366;
            background: #40ffe9;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>

</body>
</html>

6.3 固定定位fixed

<!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: 0;
            bottom: 0;
        }

        div:nth-of-type(2){ /*固定定位fixed：此处为相对于浏览器*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 z-index

在这里插入图片描述

<!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/dogHead.jpg" alt=""></li>
        <li class="tipText">学习微服务</li>
        <li class="tipBg"></li>
        <li>时间：2099-12-31</li>
        <li>地点：火星</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 103px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000000 solid;
}

ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;

}
/*父级元素相对定位*/
#content ul{
    position: relative;
}

.tipText, .tipBg{
    font-family: bold;
    position: absolute;
    height: 25px;
    width: 103px;
    top: -50px;

}

.tipText{
    color: #40ffe9;
    z-index: 999;
}

.tipBg{
    background: black;
    opacity: 0.5;  /*背景透明度*/
    filter: alpha(opacity=50);
}

z-index最低是0，最高无限

07 动画

源码之家

08 总结

在这里插入图片描述

GrandNovice
关注
专栏目录
threejs CSS3DObject、CSS3DSprite实现文字以及他们的区别
九段刀客的博客
08-15 6019
threejs 使用CSS3DObject
CSS 3D效果
weixin_68485297的博客
04-11 7602
一、动画效果 1、Transform属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。 2、animation动画属性 语法： animation：（ animation-name animation–duration animation-timing-functionanimation-delayanimation-iteration-count animat...
CSS3:图片边框
白的夜的博客
08-15 2113
图片也可以作为边框，以下是实例演示。
css3简单音频播放音波动画图
qq_44472790的博客
05-25 2579
波纹上下波动效果 html <div class="box"> <ul > <p></p> <p></p> <p></p> <p></p> </ul> </div> css3样式 <style> .box{ width: 500px.
css3 实现文字渐变
似水流年QC的博客
09-29 1941
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。（Linear Gradients）- 向下/向上/向左/向右/对角方向。（Radial Gradients）- 由它们的中心定义。CSS3 定义了两种类型的渐变。顺便送上一首小诗~~
CSS3新增了哪些新特性？
u012138854的博客
11-07 5086
即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观。动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬。background-size属性常用来调整背景图片的大小，主要用于设定图片本身。通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。当我们设置背景图片时，图片是会以左上角对齐，但是是以。
css3实现指纹特效
weixin_45932157的博客
03-14 4757
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "calisto mt"; } body{
CSS3实现旋转与放大缩小
qq_44323621的博客
01-26 4232
CSS3实现旋转与放大缩小 开发工具与关键技术：Abobe Dreamweaver 动画旋转与放大缩小 作者：李国旭 撰写时间：2019年1月26日 一、 我们来简单认识一下动画，动画是使元素从一种样式逐渐变化为另一种样式效果。 二、 CSS3首先就要定下@keyframes规则，这个@keyframes规则是用于创建动画。在@keyframes中规定某项CSS的样式，就能把你原来的样式慢慢变成新...
css3-文字添加边框
weixin_43889418的博客
05-21 3497
1、text-stroke 向文本添描边。 此属性可用于更改文字的描边宽度和颜色。使用-webkit-前缀支持此属性。 text-stroke是text-stroke-width和text-stroke-color（给文本填充颜色）两个属性的简写。 -webkit-text-stroke: 1px black; //宽度 颜色 ...
【青山css】css3阴影效果属性详解及创意玩法
热门推荐
qq_28252421的博客
02-26 2万+
前言 css阴影效果是我们经常使用的一个css属性，但你有仔细了解过它吗？是不是用的时候直接从蓝湖上复制过来就行了，那你了解它的每个参数吗？用阴影又能实现哪些好看的效果呢？来看一看我收集总结的css阴影知识吧，可能不全面，欢迎补充。 属性介绍 语法 box-shadow: x-shadow y-shadow blur spread color inset; x-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，x-shadow不同情况下的不同表现 box-shadow: x-
css3官方帮助文档中文版
07-18
css3官方帮助文档中文版
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
CSS3实现八方向云台遥控器样式
04-22
在本文中，我们将深入探讨如何使用CSS3来实现一个八方向云台遥控器的样式。云台遥控器是用于控制摄像头或类似设备在八个不同方向上移动的装置，这种功能通常应用于无人机、监控系统等领域。在网页开发中，通过CSS3...
CSS3 教程
01-19
CSS3 教程 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 本教程向您讲解 CSS3 中的新特性。   点击 “尝试一下” 按钮查看在线实例。 CSS3 参考手册 在软件开发网中，我们提供完整的 CSS3 参考手册，...
【前端基础】CSS进阶
qq_41413652的博客
11-01 767
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
第七章利用CSS和多媒体美化页面
2402_83227353的博客
10-29 865
用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
第八章 利用CSS制作导航菜单课后习题
最新发布
2302_80786141的博客
11-01 528
【代码】第八章 利用CSS制作导航菜单课后习题。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2063
【代码】炫酷的登录框!(附源码)
快速掌握CSS3 Grid布局
"10分钟理解CSS3 Grid布局" 在前端开发中，CSS3 Grid布局是一个极其重要的工具，它提供了一种强大的二维布局机制，能够帮助开发者更高效地创建响应式和自适应的网页设计。本篇文章将简明扼要地介绍CSS3 Grid布局的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值