zoukankan      html  css  js  c++  java

  • 2018.12.7边界圆角redius,背景图设置,平铺,精灵图,盒子伪类索引

    一选择器复习

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>复习预习</title>
    </head>
    <body>
        复习预习
        <!-- 1.组合选择器 -->
        <!-- 群组选择器: 
            div, #div, .div {
                该样式块同时控制多个(div, #div, .div)
            }
            每一个选择器位均可以为基础选择器中的一个(也可以为任意组合选择器)
            
            h类的标签的reset操作(去除系统默认样式)
            html, body, h1, h2, h3, h4, h5, h6 {
                margin: 0
            }
         -->
         <!-- 后代(子代)选择器:
            // ①
            <div class="sup">
                <div class="sub"></div>
            </div>
            // ②
            <div class="sup">
                <div class="box">
                    <div class="sub"></div>
                </div>
            </div>
    ​
    ​
            // *****可以控制①②
            .sup .sub {
                sup一定是sub的父代(不一定是父级,sub就是被sup直接嵌套)
            }
            
            // 只可以控制①
            .sup > .sub {
                sup一定是sub的父级
            }
            
          -->
          <!-- 兄弟(相邻)选择器:
            // ①
            <div class="up"></div>
            <div class="down"></div>
            // ②
            <div class="up"></div>
            <div class="box"></div>
            <div class="down"></div>
            
            // 兄弟 控制①②
            .up ~ .down {
                
            }
            // 相邻 控制①
            .up + .down {
                
            }
    ​
           -->
    ​
            <!-- 交集选择器:
            <div class="div box"></div>
            <div class="div"></div>
            <div></div>
            
            div.div.box {
                增强精确度(提升优先级)
            }
            body .div.box {
                优先级只与选择器个数(种类)有关
            }
    ​
             -->
    ​
        <!-- 2.伪类选择器 -->
        <!-- a的四大伪类
        a:link
        a:hover
        a:active
    `   a:visited
    ​
        div:hover
        div:active
         -->
    ​
        <!-- 索引
        div:nth-child(1) 先位置后类型
    ​
        div:nth-of-type(1) 先类型后位置
    ​
        <div>
            <p></p>
            <span></span>
            <span>目标</span>
            <span></span>
        </div>
         -->
    ​
         <!-- 取反:
        // :not()
        .div:not([abc])
    ​
        <div class="div"></div>
        <div class="div" abc></div>
        <div class="div"></div>
        
          -->
    ​
          <!-- 盒模型:
    ​
            content + padding + border + margin
    ​
            盒子显示: content padding border 
            盒子布局: margin
           -->
    ​
        <!-- 今日内容:
        常用标签的使用: a | img | 列表标签 | meta | link
        背景样式的使用(背景图片 精灵图) *****
        边界圆角样式
        盒子布局的总结(细节) *****
        css样式的补充
        w3c页面的书写
         -->
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div id="md">锚点</div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </body>
    </html>

    二常用标签的使用(锚点)


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>常用标签的使用</title>
    ​
        <!-- SEO -->
        <!-- <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语"> -->
        <!-- <meta name="description" content="80字以内的一段话，与网站内容相关"> -->
        <!-- 移动适配 -->
        <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
        
        <link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico">
    ​
        <style type="text/css">
            .img {
                /*根据需求,是指定高还是指定宽,设置一个,另一个会等比缩放*/
                /* 200px;*/
                height: 100px;
            }
            
            /*四个伪类*/
            /*reset操作*/
            a {
                color: #333;
                text-decoration: none;
            }
    ​
            /*ul的reset操作*/
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
                /*margin-left: 40px;*/
            }
        </style>
    </head>
    <body>
        <!-- 1.设置锚点: 锚点名page_top -->
        <a href="" name="page_top"></a>
    ​
        <img class="img" src="./img/timg.jpg" alt="">
    ​
        <a href="00_复习预习.html">前往00页面</a>
        <!-- 前往本页面中个某个位置: Top => 锚点 -->
        <!-- 1.设置锚点 2.设置前往锚点的a转跳 -->
    ​
        <ul>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ul>
    ​
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <!-- 通配标签页可以设置锚点 -->
        <!-- <a href="" name="t_123"></a> -->
        <div id="t_123">123</div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <!-- 2.设置前往锚点的a转跳: #锚点名 -->
        <a href="#page_top">Top</a>
        <a href="#t_123">123</a>
        <a href="00_复习预习.html#md">前往锚点</a>
    </body>
    </html>

    三radius边界圆角


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>边界圆角</title>
        <style type="text/css">
            .box {
                 200px;
                height: 200px;
                background-color: orange;
            }
            .box {
                /*边界圆角*/
    ​
                /*百分比控制*/
                /*border-radius: 50%;*/
    ​
                /*实际像素控制*/
                /*border-radius: 20px;*/
    ​
                /*横纵分离  横 / 纵*/
                /*border-radius: 20px / 50%;*/
    ​
                /*左上为第一个角, 顺时针赋值, 无值找对角*/
                /*左上横30px 右上横100px 右下横=左上横 左下横=右上横, 四角纵向全是50%*/
                /*border-radius: 30px 100px / 50%;*/
                
                /*单独设置时, 横向 纵向*/
                /*border-top-left-radius: 50% 100%;
                border-top-right-radius: 50% 100%;*/
                
                border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

    4背景样式(repeat平铺,background图片设置)


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>背景样式</title>
        <style type="text/css">
            .box{
                 200px;
                height: 200px;
                /**/
                background: red;
            }
            .wrap {
                /*图片过大会显示不全*/
                background-image: url('img/timg.jpg');
                /*规定背景图片显示尺寸*/
                background-size: 200px 200px;
            }
            .box {
                /*图片过小会平铺*/
                background-image: url('img/123.png');
                /*平铺:repeat-x | repeat-y | repeat | no-repeat*/
                background-repeat: no-repeat;
                /*位置(定位): 可以写具体数值,也可以写位置单词*/
                /*background-position: 10px center;*/
                /*background-position: right bottom;*/
                /*background-position: center center;*/
    ​
                /*设置一个值时,控制的是x轴,y轴取center*/
                /*设置;两个值时,第一个值控制x,第二个值控制y*/
                /*background-position: 20px 20px;*/
    ​
                /*整体设置*/
                background: url('img/123.png') orange no-repeat 60px 60px;
            }
            /*注: 实际开发中,资源图片大小一定要与显示区域等大*/
        </style>
    </head>
    <body>
        <!-- <img src="img/123.png" alt=""> -->
        <div class="box id"></div>
        <!-- <div class="wrap"></div> -->
    </body>
    </html>

    5精灵图


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>精灵图</title>
        <style type="text/css">
            .box {
                 500px;
                height: 100px;
                /*height: 300px;*/
                border: 5px solid black;
            }
            .box {
                background-image: url('img/bg.png');
                background-position: 0 -150px;
            }
            .box:hover {
                cursor: pointer;
                background-position: 0 -250px;
            }
            /*1.显示区域一定要与精灵图目标小图大小一致*/
            /*2.通过背景图片定位方式将目标小图移至显示位置*/
        </style>
    ​
        <style type="text/css">
            .lt1 {
                 155px;
                height: 48px;
                background: url('img/bg.png') no-repeat 0 0;
            }
            .lt1:hover {
                cursor: pointer;
                background: url('img/bg.png') no-repeat 0 -48px;
            }
        </style>
    </head>
    <body>
        <!-- 精灵图: 各种小图拼接起来的一张大图 -->
        <!-- 为什么使用精灵图: 减少请求次数, 降低性能的消耗, 二次加载图片资源时极为迅速(不在需要发送请求) -->
        <div class="box"></div>
        <div class="lt1"></div>
    </body>
    </html>

    六盒模型布局细节(margin坑: 父子联动)


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>盒模型布局细节</title>
        <style type="text/css">
            .sup {
                 500px;
                height: 100px;
                background: orange;
            }
            .sub {
                 50px;
                height: 50px;
                background-color: red;
            }
            /*sub在sup中 水平居中*/
            .sub {
                /*margin-left: auto;
                margin-right: auto;*/
                margin: 0 auto;
            }
            /*垂直居中*/
            .sub {
                margin-top: 24px;
            }
            /*margin坑: 父子联动*/
            /*.box {
                 1px;
                height: 1px;
            }*/
            /*解决一: 设置border-top*/
            .sup {
                /*border-top: 1px solid transparent;
                height: 99px;*/
            }
            /*解决二: 设置padding-top*/
            .sup {
                padding-top: 1px;
                height: 99px;
            }
    ​
    ​
            /*margin坑: 上兄弟margin-bottom与下兄弟margin-top重合, 取大值*/
            /*解决方案: 只设置一个,建议设置下兄弟margin-top*/
    ​
            /*margin布局: 下盒子的垂直起始位置决定于同结构中上盒子的margin结束位置;水平起始位置就是父级content最左侧*/
        </style>
    </head>
    <body>
        <div class="sup">
            <!-- <div class="box"></div> -->
            <div class="sub"></div>
        </div>
    </body>
    </html>

    六.1盒模型案例(nth-child)


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>盒模型案例</title>
        <style type="text/css">
            /*reset*/
            body, h1, ul {
                margin: 0;
                padding: 0
            }
            ul {
                list-style: none;
            }
            a {
                color: #333;
                text-decoration: none;
            }
        </style>
        <style type="text/css">
            .main {
                 1210px;
                height: 500px;
                background: orange;
                margin: 0 auto;
            }
            .nav {
                 1210px;
                margin: 0 auto;
                height: 48px;
            }
            .nav_a {
                /*a标签就支持宽高,并且可以嵌套其他标签*/
                display: block;
                height: 48px;
                background: red
            }
            li:first-child .nav_a {
                background: blue;
                 155px;
            }
            li:nth-child(2) .nav_a {
                background: pink;
                 150px;
                margin-left: 155px;
                margin-top: -48px;
            }
            li:nth-child(3) .nav_a {
                background: green;
                 100px;
                margin-left: 305px;
                margin-top: -48px;
            }
        </style>
    </head>
    <body>
        <!-- ul.nav>(li>a.nav_a)*7 -->
        <ul class="nav">
            <li>
                <a class="nav_a" href=""></a>
            </li>
            <li>
                <a class="nav_a" href=""></a>
            </li>
            <li><a class="nav_a" href=""></a></li>
            <li><a class="nav_a" href=""></a></li>
            <li><a class="nav_a" href=""></a></li>
            <li><a class="nav_a" href=""></a></li>
            <li><a class="nav_a" href=""></a></li>
        </ul>
        <div class="main"></div>
    </body>
    </html>
  • 相关阅读:
    kali 无线网络渗透测试
    kali 漏洞扫描
    Python复杂多重排序
    《编写高质量代码：改善Python程序的91个建议》读后感
    Python用format格式化字符串
    CDH安装Hadoop
    Python设计模式——状体模式
    HBase的安装与使用
    Python设计模式——观察者模式
    Python设计模式——建造者模式
  • 原文地址：https://www.cnblogs.com/jutao/p/10105056.html
Copyright © 2011-2022 走看看