园龄：2年11个月粉丝：11 关注：0

📂JAVA全栈

🔖前端

2022-04-05 17:56阅读: 82评论: 0推荐: 0

CSS3

1. CSS的简单介绍

前端手册：https://www.w3school.com.cn/

HTML + CSS + JavaScript：结构＋表现＋交互

1.1 什么是CSS

Cascading style Sheet：层叠级联样式表

CSS:　表现(美化网页)

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动.....

1.2 CSS发展史

CSS1.0

CSS2.0

DIⅣ(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1

浮动，定位

CSS3.0

圆角，阴影，动画...

1.3 CSS的快速入门及优势

所有的样式都可以写在标签里面

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

    <!--规范，<style> 可以编写css的代码 ，每一个声明，最好使用分号结尾
    语法：
        选择器 {
            声明1;
            声明2;
            声明3;
        }
	h1就是选择器，选中下面所有的h1标签
    -->
    <style>
        h1{
            color: red;
        }
    </style>

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

</head>
    
<body>

<h1>我是标题</h1>

</body>
</html>

但是我没有实现出效果来

css的优势:

1、内容和表现分离
2、网页结构表现统一，可以实现复用3、样式十分的丰富I

1.4 CSS的3种导入方式

内部样式：行内样式

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

    <!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
    <h1 style="color: red"> 我是标题</h1>

</body>
</html>

内部样式：Style标签

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

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

</head>
<body>

外部样式

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

/*CSS代码：外部样式*/
h1{
    color: yellow;
}

优先级：就近原则——哪个样式离元素最近就用哪个样式

2. 选择器

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

2.1 基本选择器

标签选择器

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

    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素
        所有的h1标签都可以被选中
        border-radius：圆角
        font-size：字体大小
        */
        h1{
            color: #a13d30;
            background: #3cbda6;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

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

</body>
</html>

类选择器class

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

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

</head>
<body>

    <!--给标签添加了一个class属性-->
    <h1 class="qinjiang">标题1</h1>
    <h1 class="kuangshen">标题2</h1>
    <h1 class="qinjiang">标题3</h1>

<p class="qinjiang">P标签</p>

</body>
</html>

ID选择器

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

    <style>
        /* id选择器   : id必须保证全局唯一！
           #id名称{}          
        */
        #qinjiang{
            color: #ff008a;
        }
        .style1{
            color: #02ff00;
        }
        h1{
            color: #2d1dc1;
        }
    </style>
    
</head>
<body>

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

</body>
</html>

优先级

不遵循就近原则，固定的

id选择器> class 选择器 > 标签选择器

2.2 层次选择器

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

    <style>
        p{
        background: #02ff00;
        }

        /*后代选则器：在某个元素的后面
        body p：body后面所有的P标签，body和p之间的空格不能少
        */
        body p{
        background: red;
        }
        
        /*子选择器：后面的一代
        */
        body>p{
        background: #3cbda6;
        }

        /*相邻兄弟选择器（同辈）： 只有一个，相邻（向下）*/ 
        .active + p{
        background: #a13d30;
        }

        /*通用兄弟选则器，当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: #02ff00;
        }

    </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的第一个子元素
        伪类的意思是所有的东西后面都要加冒号
        :first-child就是伪类
        */
        ul li:first-child{
            background: #02ff00;
        }

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

        /* 选中 p1 : 定位到父元素，选择当前的第一个元素
        nth-child(1)：选择当前p元素的父级元素，选中父级元素的第一个子元素，如果这个子元素是P元素则生效
        按顺序选择
        */
        p:nth-child(1){
            background: #2700ff;
        }

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

        /*hover：用背景颜色覆盖a标签的链接
        */
        a:hover{
            background: #000b3e;
        }


    </style>

</head>
<body>
    
    <a href="">31231</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>
        
    /*后代选择器*/
    /*float: left：向左浮动*/
    /*display: block：块元素*/
    /*border-radius：圆角边框*/
    /*text-align: center：文字居中对齐*/
    /*color: gainsboro：文字颜色*/
    /*text-decoration: none：去掉下划线*/
    /*margin-right: 5px：外边距向右，每个元素向右偏移5px*/
    /*font: bold 20px/50px Arial：字体粗细，大小/行高，字体样式*/
    
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: #2700ff;
      text-align: center;
      color: gainsboro;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }

    /* 属性名， 属性名 = 属性值（正则）
    = 绝对等于
    *= 包含这个元素
    ^= 以这个开头
    $= 以这个结尾
    */

    /*存在id属性的元素   a[]{}
    a[id]：a标签里面带有id属性的元素
    */
    a[id]{
    background: #181802;
    }
    /*id=first的元素*/
    a[id=first]{
    background: #63ff23;
    }

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

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

    a[href$=jpg]{
      background: #24eed6;
    }

    </style>

</head>
<body>


<p class="demo">
	
    <!--links item first是三个类
	target="_blank：在新页面打开
	title="test"：悬浮上面会显示的字
	images/123.html：文件夹存在，但下面的123.html不存在
	/abc.pdf：以PDF结尾
	-->
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" 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">10</a>

</p>

</body>
</html>

3. 美化网页元素

3.1 为什么要美化

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户体验

span标签：

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

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

    <style>
        /*id选择器*/
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

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

</body>
</html>

3.2 字体样式

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

    <!--
        font-family: 字体
        font-size：  字体大小
        font-weight: 字体粗细
        color ： 字体颜色
    -->
    <style>
        /*选中body标签，这个是最大的标签*/
        body{
           
            font-family: "Arial Black", 楷体;
            color: #a13d30;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>

</head>
<body>

<h1>故事介绍</h1>

<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p>
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

<p>
    Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>

</body>
</html>

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

    <!--字体风格
	bolder：粗体
	oblique：斜体
	-->
    <style>
        p{
            font: oblique bolder 16px "楷体" ;
        }
    </style>

</head>
<body>

<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

</body>
</html>

3.3 文本样式

颜色
文本对齐的方式
首行缩进
行高：单行文字垂直居中，line-height = height
下划线
水平对齐~ 参照物

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

    <!--
    颜色：
        单词
        RGB 0~F #0000FF
        RGBA  A：0~1  （A是透明度alpha）

    text-align : 排版，居中用的比较多，right,left,center
    text-indent: 2em;  段落首行缩进2字符
    height: 300px; 文本框的高度
    line-height: 300px;
        行高和文本框的高度一致，就可以使得单行文字上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*a标签（超链接）去下划线*/
        a{
            text-decoration: none;
        }

    </style>


</head>
<body>
 

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


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

<h1>故事介绍</h1>

<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

<p class="p3">
    Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>


</body>
</html>

行高和块(p标签和div标签)的高度一致，就可以上下居中

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

    <style>
        /*
        水平对齐~ 参照物——a，b
        选中span标签
        */
        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>

<!--P标签里面是一个图片和一段文字-->
<p>
    <img src="image/a.png" alt="">
    <span>asdasdajsldjalksdjalksd</span>
</p>

</body>
</html>

3.4 阴影

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

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

</head>
<body>

<p id="price">
    ￥99
</p>

</body>
</html>

3.5 超链接、伪类

正常情况下，a, a: hover

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

    <style>
        /*
        默认的颜色为黑色，去掉下划线
        */
        a {
            text-decoration: none;
            color: #000;
        }

        /*
        鼠标悬浮的状态（只需要记住 :hover）
        伪类用的最多的就是hover
        */
        a:hover {
            color: orange;
            font-size: 50px;
        }

        /*鼠标按住未释放的状态*/
        a:active {
            color: green;
        }
        /*点完之后的颜色*/
        a:visited {
            color: #ff008a;
        }


    </style>

</head>
<body>

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

</body>
</html>

3.6 列表

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

<!--div是一个没有任何作用的标签-->
<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>

/*写CSS代码建议从外往里写，div——title——ul li——a*/
/*nav是导航的意思*/
#nav{
    width: 300px;
    /*这个背景颜色设置完ul li的背景颜色就不需要设置了*/
    background: #a0a0a0;
}

/*标题*/
.title{
    font-size: 18px;
    font-weight: bold;
    /*缩进*/
    text-indent: 1em;
    line-height: 35px;
    /*  背景：颜色，图片，图片位置，平铺方式  
    3.7节背景的东西
    CSS一般都避免逗号，都是使用的空格
    */
    background: red url("../images/d.gif") 270px 10px no-repeat;
}

/*ul li*/
/*
list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
background: #a0a0a0——背景设置为灰色;
*/
/*选中全部的ul li*/
ul li{
    /*初始时ul li行距太小，认为设置变宽*/
    height: 30px;
    /*去掉无序列表的圆点，有序列表的数字*/
    list-style: none;
    /*文字缩进*/
    text-indent: 1em;
    background-image: url("../images/r.gif");
    background-repeat: no-repeat;
    background-position: 236px 2px;
}

/*每一个列表里面时一个a标签的链接*/
a{
    text-decoration: none;
    font-size: 14px;
    /*字体设置为黑色*/
    color: #000;
}
a:hover{
    /*鼠标悬浮变为橘色*/
    color: orange;
    /*鼠标悬浮时加下划线*/
    text-decoration: underline;
}

3.7 背景

背景颜色

背景图片

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

    <style>
        div {
            width: 1000px;
            height: 700px;
            /*边框：粗细 实线 颜色*/
            border: 1px solid red;
            /*url作用是指向一个资源文件*/
            background-image: url("images/tx.jpg");
            /*默认是全部平铺的 repeat*/
        }

        .div1 {
            /*布局方式：水平平铺*/
            background-repeat: repeat-x;
        }

        .div2 {
            /*布局方式：垂直平铺*/
            background-repeat: repeat-y;
        }

        .div3 {
            /*布局方式：不平铺*/
            background-repeat: no-repeat;
        }
    </style>

</head>
<body>

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

</body>
</html>

3.8 渐变

渐变CSS代码资源站：https://www.grabient.com/

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

    <!--径向渐变，圆形渐变-->
    <style>
        body {
            /*background-color: #21D4FD;*/
            /*linear-gradient(角度，当前颜色，最终颜色)*/
            /*background-image和background作用一样*/
            /*background-image: linear-gradient(19deg, #21D4FD 0%, #00ff4e 100%);*/
            background: linear-gradient(19deg, #21D4FD 0%, #00ff4e 100%);
        }

    </style>

</head>
<body>

</body>
</html>

4. 盒子模型

4.1 什么是盒子

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

4.2 边框

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

    <style>

        /*body, h1, ul, li, a {*/
        /*    !*初始化常见操作*/
        /*    码出高效这本书里都有*/
        /*    *!*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    text-decoration: none;*/
        /*}*/

        /*text-decoration: none;*/
        /*}*/
        /*border: 粗细，样式，颜色*/
        #box {
            /*登陆框默认宽度：300px*/
            width: 300px;
            /*边框: 粗细border-width，样式border-style，颜色border-color*/
            border: 1px solid red;
        }

        h2 {
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            color: white;
        }

        /*标签选择器*/
        form {
            background: #3cbda6;
        }

        /*结构伪类选择器*/
        /*所有div标签中第一个div标签下面的input标签*/
        div:nth-of-type(1) input {
            border: 3px solid black;
        }

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

        /*虚线：dashed*/
        div:nth-of-type(2) input {
            border: 2px dashed #008c27;
        }

    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <!--每个属性都用div包起来，养成习惯-->
        <div>
            <span>用户名：</span>
            <!--输入框-->
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
        <img src="images/tx.jpg" alt="">
    </form>
</div>

</body>
</html>

4.3 内外边距

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

    <!--外边距的妙用：居中元素
     margin: 0 auto;
    -->
    <style>

        #box{
            width: 300px;
            border: 1px solid red;
            /*margin:上下为0  左右为auto（自动对齐，默认就是居中）*/
            margin: 0 auto;
        }
        /*
        顺时针旋转：上、右、下、左
        margin:0
        margin:0 1px
        margin:0 1px  2px   3px

        */
        h2{
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            color: white;
            margin:0 1px 2px 3px;
        }

        form{
            background: #3cbda6;
        }
        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>

<img src="images/tx.jpg" alt="" style="margin: 0 auto">


</body>
</html>

盒子的计算方式: 你这个元素到底多大?

4.4 圆角边框

边框圆角

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

    <!--
    左上  右上   右下  左下，顺时针方向
    圆圈：  圆角 = 半径！
    width: 100px——height: 100px;——border-radius: 50px;
    -->
    <style>
        /*div是一个空标签，但是可以设置宽度和高度*/
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*圆角边框*/
            border-radius: 50px;
        }
    </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;*/
            /*background: red;*/
            /*border-radius: 50px 50px 0 0;*/

            /*四分之一圆*/
            width: 50px;
            height: 50px;
            background: red;
            border-radius: 50px 0 0 0;
        }

        img {
            /*四个边都是25px，就是圆*/
            border-radius: 25px;
        }
    </style>

</head>
<body>

<div></div>

<img src="images/tx.jpg" alt="">

</body>
</html>

4.5 盒子阴影

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

    <!-- margin: 0 auto; 居中
    要求： 块元素，块元素有固定的宽度
    如果img标签是放在body标签里面的，margin: 0 auto就不会生效
     #box{
            因为box设置了宽度，所以margin: 0 auto生效
            width: 300px;
            border: 1px solid red;
            /*margin:上下为0  左右为auto（自动对齐，默认就是居中）*/
            margin: 0 auto;
        }
    -->
    <!--设置块元素的内容居中：<div style="width: 500px; display: block; text-align: center">
    text-align: center——设置居中的语句
    -->
    <style>
        img {
            margin: 0 auto;
            border-radius: 50px;
            /*盒子阴影
            box-shadow第三个参数是模糊半径
            */
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

</head>

<body>

<div style="width: 500px; display: block; text-align: center">
    <img src="images/tx.jpg" alt="">
</div>

</body>

</html>

5. 浮动

5.1 标准文档流

<!--块级元素:独占一行-->
h1~h6 	p	div		列表...
<!--行元素:不独占一行-->
span, a, img, strong……

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

5.2 display

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

    <!--
    display参数：
        block 块元素
        inline 行内元素
        inline-block  即时行内元素，也是块元素——保持块元素的特性，但是可以写在一行
        none 隐藏消失，不显示
    -->
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }

        span {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>

</head>
<body>

<!--这两个元素没有作用，但是可以自己加样式-->
<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

div和span标签都设置为inline-block

div标签设置为block

5.3 浮动(float)

左右浮动——超脱出标准文档流

文字环绕图片的效果就是把图片设置为浮动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/1.jpg" alt=""/></div>
    <div class="layer02">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
    </div>
</div>
</body>
</html>

div {
    margin:10px;
    padding:5px;
}
#father {
    border:1px #000 solid;
}

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

.layer02 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    display: inline-block;
}

5.4 父级边框塌陷的问题

方案1：增加父级元素的高度

#father{
	border: 1px #000 solid;
    /*800px超过了所有浮动元素的高度*/
    height: 800px;
}

方案2：增加一个空的div标签，清除浮动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--第一个div就是父级元素-->
<div id="father">
    <div class="layer01"><img src="images/1.jpg" alt=""/></div>
    <div class="layer02">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

div {
    margin:10px;
    padding:5px;
}
#father {
    border:1px #000 solid;
}

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

.layer02 {
    border:1px #060 dashed;
    display: inline-block;
    float: right;
}
/*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none;
*/

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

方案3：在父级元素中增加一个overf1ow: hidden;

/*父级边框本身没有设置高度，高度是被内容元素撑起来的*/
#father {
    border: 1px #000 solid;
    overflow: hidden;
}

方案4：父类添加一于个伪类:after

最认可的解决方案

#father {
    border: 1px #000 solid;
}
/*和增加div然后清除浮动是一个效果，只是通过编程实现的*/
#father:after{
    /*增加空内容，很小一块，没有文本把它撑起来*/
    content: '';
    /*把空文本变成元素块，有了宽度和高度*/
    display: block;
    clear: both;
}

5.5 overflow(溢出)

超过一个高度就产生一个滚动条，需要拖动才可以看到剩下的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*overflow参数：
        hidden：自动隐藏
        scroll：滚动条
        */
        #content {
            width: 200px;
            height: 150px;
            overflow: scroll;
        }
    </style>
</head>
<body>

<div id="content">
    <img src="images/1.jpg" alt="">
    <p>
        指一个人发出的笑声，高兴欢乐时的状态，抒发快乐的心情，表现一个人很开心的状态。也指人通常用来开玩笑。人的一种笑声，高兴，开心。
    </p>
</div>

</body>
</html>

5.6 对比

display——排列在一行时方向不可以控制

float——浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

6. 定位

6.1 默认情况

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

    <style>
        div {
            /*每个div的间距时10+5=15px*/
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        /*所有div都加边框是为了可以看的见*/
        #father {
            border: 1px solid #666;
            padding: 0;
        }

        #first {
            background-color: #a13d30;
            border: 1px dashed #b27530;
        }

        #second {
            background-color: #255099;
            border: 1px dashed #255066;
        }

        #third {
            background-color: #1c6699;
            border: 1px dashed #1c6615;
        }
    </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>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
            position: relative; /*相对定位*/
            /*-：沿着参考点的方向移动，+：沿着参考点的反方向移动*/
            /*相对原来的位置向上移动了20Px*/
            top: -20px;
            /*向右移动20px*/
            left: 20px;
        }

        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
            position: relative;
            /*向下移动20px*/
            bottom: -10px;
            /*向左移动20px*/
            right: 20px;
        }
    </style>

</head>
<body>

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

</body>
</html>

练习

使用
和超链接布局页面

每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标指针移上去时变为蓝色使用

相对定位改变每个超链接的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #ffa1f2;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #47a4ff;
        }
        .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 绝对定位

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

 /*父级元素定位*/
#father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }

6.4 固定定位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;
            /*绝对定位到浏览器的右下角，滑动滚轮div块的位置就会变*/
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /*fixed,固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            /*固定定位到浏览器界面的右下角，滑动上下的滚轮div块的位置也不变*/
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

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

</body>
</html>

6.5 z-index

图层~只有使用了定位才会有层级的概念，强制让两个块元素堆叠到了一起
z-index:默认是0，最高无限

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

<div id="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""> </li>
        <!--提示文字tipText，提示背景tipBg-->
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
/*tipBg是一个空li标签*/
.tipText, .tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 216px;
}
.tipText{
    color: white;
    /*z-index的参数就是第几个图层，
    取值为0，1，2……，数值大的在上面*/
    z-index: 2;
}
.tipBg{
    background: #000;
    /*上层背景设置透明度opacity，也能看见下面的字*/
    opacity: 0.5; /*背景透明度*/
}

上一篇使用Typora编辑器上传文档到博客园

下一篇GeoJSON数据格式解析

本文作者：风帆远航

本文链接：https://www.cnblogs.com/flying-birds-xyg/p/16103160.html

posted @ 2022-04-05 17:56 风帆远航阅读(82) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页