CSS3

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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值