前端

HTML

阿里巴巴矢量图标图库:https://www.iconfont.cn/ 

作用: 定义网页的结构 超文本标记语言 在html中,除了标签  没有任何东西

标签嵌套规则:
1.块级标签可以包含任意其他标签(块级标签)(p除外)
2.行内建议包含行内标签,尽量不要嵌套块级标签

<head>标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf8">    <!--'提供有关页面的原信息'-->
    <title>标题</title>     <!--'网站的标题'-->
    <link rel="stylesheet" href="./index.css">  <!--'链接css资源文件,网站图标'-->
    <script src = 'index.js'></script> <!--'链接JS文件'-->
    <style>
        body {
            background-color: yellowgreen;
        }
    </style> <!--定义内部样式,相当于在head里写css  #选中ID .选中类-->
</head>

<body>标签

1.行内标签
特点:
- 在一行内显示
- 不能设置宽高,如果不设置宽高,默认宽高是内容的宽高
a span em b strong
　　1.1 行内块标签
　　特点:
　　- 在一行内显示
　　- 可以设置宽高
　　img,input

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf8">    <!--'提供有关页面的原信息'-->
    <title>标题</title>     <!--'网站的标题'-->
    <link rel="stylesheet" href="./index.css">  <!--'链接css资源文件,网站图标'-->
    <style>
        body {
            margin: 0;
            background-color: yellowgreen;
        }
        #topBar {                   
            background-color: darkblue;
            height: 40px;
        }
        a {
            color: red;
        }
        .lei {
            background-color: green;
            height: 40px;
            width: 1226px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            margin-bottom: 0;    /* 4个margin可以写成margin auto;  */
        }
    </style> <!--定义内部样式,相当于在head里写css  #选中ID .选中类-->
</head>
<body>
字体标签:除了h1到h6 其他都是行内标签(在一行内显示)
<h1>lol</h1>          <!--h1到h6标签,网站中h1只出现一次-->
<h2>lol</h2>
<h3>lol</h3>
<h4>lol</h4>
<h5>lol</h5>
<h6>lol</h6>
<u>滴滴滴</u>        <!--下划线标签-->
<b>滴滴滴</b>        <!--加粗标签-->
<strong>滴滴滴</strong>  <!--和b标签一样也是加粗标签-->
<em>滴滴滴</em>      <!--斜体-->
<sup>上标</sup>      <!--上标和下标标签-->
<sub>下标</sub>
排版标签,独占一行,可以设置宽高
<div id="topBar">        <!--块区域 div独占一行-->
    <div class="lei">
        <br>            <!--换行-->
        <a href="./3.html">3</a>
        <hr>            <!--分割线-->
        <span>|</span>  <!--小区域的内容标签-->
    </div>
</div>

<a href="http://www.baidu.com">百度两下</a>   <!--a标签,超链接,默认get请求 href资源的链接-->
<a href="./images/1.jpg" title="1图片">1</a> <!--a标签,还可以链接图片文件和html文件 ,title 鼠标悬浮提示的标题-->
<a href="./images/2.jpg">2</a>
<a href="./3.html">3</a>
<img src="./images/4.jpg" alt="这是图4">  <!--图片显示. src 图片路径  alt 图片加载失败显示的标题-->
<ul>           <!--ul和li 无序列表-->
    <li>qwe</li>
    <li>asd</li>
    <li>zxc</li>
    <li>rty</li>
</ul>
<ol>            <!--ol和li 有序列表-->
    <li>qwe</li>
    <li>asd</li>
    <li>zxc</li>
    <li>rty</li>
</ol>
<dl>
    <dt>召唤兽</dt>           <!--定义列表的标题-->
    <dd>吸血鬼</dd>           <!--定义列表的描述内容-->
    <dd>幽灵</dd>
    <dd>鬼将</dd>
</dl>

</body>
</html>

 a标签扩展爱恨准则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*a标签 爱恨准则   必须遵守这个顺序去写*/
        a:link{                 /*没被鼠标点击时显示的颜色*/
            color: green;
            }
        a:visited{                 /*被鼠标点击后显示的颜色*/
            color: deeppink;
        }
        a:hover{                /*鼠标悬浮时的颜色*/
            color: darkorange;
        }
        a:active{                  /*被鼠标点击住时显示的颜色*/
            color: yellow;
        }
    </style>
</head>
<body>
<a href="">呵呵一下</a>

</body>
</html>

段落标签p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-size: 12px; /* 定义p标签字体大小  */
        }
        .aa{
            color: red;
        }
        .bb{
            color: #b0b0b0;
            text-decoration: line-through;      /* 删除线,字体中间带一条横线  */
        }
    </style>
</head>
<body>
    <div>
        <p> 君不见黄河之水天上来，奔流到海不复回。</p>     <!--p标签只能放文本和表单元素-->
        <p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
        <ul>
            <li>
                <p>
                    <span class="aa">256元</span>&nbsp<span class="bb">3000元</span>
                </p>
            </li>
        </ul>
    </div>

</body>
</html>

from表单

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            input{
                height: 25px;      /* 输入框大小  */
                font-size: 10px;    /* 字体大小 */
            }
            #passwd{
                margin-left: 16px;
            }
        </style>
    </head>
    <body>
    <form action="http://127.0.0.1:80" method="get">      <!--form表单 action设置提交的后台接口 method设置请求方式-->
        <p>
            <label for="username">用户名:</label>        <!--设置后点用户名这三个字就可以获取焦点,for 对应的是input的id-->
            <input type="text" name="user" value="" id="username">      <!--type指定text为明文,password为密文-->
        </p>
        <p>
            <label for="passwd">密码:</label>
            <input type="password" name="pwd" value="" id="passwd">
        </p>
        <p>
            <input type="submit" value="登录">
        </p>
    </form>
    </body>
    </html>

模拟百度搜索

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        </style>
    </head>
    <body>
    <form action="http://www.baidu.com/s" method="get">     
        <input type="text" name="wd" value="" placeholder="请输入你要搜索的内容">    <!--placeholder 提示语-->
        <input type="submit" value="百度两下">
    </body>
    </html>

单选多选及文件上传及文本输入框

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        </style>
    </head>
    <body>
    <form action="http://www.baidu.com/s" method="post" enctype="multipart/form-data">  <!--如果上传文件需要设置enctype为multipart/form-data-->
        <p>       <!--单选-->
            <input type="radio" name="xingbie" value="男" checked = "checked">男    <!--checked 打开页面默认选中男-->
            <input type="radio" name="xingbie" value="女">女
        </p>
        <p>       <!--多选-->
            <input type="checkbox" name="xingbie" checked = "checked">抽烟    <!--默认多选2个checked-->
            <input type="checkbox" name="xingbie" checked = "checked">喝酒
            <input type="checkbox" name="xingbie" >烫头
        </p>
        <p>
            <h3>文件上传</h3>
            <input type="file" name="文件">
        </p>
        <p>
            <h3>当前时间</h3>
            <input type="date">
            <input type="time">
        </p>
        <p>
            <h3>下拉框单选</h3>
            <select name="richang" id="">
                <option value="eat">吃饭</option>
                <option value="sleep">睡觉</option>
                <option value="paly">打游戏</option>
            </select>
        </p>
               <p>
            <h3>下拉框多选</h3>
            <select name="richang" id="" multiple>
                <option value="eat">吃饭</option>
                <option value="sleep">睡觉</option>
                <option value="paly" selected>打游戏</option>    <!--selected默认选中-->
            </select>
        </p>
        <p>
            <h3>文本输入框</h3>
            <textarea name="wenben" id="" cols="35" rows="8"></textarea>
        </p>
    </form>
    </body>
    </html>

提交标签

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        </style>
    </head>
    <body>
    <form action="http://www.baidu.com/s" method="post" enctype="multipart/form-data">  <!--如果上传文件需要设置enctype为multipart/form-data-->
         <p>
             <input type="submit" value="登录">   <!--提交form表单-->
             <input type="button" value="注册">   <!--点击后不提交-->
             <button>注册2</button>                <!--在form内提交表单,在form外不提交-->
             <input type="submit" value="登录" disabled>  <!--带有disabled的选项不能使用-->
         </p>
    </form>
    </body>
    </html>

 audio和video 音频和视频

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        </style>
    </head>
    <body>
    <audio src="./周传雄 - 有没有一首歌会让你想起我.mp3" controls></audio>
    <video src="./见龙卸甲.MP4"></video>
    </body>
    </html>

表格

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table{            /*  设置表格属性  */
                border-collapse: collapse;
                width: 60%;
            }
        </style>
    </head>
    <body>
    <table border="1">
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>1</td>
            <td>wk</td>
            <td>17</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>ww</td>
            <td>18</td>
            <td>女</td>
        </tr>
    </table>
    </body>
    </html>

css

作用: 修饰网页的样式

css的三种引入方式

　　-行内样式　　　　

        <div class="box" style="color:red;">呵呵</div>    <!--行内选择器 在标签行内写style-->

　　-内接样式

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style >
        <!-- 在head里写style-->
        </style>
</head>

　　-外接样式

 

css的选择器

基本选择器

id选择器  标签选择器  类选择器

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style >
            /* 选择器: 他的作用是选中标签 */
            /* 标签选择器 */
            /* 行内样式1000>id选择器100>类选择器10>标签选择器1 */
            div {
                color: red;
            }
            /*id选择器 , id是惟一的不能重复*/
            #aa{
                color: yellow;
            }
            /*类选择器,可以设置相同的类名*/
            .aa{
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="box" style="color:red;">呵呵</div>    <!--行内选择器-->
        <div class="aa" id="aa">嘻嘻</div>
    </body>
    </html>

重置样式

https://meyerweb.com/eric/tools/css/reset/

高级选择器

后代选择器 子代选择器  

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style >
             /* 后代选择器*/
            .aa p{          /* 在类选择器后边空格加上标签就是后代选择器*/
                color: red;
            }
             /*子代选择器*/
            .cc>p{             /* 在类选择器后边加上>加上标签就是子代选择器 子代选择器只能选择下一级*/
                color: green;
            }
            .aa>.bb>.cc>p {    /*子代选择器可以多层叠加选择*/
                color: blue;
            }
            /*
            后代选择器和子代选择器的权重, 累加选择器的数量
            id选择器的数量>类选择器的数量>标签的数量  数量多的权重高
            #ww .bb p    1个id  1个类 1个标签
            #ww div .cc p  1个id 1个类 2个标签    这个权重最高
            .aa>.bb>.cc>p    3个类 1个标签
            #ww #ss #xx 这样形式的和上边的区别是最后没有选中标签,因此它的权重为0没有可比性
            因此 前提的选中标签,然后看权重,权重越大优先级越高.
            同是没选中的,谁描述的距离标签越近谁的优先级越高
            #ww .bb
            .aa #xx     这个权重高因为id为xx离p标签最近
            如果同是没选中的,同是描述的距离一样.则数权重
            #ww #xx    这个权重高
            .aa #xx
            */
        </style>
    </head>
    <body>
        <div class="aa" id="ww">
            <div class="bb" id="ss">
                <div class="cc" id="xx">
                    <p>嘻嘻</p>
                </div>
            </div>
        </div>
    </body>
    </html>

组合选择器

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style >
            /* 组合选择器*/
            body,div,h1,h2,h6,form,dl,dd,ul,a{
                margin: 0;          /* 重置样式 */
                padding: 0;
            }
            ol,ul{
                list-style: none;   /*去掉ol和ul前边的点和数字*/
            }
            *{                       /* 通配符所有标签 一般不用*/
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;   /*取消a标签的下划线*/
                color: red;
            }
            a:hover{                      /* a.hover 当鼠标悬浮在a上时*/
                text-decoration: underline;   /* 加上下划线 */
                color: #333333;              /* 改变a标签的字体颜色  */
            }
        </style>
    </head>
    <body>
        <div class="aa" id="ww">
            <h1></h1>
            <h2></h2>
            <h6></h6>
            <form action=""></form>
            <a href="">百度</a>
            <dl>
                <dd>
                    <ul>
                    </ul>
                </dd>
            </dl>
        </div>
    </body>
    </html>

input相关的css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
    input{
        border: 0;/*清除边框*/
        outline: 0; /*清除鼠标选中时显示的外线*/
        border: 1px solid #ff6700;    /* 1px为边框线的粗细 solid实线的 #ff6700颜色 */
        height: 20px;
        border-radius: 10px ;    /*半径为10px的圆角形输入框*/
    }
    </style>
</head>
<body>
<form action="">
    <input type="text">
</form>
</body>
</html>

盒模型 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
    .aa{
        width: 200px;
        height: 200px;
        padding: 20px;   /* 上下左右再多加20px 的填充 等于长宽为240,240 */
        background-color: #ff6700;
        margin-left: 20px;   /*向右移动20px*/
        border: 10px solid darkgoldenrod;  /* 在 盒子外加上边框,线条粗细10px 实心 颜色*/
    }
    </style>
</head>
<body>
<div class="aa">

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

 盒子线性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /*线性的粗细 线性的样式  线性的颜色*/
            /*border: 1px solid darkcyan;*/
            /*1个值 表示上下左右*/
            /*2个值 表示上下  左右*/
            /*3个值 表示上 左右 下*/
            /*4个值 表示上右下左*/
            /*border-width: 10px 5px 10px 4px;*/
            /*border-style: solid double dashed dotted;*/
            /*border-color: #ff6700 darkblue;*/

            /*border-left: 1px solid green;*/
            /*border-right: 1px solid green;*/
            /*border-top: 1px solid green;*/
            /*border-bottom: 1px solid green;*/
        }
    </style>
</head>
<body>
   <div class="box"> </div>
</body>
</html>

通过盒子制作三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 0;           /*盒子宽高设为0*/
            height: 0;
            border-top: 20px solid black;   /*盒子上边线设为20px 实线 黑色*   此时为下三角形, 上三角形为bottom* /
            border-right: 20px solid transparent; /* 左右为 20px 实线无色*/
            border-left: 20px solid transparent;
        }
    </style>
</head>
<body>
   <div class="box"> </div>
</body>
</html>

盒子移动

padding:内边距,主要描述的父子盒子之间调整位置

margin:外边距 描述兄弟间的距离  前提标准文档流下垂直方向会出现塌陷问题(解决塌陷问题,两个盒子距离空出距离只用margin-top或margin-bottom)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            display: inline-block;    /*把盒子变为行内块*/
            padding: 20px;
        }
        .box{
            background-color: red;
            margin-right: 10px;              /*盒子右侧空出10px*/
        }
        .ww{
            background-color: green;
            margin-left: 20px;          /*盒子左侧空出20px*/
        }
    </style>
</head>
<body>
    <div class="box"> </div>
    <div class="ww"> </div>
</body>
</html>

浮动 float

none left right 

效果:1.贴边 2.脱离标准文档流(不在页面占位置) 3.收缩 

带来的问题:子盒子浮动,会脱离标准文档流,他们不在页面上占位置,子内容撑不起父盒子的高度

清除浮动:

作用:实现盒模型并排   要浮动一起浮动,有浮动清除浮动(不清除浮动,下边的内容会顶上来)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 50px;
            background-color: black;
            float: left;

        }
        .ww{
            width: 200px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .aa{
            width: 300px;
            height: 150px;
            background-color: green;
            float: left;
        }
        .box:before{             /*在dev前加上文字 颜色,字体大小 行级添加*/
            content: '一号';
            color: blue;
            font-size: 20px;
        }
        .box:after{
            content: '盒子';   /*在dev后加上文字 颜色,字体大小*/
            color: blue;
            font-size: 20px;
        }
        .aaa:after{              /*清除浮动,官方写法*/
            content: '';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
<div class="father  aaa">
    <div class="box"> </div>
    <div class="ww"> </div>
    <div class="aa"></div>
</div>
</body>
</html>

文本超出部分显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        p{          /*给文本标签加上以下三行*/
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="aa">
        <p>asdasdsadsadsfsdfsdffsdfsdfsdfsafsadfsfsadfdsfsadsdfsdafdsfdsfdsf</p>
    </div>
</body>
</html>

小米商城头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bb{
            background-color: #333;
            height: 40px;
            line-height: 40px;
            font-size: 12px;   /*div内字体大小*/
        }
        .top{
            width: 1226px;
            height: 100%;
            margin: 0 auto;  /*居中*/
        }
        .top1{
            float: left;
            width: 600px;
            height: 40px;
        }

        .top3{
            height: 40px;
            float: right;
        }
        .top2{
            height: 40px;
            float: right;
        }
        a{
            color: #b0b0b0;
            text-decoration: none;   /* 取消a标签内容的下划线 */
        }
        .aa{
            color: #424242;
            margin: 0.5em;   /*margin 设置左右间隔大小 1em的大小是字体的大小(字体设置的是12px),em随字体大小变化而变化 */
        }
        a:hover{
            text-decoration: underline;
            color: white;
            background-color: #333333; /*字体背景色*/
        }
    </style>
</head>
<body>
<div class="bb">
    <div class="top">
        <div class="top1">
            <a href="">小米商城</a>
            <span class="aa">|</span>
            <a href="">中米商城</a>
            <span class="aa">|</span>
            <a href="">大米商城</a>
            <span class="aa">|</span>
            <a href="">老米商城</a>
            <span class="aa">|</span>
            <a href="">幼米商城</a>
            <span class="aa">|</span>
            <a href="">子米商城</a>
        </div>
        <div class="top3" >
            <a href="">购物车(<span class="shop">0</span>)</a>
        </div>
        <div class="top2">
            <a href="">登录</a>
            <span class="aa">|</span>
            <a href="">注册</a>
            <span class="aa">|</span>
            <a href="">消息通知</a>
            <span class="aa">|</span>
        </div>
    </div>
</div>

</body>
</html>

 display 

none    空

inline    转为行内模式

block    转为块

inlin-block    转为行内块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            display: block;       /*把a标签变为块级标签*/
            width: 300px;
            height: 300px;}
        img{
            width: 300px;
            height: 300px;}
        ul{
            list-style-type: none;
        }
        ul li{
            display: inline-block; /*把li行内标签变为行内块*/
            width: 200px;        /*改外行外标签可以设置宽高*/
            height: 100px;
            text-align: left;   /*左对齐*/
            font-size: 12px;      /*设置字体大小*/
            text-indent: 2em;   /*缩进两个字符*/
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">
            <img src="123.jpg" alt="">
        </a>
    </div>
    <ul>
        <li>小米</li>
        <li>红米</li>
        <li>白米</li>
        <li>绿米</li>
    </ul>
</body>
</html>

 定位   position

static 默认静态定位

relative  相对定位   特点:不脱标 层级提高 压盖现象

absolute   绝对定位   特点: 脱标   层级提高 压盖现象 

fixed   固定定位 特点:脱标 层级提高 固定位置 ,参考点以浏览器的左上角(作用:小广告,回到顶部,固定导航栏)

 

绝对和相对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
        }
        .father{
            width: 600px;
            height: 600px;
            border: 1px solid darkorange;
        }
        .box{
            background: red;
            position: absolute;   /*绝对定位 以网页左上顶点为参考点 ,如果以bottom描述则是以浏览器左下角为参考点 如果
                                  父元素设置相对定位,子元素设置绝对定位,那么以父元素左上角为参考点*/
            top: 40px;
            left: 230px;
        }
        .box1{
            background: green;
            position: relative;   /*相对定位  参考点为原来的位置*/
            /*只有使用定位  才能使用top bottom left right*/
            top: 20px;
            left: 40px;
        }
        .box2{
            background: yellow;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

 固定位置

<!DOCTYPE html>
<html lang="en">
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body{
        padding-top: 60px;
    }
    .back_top{
        width: 100px;
        height: 100px;
        line-height: 100px;            /*行宽高*/
        text-align: center;                 /*文本居中*/
        font-size: 20px;                /*字体大小*/
        font-weight: 700;                  /*字体粗细*/
        color: yellow;
        background: darkturquoise;   /*背景色*/
        position: fixed;                /*固定位置*/
        bottom: 20px;                   /**距离底部20px*/
        right: 100px;　　　　　　　　　　
    }
    #fixed{
        width: 100%;
        height: 60px;
        background: darkorange;
        position: fixed;    /*位置固定*/
        top: 0;
        left: 0;
        z-index: 99999;  /*设置图像的堆叠顺序.越高越考上,(只有定位的盒子才有z-index)*/

    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height: 2000px;">
    <div id="top"></div>
    <div id="fixed"></div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <div class="back_top">
        <a href="#top">回到顶部</a>
    </div>

</body>
</html>

z-index

1只有定位的盒子才有z-index,定位的盒子的层级一定大于标准文档流下的盒子

2同是定位的盒子,z-index默认为0  后设置的掩盖住前面的,

3.z-index值越大,优先级越高

4.从父现象,父亲怂了,儿子再牛逼也没用

 backgroud-repeat 背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            width: 100%;
            height: 3000px;
            background-image: url("./tupian.jpg") ;    /*背景图片*/
            background-repeat: repeat;   /*默认平铺*/
            background-repeat: repeat-x;   /*横向平铺*/
            background-repeat: repeat-y;  /*纵向平铺*/
            background-repeat: no-repeat;    /*只显示一个图片*/
            background-position: 20px 50px;   /*调整背景图的位置 向右20px 向下50px*/
            background-position-x: -40px;
            background-position-y: -50px;
            background-image: url("./tupian.jpg") no-repeat -40px -50px;  /*可以用一句话代替上边的*/
        }
    </style>
</head>
<body>
    <div class="aa">

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

 

 

 

 

 

posted on 2019-02-06 15:23  临渊慕鱼不如退而结网  阅读(459)  评论(0)  编辑  收藏  举报
Copyright © 2024 临渊慕鱼不如退而结网
Powered by .NET 8.0 on Kubernetes Powered By: 博客园