美文网首页
前端笔记(6)

前端笔记(6)

作者: rtrhhthth | 来源:发表于2018-07-11 20:20 被阅读0次

    代码：
    1.元素的层级

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的层级</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            z-index: 2;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*开启绝对定位*/
            position: absolute;
            /*设置偏移量*/
            top: 100px;
            left: 100px;
            /*
            如果定位元素的层级是一样，则下边的元素会盖住上边的
            通过z-index属性可以用来设置元素的层级
            可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
            
            对于没有开启定位的元素不能使用z-index
            */
            z-index: 25;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            /*position: relative;
            z-index: 3;*/
            position: absolute;
            top: 200px;
            left: 200px;
            z-index: 30;
            /*
            设置元素的透明背景
            opacity可以用来设置元素背景的透明，它需要一个0-1之间的值
                0 表示完全透明
                1 表示完全不透明
                0.5 表示半透明
            */
            opacity: 0.5;
            /*
            opacity属性在IE8及以下的浏览器中不支持
            IE8及以下的浏览器需要使用如下属性代替
                alpha(opacity=透明度)
            透明度，需要一个0-100之间的值
                0 表示完全透明
                100 表示完全不透明
                50 半透明
            这种方式支持IE6，但是这种效果在IE Tester中无法测试
            */
            filter: alpha(opacity=50);
        }
        .box4{
            width: 200px;
            height: 200px;
            background-color: orange;
            /*开启相对定位*/
            position: relative;
            /*父元素的层级再高，也不会盖住子元素*/
            z-index: 20;
            top: 500px;
        }
        .box5{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /*开启绝对定位*/
            position: absolute;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

    <div class="box4">
        <div class="box5"></div>
    </div>
</body>
</html>

    2.按钮的练习

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮练习</title>
    <style type="text/css">
    /*
    做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验
    产生问题的原因：
        背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
        但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
        我们这个练习，一上来浏览器只会加载link.png
        由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
        当hover被触发时，浏览器才去加载hover.png
        当active被触发时，浏览器才去加载active.png
        由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
    为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
    然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
    优点：
        1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
        2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
    */
        .btn:link{
            /*将a转换为块元素*/
            display: block;
            /*设置宽高*/
            width: 93px;
            height: 29px;
            /*设置背景图片*/
            background-image: url(../img/btn.png);
            /*设置背景图片不重复*/
            background-repeat: no-repeat;
        }
        .btn:hover{
            /*当是hover状态时，希望图片可以向左移动*/
            background-position: -93px 0px;
        }
        .btn:active{
            /*当是active状态时，希望图片再向左移动*/
            background-position: -186px 0px;
        }
    </style>
</head>
<body>
    <!-- 创建一个超链接 -->
    <a href="#" class="btn"></a>
</body>
</html>

    3.导航条

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电驴导航条</title>
    <style type="text/css">
        .box1{
            width: 990px;
            height: 50px;
            background-color: #bfa;
            margin: 50px auto;
            /*设置为背景图片*/
            background-image: url(img/bg.png);
            /*设置水平方向重复*/
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

    4.简写背景属性

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简写背景属性</title>
    <style type="text/css">
        body{
            height: 5000px;
            /*设置一个背景颜色*/
            /*background-color: #bfa;*/
            /*设置一个背景图片*/
            /*background-image: url(img/3.png);*/
            /*设置背景不重复*/
            /*background-repeat: no-repeat;*/
            /*设置背景图片的位置*/
            /*background-position: center center;*/
            /*设置背景图片不随滚动条滚动*/ 
            /*background-attachment: fixed;*/
            background-color: #bfa;
            /*background
                - 通过该属性可以同时设置所有背景相关的样式
                - 没有顺序的要求，谁在前睡在后都行
                - 也没有数量的要求，不写的样式就使用默认值
            */
            background: #bfa url(img/3.png) center center no-repeat fixed;
        }
    </style>
</head>
<body>
    
</body>
</html>

    5.给表格添加样式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
        table{
            /*设置表格的宽度*/
            width: 300px;
            /*居中*/
            margin: 0 auto;
            /*边框*/
            /*border:1px solid black;*/
            /*table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离*/
            /*border-spacing: 10px;*/
            /*
            border-collapse可以用来设置表格的边框合并
            如果设置了边框合并，则border-spacing自动失效
            */
            border-collapse: collapse;
            /*设置背景样式*/
            /*background-color: #bfa;*/
        }
        /*设置边框*/
        th, td{
            border: 1px solid black;
        }
        /*设置隔行变色*/
        tbody > tr:nth-child(even){
            background-color: #bfa;
        }
        /*鼠标移入到tr以后，改变颜色*/
        tr:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <!-- 
            可以使用th标签来表示表头中的内容，
            它的用法和td一样，不同的是它会有一些默认效果
             -->
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>住址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
    </table>
</body>
</html>

    6.背景偏移与定位

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景偏移与定位</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            /*width: 500px;*/
            height: 500px;
            margin: 0 auto;
            /*设置一个背景颜色*/
            background-color: #bfa;
            /*设置一个背景图片*/
            background-image: url(img/4.png);
            /*设置图片不重复*/
            background-repeat: no-repeat;
            /*
            背景图片默认是贴着元素的左上角显示
            通过background-position可以调整背景图片在元素中的位置
            可选值：
                该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
                top left 左上
                bottom right 右下
                如果只给出一个值，则第二个值默认是center
            也可以直接指定两个偏移量
                第一个值是水平偏移量
                    - 如果指定的是一个正值，则图片会向右移动指定的像素
                    - 如果指定的是一个负值，则图片会向左移动指定的像素
                第二个是垂直偏移量
                    - 如果指定的是一个正值，则图片会向下移动指定的像素
                    - 如果指定的是一个负值，则图片会向上移动指定的像素
            */
            /*background-position: -50px -50px;*/
            background-attachment: fixed;
        }
        body{
            height: 5000px;
            background-image: url(img/3.png);
            background-repeat: no-repeat;
            /*
            background-attachment用来设置背景图片是否随页面一起滚动
            可选值：
                scroll，默认值，背景图片随着窗口滚动
                fixed，背景图片会固定在某一位置，不随页面滚动
            不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
            */
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

    7.背景

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        .box1{
            width: 1024px;
            height: 724px;
            margin: 0 auto;
            /*设置背景样式*/
            background-color: #bfa;
            /*
            使用background-image来设置背景图片
            语法：background-image:url(相对路径);
            
            - 如果背景图片大于元素，默认会显示图片的左上角
            - 如果背景图片和元素一样大，则会将背景图片全部显示
            - 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
            
            可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色
            一般情况下设置背景图片时都会同时指定一个背景颜色
            */
            background-image: url(img/1.png);
            /*
            background-repeat用于设置背景图片的重复方式
            可选值：
                repeat，默认值，背景图片会双方向重复（平铺）
                no-repeat，背景图片不会重复，有多大就显示多大
                repeat-x， 背景图片沿水平方向重复
                repeat-y，背景图片沿垂直方向重复
            */
            background-repeat: repeat-y;
        }
    </style>

    <!-- <link rel="stylesheet" type="text/css" href="css/bgstyle.css"> -->
</head>
<body>
    <div class="box1"></div>
</body>
</html>

    8.表格的布局

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的布局</title>
</head>
<body>
    <!-- 
    以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
    表格的列数由td最多的那行决定
    表格是可以嵌套，可以在td中在放置一个表格
    -->
    <table border="1" width="100%">
        <tr height="100px">
            <td colspan="2"></td>
        </tr>
        <tr height="400px">
            <td width="20%"></td>
            <td width="80%">
                <table border="1" width="100%" height="100%">
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr height="100px">
            <td colspan="2"></td>
        </tr>
    </table>
</body>
</html>

    9.表格

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!-- 在HTML中，使用table标签来创建一个表格 -->
    <table border="1" width="40%" align="center">
        <!-- 在table标签中使用tr来表示表格中的一行，有几行就有几对tr -->
        <tr>
            <!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <!-- rowspan用来设置纵向的合并单元格 -->
            <td rowspan="2">B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>D1</td>
            <td>D2</td>
            <!-- colspan横向的合并单元格 -->
            <td colspan="2">D3</td>
        </tr>
    </table>
</body>
</html>
    1. 长表格
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长表格</title>
</head>
<body>
    <table>
        <!-- 
        有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
        在HTML中为我们提供了三个标签：
            thead 表头
            tbody 表格主体
            tfoot 表格底部
            
        这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
            
        thead中的内容，永远会显示在表格的头部
        tfoot中的内容，永远都会显示表格的底部
        tbody中的内容，永远都会显示表格的中间
        
        如果表格中没有写tbody，浏览器会自动在表格中添加tbody
        并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
        通过table > tr 无法选中行 需要通过tbody > tr
        -->
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>100</td>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

    二. 雪碧图的练习
    代码：

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪碧图</title>
    <style type="text/css">
        .box1{
            width: 129px;
            height: 48px;
            background-image: url(img/amazon-sprite_.png);
        }
        .box2{
            width: 42px;
            height: 30px;
            background-image: url(img/amazon-sprite_.png);
            /*设置偏移量*/
            background-position: -58px -338px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

    相关文章

      网友评论

          本文标题：前端笔记(6)

          本文链接：https://www.haomeiwen.com/subject/celkpftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|前端笔记(6)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！