CSS3

2024-01-08 22:47:28

CSS3

概述

快速入门

方式一：

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

<!--    可以编写css代码，但是不建议这么写
语法：
    选择器{
        声明1；
        声明2；
        声明3；
    }
-->
    <style>
        h1{
            color: blueviolet;
        }
    </style>

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

方式二：

h1{
    color: blueviolet;
}

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

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

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

三种css导入方式

/*外部样式*/
h3{
    color: blue;
}

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

<!--    css样式优先级：就近原则-->

    <style>
        /*这是css注释,2.内部样式*/
        h2{
            color: aquamarine;
        }
    </style>

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

<!--1.行内样式-->
<h1 style="color: blueviolet" >这是标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

</body>
</html>

拓展外部样式，导入式，不建议使用

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

<!--    外部样式：导入式，不建议使用-->
    <style>
        @import url("css/style.css");
    </style>
</head>
<body>

<h3>这是标题</h3>

</body>
</html>

三种基本选择器

标签选择器：

/*标签选择器，会选择到页面上所有这个标签的元素*/
h1{
    color: #e98f81;
    background: #a8c0e9;
    border-radius: 24px;
}

p{
    font-size: 80px;
}

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

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

<h1>这是标题一</h1>
<h1>这是标题二</h1>
<p>段落内容</p>

</body>
</html>

类选择器：

/*类选择器语法
.class的名称{}
好处，可以多个标签归类是同一个class
*/
.biaoti1{
    color: #b8e967;
}

.biaoti2{
    color: #de9ed1;
}

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

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

<h1 class="biaoti1">标题1</h1>
<h1 class="biaoti2">标题2</h1>
<h1 class="biaoti2">标题3</h1>
<p class="biaoti1">段落内容</p>

</body>
</html>

id选择器

/*
优先级：id选择器>类选择器>标签选择器
id选择器：
#id名称{}

 */
#id1{
    color: #de9ed1;
}
#id2{
    color: blue;
}

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

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

<h1 id="id1">标题1</h1>
<h1 id="id2">标题2</h1>

</body>
</html>

层次选择器

/*
后代选择器,包含所有子代 祖爷爷 爷爷 父亲 你 儿子 孙子
 */
body p{
    background: #de9ed1;
}

/*
子代选择器，只包含一代子代 祖爷爷 爷爷
 */
body>p{
    background: #b8e967;
}

/*
相邻兄弟选择器，同辈，只选择一个，自己的下一个，不包括自己
.p2+p 改变的是p3
 */
.p2+p{
    background: aqua;
}

/*
通用兄弟选择器，同辈自己以及自己以下的所有同辈
 */
.p2~p{
    color: #e90b1b;
    border-radius: 24px;
}

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

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

    <p>p1</p>
    <p class="p2">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>

结构伪类选择器

/*
选中ul的第一个子元素li
 */
ul li:first-child{
    background: #b8e967;
}

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

/*
选中第一个p
选中p元素的父元素，选择父元素的第二个子元素，按顺序
 */
p:nth-child(2){
    background: #e90b1b;
}

/*
选中第二个p
选中p元素的父元素，选择父元素的与p同类型元素中的第二个子元素，按类型
 */
p:nth-of-type(2){
    background: #a8c0e9;
}

/*
a标签,鼠标移到标签上就会显示背景色
 */
a:hover{
    background: #74a6ff;
}

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

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

    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <a href="">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>

</body>
</html>

属性选择器（常用）

/*
     float: left; 向左浮动
     display: block;方块
     width: 50px;方块宽
     height: 50px;方块高
     border-radius: 10px;方块变圆角
     background: aquamarine;方块颜色
     text-align: center;文本居中
     color: #de9ed1;字体颜色
     text-decoration: none;去下划线
     margin-right: 5px;方块向右移动5px
     font: bold 20px/50px Arial;字体设置：粗体 字体大小/行高 字体
 */
.demo a{
     float: left;
     display: block;
     width: 50px;
     height: 50px;
     border-radius: 10px;
     background: aquamarine;
     text-align: center;
     color: #de3725;
     text-decoration: none;
     margin-right: 5px;
     font: bold 20px/50px Arial;
 }

/*
选中存在id属性的元素 标签[]{}
[属性名]
 */
a[id]{
    background: #fff788;
}

/*
选中存在id属性为first的元素 标签[]{}
[属性名=属性值]
 */
a[id=first]{
    background: #e98f81;
}

/*
选中class属性带有links的元素 标签[]{}
[属性名*="属性值（正则）"]
 */
a[class*="links"]{
    background: #67bfe9;
}

/*
选中href属性以image开头的元素 标签[]{}
[属性名^="属性值（正则）"]
 */
a[href^="image"]{
    background: #e784e9;
}


/*
选中href属性以pdf结尾的元素 标签[]{}
[属性名$="属性值（正则）"]
 */
a[href$="pdf"]{
    background: #e9e877;
}

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

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

<p class="demo">
    <a href="http://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="image/123.html" class="links item">3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="image/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item" id="aaa">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>

css的作用及字体样式

span

#title1{
    font-size: 50px;
}

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

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

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

</body>
</html>

字体样式

/*
 font-family:英文字体,中文字体
 font-size:字体大小
font-weight:字体粗细
color:字体颜色

 */
body{
    font-family: "Adobe Caslon Pro",华文行楷;
    color: #b8e967;
}

h1{
    font-size: 50px;
}

p{
    font-size: 30px;
}

.p1{
    font-weight: bolder;
}

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

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

<h1>张伯端</h1>
<p class="p1">刀笔随身四十年，是非非是万千千。</p>
<p class="p2">一家温饱千家怨，半世功名百世愆。</p>
<p class="p3">紫绶金章今已矣，芒鞋竹杖轻悠然。</p>
<p class="p4">有人问我蓬莱路，云在青山月在天。</p>

<p class="p5">I have had my invitation to this world's festival, and thus my life has been blessed. </p>

</body>
</html>

/*
oblique:字体风格，斜体
 */
p{
    font: oblique bolder 20px "楷体";
}

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

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

<p>刀笔随身四十年，是非非是万千千。</p>

</body>
</html>

文本样式

/*
color:文本颜色 单词，#rgb  rgba(0,0,0,0.5)最后一个表示透明度
text-align:文本排版，居中等
text-indent: 2em;段落首行缩进2字符
height: 150px; 一段字体的总高度
line-height: 30px;一行字的高度
text-decoration: underline;下划线
text-decoration: line-through;中划线
text-decoration: overline;上划线
 */
h1{
    color: rgba(233, 11, 27, 0.5);
    text-align: center;
}

h5{
    color: #74a6ff;
    text-align: center;
}

p{
    text-indent: 2em;
}

.p1{
    background: #b8e967;
    height: 150px;
    line-height: 30px;
}

.p2{
    text-decoration: underline;
}

.p3{
    text-decoration: line-through;
}

.p4{
    text-decoration: overline;
}

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

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

<h1>师说</h1>

<h5>【作者】韩愈 【朝代】唐 </h5>

<p class="p1">古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？惑而不从师，其为惑也，终不解矣。生乎吾前，其闻道也固先乎吾，吾从而师之；生乎吾后，其闻道也亦先乎吾，吾从而师之。吾师道也，夫庸知其年之先后生于吾乎？是故无贵无贱，无长无少，道之所存，师之所存也。</p>
<p class="p2">嗟乎！师道之不传也久矣！欲人之无惑也难矣！古之圣人，其出人也远矣，犹且从师而问焉；今之众人，其下圣人也亦远矣，而耻学于师。是故圣益圣，愚益愚。圣人之所以为圣，愚人之所以为愚，其皆出于此乎？爱其子，择师而教之；于其身也，则耻师焉，惑矣。彼童子之师，授之书而习其句读者，非吾所谓传其道解其惑者也。句读之不知，惑之不解，或师焉，或不焉，小学而大遗，吾未见其明也。巫医乐师百工之人，不耻相师。士大夫之族，曰师曰弟子云者，则群聚而笑之。问之，则曰：“彼与彼年相若也，道相似也。位卑则足羞，官盛则近谀。”呜呼！师道之不复可知矣。巫医乐师百工之人，君子不齿，今其智乃反不能及，其可怪也欤！</p>
<p class="p3">圣人无常师。孔子师郯子、苌弘、师襄、老聃。郯子之徒，其贤不及孔子。孔子曰：三人行，则必有我师。是故弟子不必不如师，师不必贤于弟子，闻道有先后，术业有专攻，如是而已。</p>
<p class="p4">李氏子蟠，年十七，好古文，六艺经传皆通习之，不拘于时，学于余。余嘉其能行古道，作《师说》以贻之。</p>

</body>
</html>

/*
vertical-align: middle; 字体与图片水平居中对齐
 */
img,span{
    vertical-align: middle;
}

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

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

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

<p>
    <img src="images/1.jpg" alt="" width="100" height="100"/>
    <span>aaaaaaaaaa</span>
</p>

<a href="">abc</a>

</body>
</html>

文本阴影和超链接伪类

/*默认的颜色*/
a{
    text-decoration: none;
    color: rgb(6, 5, 6);
}

/*鼠标悬浮的颜色*/
a:hover{
    color: #e784e9;
    font-size: 50px;
}

/*鼠标按住未释放时的颜色*/
a:active{
    color: #b8e967;
}

/*文字阴影
水平偏移
垂直偏移
阴影半径
阴影颜色
*/
#price{
    text-shadow: 8px -8px 2px #74a6ff;
}

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

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

<a href="#">
    <img src="images/1.png" alt="" width="200" height="200"/>
</a>
<p>
    <a href="">天龙八部</a>
</p>
<p>
    <a href="">作者：金庸</a>
</p>
<p id="price">
    ￥100
</p>

</body>
</html>

列表样式练习

#nav{
    width: 230px;
    background: darkgrey;
}

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

ul{
    background: darkgrey;
}

/*
ul li
list-style: none; 去掉列表前面的点 circle 空心圆  decimal 数字 square 正方形

 */
ul li{
    line-height: 30px;
    list-style: none;
    text-indent: 1em;

}

a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;

}

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

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

    <link rel="stylesheet" href="css/style.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>

背景图像应用及渐变

/*
border: 1px solid red;边框：粗细，线型：实线，颜色
background-image: url("../images/1.jpg"); 插入背景图片，默认全部平铺
background-repeat: repeat-x;只水平平铺一行
background-repeat: repeat-y;只竖直平铺一列
background-repeat: no-repeat;不平铺
 */
div{
    width: 1000px;
    height: 500px;
    border: 1px solid red;
    background-image: url("../images/1.jpg");
}

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

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

.div3{
    background-repeat: no-repeat;
}

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

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

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

</body>
</html>

#nav{
    width: 230px;
    background: darkgrey;
}

/*
 background: #de3725 url("../images/2.png") 180px 2.5px no-repeat; 添加图片
 */
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #de3725;
    background: #de3725 url("../images/2.png") 190px 2.5px no-repeat;
}

ul{
    background: darkgrey;
}

/*
ul li
list-style: none; 去掉列表前面的点 circle 空心圆  decimal 数字 square 正方形
 */
ul li{
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
    background: darkgrey url("../images/2.png") 160px 0px no-repeat;
}

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

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

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

    <link rel="stylesheet" href="css/style.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>

渐变

/*
径向渐变
圆形渐变
 */
body{
    background: linear-gradient(19deg,#edaca5 0%, #ede098 100%);
}

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

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

</body>
</html>

盒子模型及边框使用

边框

/*
常见规范如下
 */
body{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

#box{
    width: 300px;
    border: 1px solid red;
}

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

form{
    background: #b8e967;
}

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

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

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

    <link rel="stylesheet" href="css/style.css">
</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>

内外边距及div居中

/*
margin: 0 auto; 外边框，上下为0 ，左右auto自动居中
 */
#box{
    width: 300px;
    border: 1px solid red;
    margin: 0 auto;
}

/*
margin: 0 5px 10px 15px; 上 0px 右5px 下10px 左15px 顺时针
 */
h2{
    background: #b8e967;
    margin: 0 5px 10px 15px;
}

form{
    background: #74a6ff;
}

/*
padding: 0 50px 10px 100px;内边距 上0 右50 下10 左100
 */
div:nth-of-type(2){
    background: #e784e9;
    padding: 0px 50px 10px 100px;
}

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

    <link rel="stylesheet" href="css/style.css">
</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>

圆角边框及阴影

边框圆角

/*
border-radius: 30px;上下左右都是30
border-radius: 50px 10px;左上，右下50  右上 左下10
border-radius: 50px 10px 30px 70px;左上50 右上10 右下30 左下70 顺时针
圆圈 圆角=宽度
 */
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/styel.css">
</head>
<body>

<div>

</div>

</body>
</html>

圆形

/*
半圆形：
    width: 100px;
    height: 50px;
    border: 10px solid red;
    border-radius: 100px 100px 0px 0px;
 圆形：
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
 扇形：
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 100px 0px 0px 0px;
 */
div{
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 100px 0px 0px 0px;
}

img{
    border-radius: 150px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>

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

</body>
</html>

阴影

/*
用阴影实现发光效果
 */
.div1{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    box-shadow: 10px 10px 100px yellow;
}

.div2{
    width: 500px;
    margin: 30px auto;
}

.div2 img{
    border-radius: 150px;
    box-shadow: 10px 10px 100px yellow;
}

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

<div class="div1"></div>
<div class="div2"><img src="images/1.jpg" alt=""></div>

</body>
</html>

display和浮动

display：

/*
display: block 块元素
display: inline 行内元素
display: inline-block 行内块元素
display: none 消失
 */
div{
    width: 100px;
    height: 100px;
    border: 5px solid red;
    display: inline-block;
}

span{
    width: 100px;
    height: 100px;
    border: 5px solid #74beff;
    display: inline-block;
}

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

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

浮动（左右浮动）：

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid #000000;
}
.layer01{
    border: 1px dashed #74a6ff;
    display: inline-block;
    float: left;
 }
.layer02{
    border: 1px dashed #e964e1;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px dashed #b8e967;
    display: inline-block;
    float: left;
}
/*
     display: inline-block;
    float: left;
    clear: both;
    既有浮动效果，又是一个块元素，独占一行
 */
.layer04{
    border: 1px dashed #ae6e47;
    font-size: 12px;
    line-height: 23px;
    display:inline-block;
    float: left;
    clear: both;
}

<!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">
    <div class="layer01"><img src="images/1.png" alt="" width="100" height="300"></div>
    <div class="layer02"><img src="images/2.png" alt="" width="100" height="300"></div>
    <div class="layer03"><img src="images/3.png" alt="" width="100" height="300"></div>
    <div class="layer04">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>

</body>
</html>

overflow及父级边框塌陷问题

/*
方式一：
#father{
    border: 1px solid #000000;
    height: 500px;
}
限制父元素高度来解决父级边框塌陷，不建议使用
 */

/*
方式二：
<div class="clear"></div>
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}
增加空的div解决父级边框塌陷，可以使用
div增加在父级里面的最下面
 */

/*
方式三：
#father{
    border: 1px solid #000000;
    overflow: hidden;
}
通过overflow来解决父级边框塌陷
 */
/*
方式四：
通过在父类添加一个伪类实现
#father:after{
    content: '';
    display: block;
    clear: both;
}
 */

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

#father{
    border: 1px solid #000000;
}

#father:after{
    content: '';
    display: block;
    clear: both;
}

.layer01{
    border: 1px dashed #74a6ff;
    display: inline-block;
    float: left;
 }
.layer02{
    border: 1px dashed #e964e1;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px dashed #b8e967;
    display: inline-block;
    float: right;
}

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

<!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">
    <div class="layer01"><img src="images/1.png" alt="" width="100" height="300"></div>
    <div class="layer02"><img src="images/2.png" alt="" width="100" height="300"></div>
    <div class="layer03"><img src="images/3.png" alt="" width="100" height="300"></div>
    <div class="layer04">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>

</body>
</html>

overflow:

#content{
    width: 200px;
    height: 150px;
    overflow: scroll;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>

<div id="content">
    <img src="images/1.png" alt="" width="150" height="300">
    <p>性命双修玄又玄，海底洪波驾法船。生擒活捉蛟龙首，始知匠手不虚传。</p>
</div>

</body>
</html>

定位的使用及练习

默认情况

div{
    margin: 10px;
    padding: 5px;
    font-size: 12px;
    line-height: 25px;
}
#father{
    border: 1px solid #74a6ff;
    padding: 0;
}
#first{
    background: #b8e967;
    border: 1px dashed #a6f5ff;
}
#second{
    background: #e784e9;
    border: 1px dashed #ff99e8;
}
#third{
    background: #67bfe9;
    border: 1px dashed #e8ff94;
}

<!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">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

相对定位

/*
相对于自己原来的位置进行偏移 上下左右 正反 负是
他仍然在标准文件流中，他原来的位置会被保留
    position: relative;
    top: -20px; 负上 正下
    left: -20px 负左 正右
    right
    bottom
 */
body{
    padding: 20px;
}
div{
    margin: 10px;
    padding: 5px;
    font-size: 12px;
    line-height: 25px;
}
#father{
    border: 1px solid #74a6ff;
    padding: 0;
}
#first{
    background: #b8e967;
    border: 1px dashed #a6f5ff;
    position: relative;
    top: -20px;
    left: -20px;
}
#second{
    background: #e784e9;
    border: 1px dashed #ff99e8;
    position: relative;
    right: -30px;
}
#third{
    background: #67bfe9;
    border: 1px dashed #e8ff94;
    position: relative;
    bottom: -30px;
}

<!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">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

练习

#father{
    border: 3px solid red;
    width: 300px;
    height: 300px;
    padding: 10px;
}
a{
    width: 100px;
    height: 100px;
    display: block;
    background: #e784e9;
    text-align: center;
    line-height: 100px;
    color: white;
    text-decoration: none;
}
a:hover{
   background: #67bfe9;
}

#a2,#a4{
    position: relative;
    top: -100px;
    right: -200px;
}
#a5{
    position: relative;
    top: -300px;
    right: -100px;
}

<!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 href="" id="a1">链接1</a>
    <a href="" id="a2">链接2</a>
    <a href="" id="a3">链接3</a>
    <a href="" id="a4">链接4</a>
    <a href="" id="a5">链接5</a>
</div>

</body>
</html>

绝对定位

/*
1.如果父级元素没有定位，绝对定位是相对于浏览器定位的,一般不会这样做
    position: absolute;
    top: 20px;
    left: 20px;
    right
    bottom
 */
/*
2.如果父级元素有定位，绝对定位是相对于父级元素定位的,在父级元素范围内移动
    position: absolute;
    top: 20px;
    left: 20px;
    right
    bottom
 */
/*
绝对定位后，他不在标准文档流中，原来的位置不会被保留
 */
body{
    padding: 20px;
}
div{
    margin: 10px;
    padding: 5px;
    font-size: 12px;
    line-height: 25px;
}
#father{
    border: 1px solid #74a6ff;
    padding: 0;
    position: relative;
}
#first{
    background: #b8e967;
    border: 1px dashed #a6f5ff;
    position: absolute;
    top: 20px;
    left: 20px;
}
#second{
    background: #e784e9;
    border: 1px dashed #ff99e8;
    position: absolute;
    top: 20px;
    left: 100px;
}
#third{
    background: #67bfe9;
    border: 1px dashed #e8ff94;
    position: absolute;
    top: 20px;
    right: 20px;
}

<!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">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

固定定位

/*
绝对定位：相对浏览器，随滚动条变化
固定定位：不随滚动条变化，永远在页面的固定位置
 */
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){
    width: 100px;
    height: 100px;
    background: #67bfe9;
    position: fixed;
    right: 0;
    bottom: 0;
}

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

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

z-index

#content{
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
    width: 479px;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
#content ul{
    position: relative;
}
.TipTest,.TigBg{
    position: absolute;
    width: 479px;
    height: 25px;
    top: 300px;
}
.TigBg{
    background: #e9b95a;
    opacity: 0.5;
}
.TipTest{
    z-index: 999;
    color: #e054e9;
}
/*
opacity: 0.5; 设置透明度
z-index: 999;图层，默认是0，可以设置，1,2,3,4...最大无限制
 */

<!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/bj.png" alt=""></li>
        <li class="TipTest">背景图片</li>
        <li class="TigBg"></li>
        <li>时间：2078-9-9</li>
        <li>地点：月球</li>
    </ul>
</div>

</body>
</html>

码农公寓

CSS3

CSS3

概述

快速入门

方式一：

方式二：

三种css导入方式

三种基本选择器

层次选择器

结构伪类选择器

属性选择器（常用）

css的作用及字体样式

span

字体样式

文本样式

文本阴影和超链接伪类

列表样式练习

背景图像应用及渐变

渐变

盒子模型及边框使用

边框

内外边距及div居中

圆角边框及阴影

边框圆角

圆形

阴影

display和浮动

display：

浮动（左右浮动）：

overflow及父级边框塌陷问题

定位的使用及练习

默认情况

相对定位

练习

绝对定位

固定定位

z-index

总结

学习视频

码农公寓

CSS3

概述

快速入门

方式一：

方式二：

三种css导入方式

三种基本选择器

层次选择器

结构伪类选择器

属性选择器（常用）

css的作用及字体样式

span

字体样式

文本样式

文本阴影和超链接伪类

列表样式练习

背景图像应用及渐变

渐变

盒子模型及边框使用

边框

内外边距及div居中

圆角边框及阴影

边框圆角

圆形

阴影

display和浮动

display：

浮动（左右浮动）：

overflow及父级边框塌陷问题

定位的使用及练习

默认情况

相对定位

练习

绝对定位

固定定位

z-index

总结

学习视频

相关文章