当前位置：移动技术网 > IT编程>网页制作>CSS > 前端（四）

前端（四）

2018年12月08日 | 移动技术网IT编程 | 我要评论

前端之常用标签的使用、边界圆角、精灵图以及盒模型的布局

前言

上篇博客介绍了组合选择器，包括四种，分别是群组选择器、后代（子代）选择器、兄弟（相邻选择器）及交集选择器；a 标签的四大伪类选择器，a:link、a:hover、a:active、a:visited，其中 hover 和 active 也可以用于其他标签，索引选择器包括三种

<!-- 先位置后类型 -->
div:nth-child(1) 
<!-- 先类型后位置 -->
div:nth-of-type(1)
<!-- 取反，先找到有 abc 和 div 类的标签，然后取反-->
.div:not([abc])

最后介绍了最最重要的盒模型，盒模型由四部分组成由内到外分别是：content+padding+border+margin，其中 content+padding+border 参与盒子显示，margin 参与盒子布局。

常用标签的使用

<!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 {
            /*根据需求,是指定高还是指定宽,设置一个,另一个会等比缩放*/
            /*width: 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>

边界圆角

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>边界圆角</title>
    <style type="text/css">
        .box {
            width: 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>

背景样式

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景样式</title>
    <style type="text/css">
        .box, .wrap {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .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: 10px 40px;

            /*整体设置*/
            background: url('img/123.png') red no-repeat 50px 50px;
        }
        /*注: 实际开发中,资源图片大小一定要与显示区域等大*/
    </style>
</head>
<body>
    <img src="img/123.png" alt="">
    <div class="box"></div>
    <div class="wrap"></div>
</body>
</html>

精灵图

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>精灵图</title>
    <style type="text/css">
        .box {
            width: 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 {
            width: 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>

盒模型布局

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型布局细节</title>
    <style type="text/css">
        .sup {
            width: 500px;
            height: 100px;
            background: orange;
        }
        .sub {
            width: 50px;
            height: 50px;
            background-color: red;
        }
        /*sub在sup中 水平居中*/
        .sub {
            /*margin-left: auto;
            margin-right: auto;*/
            margin: 0 auto;
        }
        /*垂直居中*/
        .sub {
            margin-top: 24px;
        }
        /*margin坑: 父子联动*/
        /*.box {
            width: 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>

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

CSS3 - 文本超出隐藏显示省略号（单行 / 多行）

单行如果实现单行文本的溢出显示省略号（…）应该都知道用 text-overflow:ellipsis 属性来，当... [阅读全文]
css counter计数器与content总结

content属性早在css2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。content属性现在已经得到大部分浏览器的支持，关于... [阅读全文]
前端学习笔记（6）之css盒模型的细节知识点汇总

css盒模型细节知识点总结只要元素有浮动，尽量保证浮动元素都在一个父元素里面。高度塌陷：子元素浮动，而父元素未设... [阅读全文]
前端学习笔记（4）之css背景属性合集

背景模块背景颜色background-color背景图：background-image：url（）；背景图平铺... [阅读全文]
PC端页面适配到移动端的问题(自动缩放PC端页面)

有时候在移动端开发页面的时候会发现因为移动端分辨率大导致页面视图被缩放的很小,这个时候就需要适配了话不多说直接贴... [阅读全文]
新版知乎x-zse-86加密破解分析

知乎x-zse-86加密破解新版知乎加密破解仅用于研究和学习使用新版本知乎使用headers中的x-zse-86... [阅读全文]
Flex 使用场景(二）

Flex 就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴，可以说 flex 布... [阅读全文]
css3实现边框圆角内凹效果

我们知道在边框的四个角实现圆角可以用 border-radius 实现, 如果在边框中心实现边框的内凹效果呢?效... [阅读全文]
【css】利用line-height实现垂直居中

替换元素与非替换元素<body> <div>hello</div> &l... [阅读全文]
通过鼠标使图片交替显示

伪类 after、before、hovercss代码使用的是预编译less，简单分享：就是固定框200*200，... [阅读全文]