23、CSS3

最新推荐文章于 2022-02-19 14:56:32 发布

coder_lcw

最新推荐文章于 2022-02-19 14:56:32 发布

阅读量152

点赞数

分类专栏： # Java前端 JavaWeb

本文链接：https://blog.csdn.net/coder_lcw/article/details/114507993

版权

JavaWeb 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Java前端

4 篇文章 0 订阅

订阅专栏

一、什么是CSS

CSS: Cascading Style Sheet（层叠级联样式表）
CSS：表现，美化网页
- 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

1.1、CSS的发展史

CSS1.0
CSS2.0：DIV(块) + CSS，HTML和CSS结构分离的思想，网页变得简单，SEO
CSS2.1：浮动，定位
CSS3.0：圆角，阴影，动画… 存在浏览器兼容性

1.2、快速入门

1.2.1、style标签

<style></style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范,<style>,可以编写CSS代码
        语法: 每个声明最好使用分号结尾
            选择器{
                声明1;
                声明2;
                声明3;
            }
    -->
    <style>
        h1{
            color: blue;
        }
    </style>
    
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

1.2.2、HTML与CSS分离

<link rel=“stylesheet” href=“css/style.css”>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范,<style>,可以编写CSS代码
        语法: 每个声明最好使用分号结尾
            选择器{
                声明1;
                声明2;
                声明3;
            }
    -->
    <link rel="stylesheet" href="css/style.css">

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

h1{
    color: blue;
}

1.3、CSS的优势

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于THML的CSS文件
利用SEO，容易被搜索引擎收录！

1.4、CSS的4种导入方式

行内样式
内部样式
外部样式
- 链接式：link标签（html）
- 导入式：@import方式（CSS2.1特有）

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

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

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

    <!--导入式外部样式-->
    <style>
        @import url("css/style.css");
    </style>
</head>
<body>

<!--优先级: 就近原则: 行内样式>内部样式=外部样式-->
<!--行内样式: 在标签元素中编写一个style属性,编写样式即可-->
<h1 >我是标题</h1>

</body>
</html>

优先级：就近原则：行内样式>内部样式=外部样式

二、选择器

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

2.1、基本选择器

2.1.1、标签选择器

选择一种标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器,会选择到页面上这个标签的所有元素*/
        h1{
            color: #289dad;
            background: wheat;
            border-radius: 20px;
        }
        p{
            font-size: 40px;
        }
    </style>
</head>
<body>

<h1>学Java</h1>
<p>学前端</p>

</body>
</html>

2.1.2、class(类)选择器(重点)

选择所有class属性一致的标签，跨标签

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

    <style>
        /*类选择器的格式: .class名称{}
            好处: 可以将多个标签归类,同一个class的标签可以复用
         */
        .cwlin{
            color: blue;
        }
        .lcw{
            color: #622079;
        }
    </style>
</head>
<body>

<h1 class="cwlin">标题1</h1>
<h1 class="lcw">标题2</h1>
<h1 class="cwlin">标题3</h1>
<p class="cwlin">p标签</p>

</body>
</html>

2.1.3、id选择器(重点)

全局唯一！

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

    <style>
        /*id选择器的格式: #id名称{}
            要求: id必须保证全局唯一
            优先级: 不遵循就近原则: id选择器>class选择器>标签选择器
         */
        #cwlin{
            color: yellow;
        }
        .lcw{
            color: #15ff00;
        }
        h1{
            color: #0e10ff;
        }
    </style>
</head>
<body>

<h1 id="cwlin" class="lcw">标题1</h1>
<h1 class="lcw">标题2</h1>
<h1 class="lcw">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

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

2.2、层次选择器

后代选择器：在某个元素的后面
子选择器：当前选中元素的下一代元素
相邻兄弟选择器：当前选中元素的向下一个兄弟元素
通用兄弟选择器：当前选中元素的向下所有兄弟元素

2.2.1、标签树状图

2.2.2、代码实现

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

    <style>
        /*后代选择器*/
        body p{
            background: red;
        }
        /*子选择器*/
        body>p{
            background: yellow;
        }
        /*相邻兄弟选择器*/
        .active~p{
            background: blue;
        }
        /*通用兄弟选择器*/
        .active + p{
            background: cyan;
        }
    </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>p7</p>
    <p>p8</p>

</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: #15ff00;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: red;
        }
        /*第一个p元素, 即p1: 定位到父类, 选择当前的第一个元素*/
        /*选中当前元素(p)的父级元素, 然后选中父级元素的第n个(1), 并且是当前元素(p)才生效*/
        p:nth-child(1){
            background: yellow;
        }

        /*选中父元素下的第二个p元素,按类型*/
        p:nth-of-type(2){
            background: #622079;
        }

        /*hover: 鼠标移动到当前区域才显示的属性*/
        a:hover{
            background: blue;
        }

    </style>
</head>
<body>
    <a href="">123321</a>
    <!--<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、属性选择器(重点)

标签和属性结合使用
格式：标签名[属性名=属性值(正则)]{ }
通配符：
- = 绝对等于
- *= 包含 ~=包含,且空格分隔
- ^= 以…开头
- $= 以…结尾

<!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: cyan; /*背景颜色*/
            color: grey; /*文字颜色*/
            text-align: center; /*文字居中*/
            text-decoration: none; /*去掉下划线*/
            line-height: 50px; /*设置行高50px*/
            font: bold 20px Arial; /*设置字体格式  bold: 加粗, 20px/50px: 字号/行高, Arial: 字体*/
            margin-right: 5px; /*每个元素向右偏移5px*/
        }

        /*格式: 标签名[属性名=属性值(正则)]{}
            = 绝对等于
            *= 包含  ~=包含,且空格分隔
            ^= 以...开头
            $= 以...结尾
         */
        /*存在id属性的元素: a[id]{}*/
        a[id]{
            background: green;
        }
        /*选择id为first的元素: a[id=xx]{}*/
        a[id=first]{
            background: blue;
        }
        /*选择class中含有links的元素*/
        a[class*="links"]{
            background: yellow;
        }
        /*选择href中以http开头的元素*/
        a[href^=http]{
            background: pink;
        }
        /*选择href中以pdf结尾的元素*/
        a[href$=pdf]{
            background: red;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="https://blog.csdn.net/coder_lcw/article/details/114372606" class="links item active" target="_blank" title="test">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 last" id="last">10</a>
</p>
</body>
</html>

三、美化网页元素

3.1、为什么要美化网页

有效地传递页面信息
美化网页，吸引用户
凸显页面的主题
提高用户的体验

3.2、约定使用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.3、字体样式

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

    <style>
        body{
            font-family: "Times New Roman",楷体,serif; /*字体*/
            color: chocolate; /*字体颜色*/
        }
        h1{
            font-size: 50px; /*字体大小*/
        }
        .p1{
            font-weight: bold; /*字体粗细*/
        }
        #test{
            font: oblique bold 12px "楷体";
        }
    </style>
</head>
<body>

<h1>内容简介</h1>
<p class="p1">
    故事背景取自秦灭六国到西楚霸王项羽灭秦这段英雄辈出的历史时期，时间跨度约30年，是一部以武侠为主题的全民型动画。各种历史事件和民间传说纷呈迭起，仗剑游走江湖的名士侠隐和对现代中国产生深远影响的诸子百家更是在这个合纵连横的大时代中悉数登场。
</p>
<p id="test">
    百家争鸣的中华古文化在此激烈冲突碰撞，大时代恢宏磅礴的战争场面在连天烽火中震撼重现，江湖儿女的侠骨柔情于动荡乱世间绽放光华……少年天明如杂草般顽强生存于时代变革的乱世之中，面对强暴的政权、险恶的敌人，勇敢地与侠士们进行反抗，经历了一段不俗的遭遇。
</p>
<p>
    The chess-board is the world: the pieces are the phenomena of the universe; the rules of the game are what we call the laws of nature. The player on the other side is hidden from us. We know that his play is always fair, just and patient. But also we know, to our cost, that he never overlooks a mistake, or makes the smallest allowance for ignorance.
</p>
</body>
</html>

3.4、文本样式

颜色：color: rgba(0,255,255,0.75); /*rgb()*/
对齐方式：text-align: center;
首行缩进：text-indent: 2em;
设置行高实现垂直居中：line-height: 50px;
装饰：
- 下划线：text-decoration: underline;
- 中划线：text-decoration: line-through;
- 上划线：text-decoration: overline;
去掉<a>标签自带的默认下划线：text-decoration: none;
文本图片垂直对齐：img,span{ vertical-align: middle; }
文本阴影：text-shadow: skyblue 5px -5px 3px;（详见下一节代码）

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

    <style>
        h1{
            color: rgba(0,255,255,0.75); /*最后一个参数为透明度: 0~1*/
            text-align: center; /*排版: 居中*/
        }
        .p1{
            text-indent: 2em; /*首行缩进: 两个字符*/
        }
        .p3{
            background: purple; /*背景颜色*/
            height: 100px; /*块的高度*/
            line-height: 50px; /*调节行高以实现文本的上下居中*/
        }

        .l1{
            text-decoration: underline; /*下划线*/
        }
        .l2{
            text-decoration: line-through; /*中划线*/
        }
        .l3{
            text-decoration: overline; /*上划线*/
        }
        a{
            text-decoration: none; /*去掉下划线*/
        }

        img,span{
            vertical-align: middle; /*去掉<a>标签自带的默认下划线*/
        }
    </style>
</head>
<body>

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

<p class="l1">123321</p>
<p class="l2">123321</p>
<p class="l3">123321</p>

<h1>内容简介</h1>
<p class="p1">
    故事背景取自秦灭六国到西楚霸王项羽灭秦这段英雄辈出的历史时期，时间跨度约30年，是一部以武侠为主题的全民型动画。各种历史事件和民间传说纷呈迭起，仗剑游走江湖的名士侠隐和对现代中国产生深远影响的诸子百家更是在这个合纵连横的大时代中悉数登场。
</p>
<p id="test">
    百家争鸣的中华古文化在此激烈冲突碰撞，大时代恢宏磅礴的战争场面在连天烽火中震撼重现，江湖儿女的侠骨柔情于动荡乱世间绽放光华……少年天明如杂草般顽强生存于时代变革的乱世之中，面对强暴的政权、险恶的敌人，勇敢地与侠士们进行反抗，经历了一段不俗的遭遇。
</p>
<p class="p3">
    The chess-board is the world: the pieces are the phenomena of the universe; the rules of the game are what we call the laws of nature. The player on the other side is hidden from us. We know that his play is always fair, just and patient. But also we know, to our cost, that he never overlooks a mistake, or makes the smallest allowance for ignorance.
</p>

<p>
    <span>这是我的qq头像：</span>
    <img src="images/a.png" alt="">
</p>

</body>
</html>

3.5、超链接伪类

hover、active、visited

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*悬停颜色(重点)*/
        a:hover{
            color: purple;
            font-size: 25px;
        }
        /*鼠标点击未释放时的颜色*/
        a:active{
            color: green;
        }
        /*鼠标点击后的颜色*/
        a:visited{
            color: red;
        }
        /*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: skyblue 5px -5px 3px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/a.jpg" alt="">
</a>
<p>
    <a href="#">码出高效：Java开发手册</a>
</p>
<p>
    <a href="">作者：孤尽老师</a>
</p>
<p id="price">
    ￥99
</p>
</body>
</html>

3.6、列表

去除列表符号：list-style: none;

/*ul li
    list-style: none: 去掉圆点
                circle: 空心圆
                decimal: 数字
                square: 正方形
 */
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7、背景图片

阿里矢量图标库：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 2px solid red; /*粗细 样式(实线) 颜色*/
            background-image: url("images/tx.png"); /*默认是全部平铺repeat*/
        }
        .div1{
            background-repeat: repeat-x; /*水平平铺*/
        }
        .div2{
            background-repeat: repeat-y; /*垂直平铺*/
        }
        .div3{
            background-repeat: no-repeat; /*不平铺*/
        }
    </style>
</head>
<body>

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

</body>
</html>

导航栏：列表 + 背景图片

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

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*颜色 图片 位置 平铺方式*/
    background: red url("../images/down.png") 220px 10px no-repeat;
}

/*ul li
    list-style: none: 去掉圆点
                circle: 空心圆
                decimal: 数字
                square: 正方形
 */
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/right.png");
    background-repeat: no-repeat;
    background-position: 180px 5px;
}

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>
    <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>

3.8、渐变

渐变背景网站：https://www.grabient.com/

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

    <!--径向渐变\圆形渐变-->
    <style>
        body{
            background-color: #0093E9;
            background-image: linear-gradient(45deg, #0093E9 0%, #80D0C7 100%);
        }
    </style>
</head>
<body>

</body>
</html>

四、盒子模型

4.1、什么是盒子

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVK62RXc-1615142122511)(23、CSS3(盒子模型)].png)

4.2、边框

边框的粗细、样式、颜色：border: 3px dashed purple;

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

    <style>
        /*body总有一个默认为0的外边距margin*/
        /*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: skyblue;
            line-height: 30px;
            color: white;
        }
        form{
            background: skyblue;
        }
        div:nth-of-type(1)>input{
            border: 3px solid black;
        }
        div:nth-of-type(2)>input{
            border: 3px dashed purple;
        }
        div:nth-of-type(3)>input{
            border: 2px solid blue;
        }
    </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、内外边距

外边距margin：
- margin 0: 上下左右
- margin 0 1px: 上下左右
- margin 0 1px 2px 3px: 上左下右 (顺时针)
- 外边距的妙用：居中元素：margin: 0 auto;
  - 要求：外面是个块元素，而且有固定宽度。
内边距padding：
- 与外边距margin相同
盒子的计算方式：你这个元素到底有多大？
- margin + border + padding + 内容宽度

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

    <!--外边距的妙用：居中元素
        margin: 0 auto;
    -->
    <style>
        /*body总有一个默认为0的外边距margin*/
        /*h1,ul,li,a,body{ !*常用设置*!
            margin: 0;
            padding: 0;
            text-decoration: none;
        }*/
        /*border: 粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        /*margin 0: 上下左右*/
        /*margin 0 1px: 上下 左右*/
        /*margin 0 1px 2px 3px: 上 左 下 右(顺时针)*/
        h2{
            font-size: 16px;
            background: skyblue;
            line-height: 30px;
            color: white;
            margin: 0 auto;
        }
        form{
            background: skyblue;
        }
        input{
            border: 1px solid black;
        }
        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.4、圆角边框

圆角的设置：
- border-radius 25px; 左上、右上、右下、左下
- border-radius 35px 25px; 左上、右下右上、左下
- border-radius 35px 25px 15px 5px; 左上右上右下左下 (顺时针)
- border-radius 25px/25px; 水平半径/垂直半径

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

    <style>
        /*border-radius 25px; 左上、右上、右下、左下*/
        /*border-radius 35px 25px; 左上、右下 右上、左下*/
        /*border-radius 35px 25px 15px 5px; 左上 右上 右下 左下 (顺时针)*/
        /*border-radius 25px/25px; 水平半径/垂直半径*/
        div{
            width: 100px;
            height: 100px;
            border: 3px solid red;
            border-radius: 35px 25px 15px 5px;
        }
    </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;
            border: 5px solid red;
            border-radius: 55px 55px 0 0;
        }
        #img1{
            border-radius: 74px;
        }
        #img2{
            border-radius: 30px;
        }
    </style>
</head>
<body>

<div></div>
<br><br>
&nbsp;&nbsp;
<img src="images/tx.png" alt="" id="img1">
&nbsp;&nbsp;
<img src="images/tx.png" alt="" id="img2">

</body>
</html>

4.5、盒子阴影

盒子阴影
头像居中发光

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

    <style>
        /*盒子阴影: 水平偏移 垂直偏移 阴影半径 颜色*/
        div{
            width: 100px;
            height: 100px;
            border: 3px solid red;
            box-shadow: 10px 10px 5px yellow;
        }
        img{
            display: block; /*设置成块元素*/
            margin: 0 auto;
            border-radius: 74px;
            box-shadow: 0 0 50px yellow;
        }
    </style>
</head>
<body>

<div></div>
<br><br>
<img src="images/tx.png" alt="">

</body>
</html>

五、浮动

5.1、回顾：块级元素和行内元素

块级元素

h1~h6 p div 列表ul...

行内元素

span a img strong...

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

5.2、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>

5.3、float

左右浮动：float: left/right;
display和float都是实现行内元素排列的方式，但是很多情况下我们都是使用float。
浮动 + 块元素的实现：

div{
    margin: 10px;
    padding: 5px;
}
#father {
    border: 1px #000 solid;
}
/*clear: right; 右侧不允许有浮动元素
  clear: left; 左侧不允许有浮动元素
  clear: both; 两侧都不允许有浮动元素
  clear: none; 允许浮动*/
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
    clear: both;
}
.layer02 {
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
    clear: both;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
    clear: both;
}
.layer04 {
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
    clear: both;
}

5.4、overflow

文本溢出边框的处理：
- 隐藏：overflow: hidden;
- 滚动条：overflow: scroll;

<!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/1.png" alt="">
    <p>
        故事背景取自秦灭六国到西楚霸王项羽灭秦这段英雄辈出的历史时期，时间跨度约30年，是一部以武侠为主题的全民型动画。
    </p>
</div>
</body>
</html>

5.4、父级边框塌陷的问题

边框塌陷的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="father">
    <div class="layer01"><img src=" images/1.png" alt=""/></div>
    <div class="layer02"><img src=" images/2.png" alt=""/></div>
    <div class="layer03"><img src=" images/3.png" alt=""/></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
    </div>
    <div class="clear"></div>
</div>

</body>
</html>

解决方案：
1. 增加父级元素的高度
  
  简单，元素假设有了固定的高度，就会被限制。
```
#father {
    border: 1px #000 solid;
    height: 500px;
}
```
2. 在浮动元素后增加一个空的div标签，并清除浮动
  
  简单，代码中尽量避免空div。
```
<div class="clear"></div>
```
```
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}
```
3. 在父级元素中增加一个overflow
  
  简单，下拉的一些场景避免使用，因为会变丑
```
#father {
    border: 1px #000 solid;
    overflow: hidden;
}
```
4. 在父级元素中添加一个伪类after（推荐）
  
  写法稍微复杂，但是没有副作用；与第1种方法效果相同，并且能够避免空div的出现
```
#father:after{
    content: "";
    display: block;
    clear: both;
}
```

5.5、对比

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

六、定位

6.1、相对定位

相对定位: 相对于自己原来的位置进行偏移（上下左右）
position: relative;
top: -20px; 距离top的大小
left: 20px; 距离left的大小
在相对定位时，仍然在标准文档流中，并且原来的位置仍然被保留。

<!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: 2px solid #666666;
            padding: 0;
        }
        /*相对定位: 相对于自己原来的位置进行偏移*/
        #first{
            background-color: skyblue;
            border: 2px dashed blue;
            position: relative; /*相对定位: 上下左右*/
            top: -20px; /*距离top*/
            left: 20px; /*距离left*/
        }
        #second{
            background-color: lightgreen;
            border: 2px dashed green;
        }
        #third{
            background-color: mediumpurple;
            border: 2px dashed purple;
            position: relative;
            bottom: -10px;
            right: 10px;
        }
    </style>
</head>
<body>

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

6.2、一个小练习：方块定位

题目：

实现：

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

    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            margin: 25px auto;
            padding: 5px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background-color: blue;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>

<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>

</body>
</html>

6.3、绝对定位

绝对定位: 基于xxx定位，进行偏移(上下左右)：
- 没有父级元素定位的前提下，相对于浏览器定位；
- 假设存在父级元素定位，通常相对于父级元素进行偏移；
- 在父级元素范围内移动。
position: relative;
在绝对定位时，元素不会在标准文档流中，并且原来的位置也不会被保留。

<!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: 2px solid #666666;
            padding: 0;
            position: relative; /*使得绝对定位的标签基于父级元素*/
        }
        /*相对定位: 相对于自己原来的位置进行偏移*/
        #first{
            background-color: skyblue;
            border: 2px dashed blue;
        }
        #second{
            background-color: lightgreen;
            border: 2px dashed green;
            position: absolute;
            right: 30px;
            top: 50px;
        }
        #third{
            background-color: mediumpurple;
            border: 2px dashed purple;
        }
    </style>
</head>
<body>

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

6.4、固定定位

固定定位：元素被固定在页面的某个位置
position: 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-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /*固定定位：固定在页面某个位置*/
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: fixed;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>
<body>

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

</body>
</html>

6.5、z-index及透明度

z-index：默认是0，最高为无限，一般很高为999。
透明度：
- opacity: 0.5;
- filter: alpha(opacity=50);（仅IE8之前版本支持）

<!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/1.png" alt=""></li>
        <li class="tipText">学习Java，找我也没用</li>
        <li class="tipBg"></li>
        <li>时间: 2099-01-01</li>
        <li>地点: 月球一号基地</li>
    </ul>
</div>
</body>
</html>

#content{
    padding: 0;
    margin: 0;
    width: 500px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    height: 25px;
    width: 480px;
    top: 170px;
}
.tipText{
    color: white;
    z-index: 999; /*层级：0~999*/
}
.tipBg{
    background: black;
    opacity: 0.5; /*背景透明度*/
    filter: alpha(opacity=50); /*仅IE8之前版本支持*/
}

七、动画（了解）

HTML5 - Canvas
卡巴斯基安全监控：https://cybermap.kaspersky.com/

coder_lcw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23、CSS3

一、什么是CSSCSS: Cascading Style Sheet（层叠级联样式表）CSS：表现，美化网页字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…1.1、CSS的发展史CSS1.0CSS2.0：DIV(块) + CSS，HTML和CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角，阴影，动画… 存在浏览器兼容性1.2、快速入门1.2.1、style标签<style></style>&l
复制链接

扫一扫