CSS-css样式-2

CSS样式-2

border 边框

用于给标签设置边框。

<div style="border: 1px solid #333333;"></div>
<div style="border: 1px solid #333333;"></div>
<div style="border: 2px solid #333333;"></div>
<div style="border: 1px dotted red;"></div>
<div style="border: 1px dotted goldenrod;"></div>
<div style="border: 3px dotted goldenrod;border-right: 0"></div>

border-radius也可以设置圆角边框。

background 背景

background用于设置标签背景，关于background的常用功能有：

background-color，设置背景颜色
backgroud-imgage，设置背景图片
background-repeat，背景图片如何重复
background-postion，背景图片位置

<style>
.search {
    display: inline-block;width: 40px;height: 40px;
    border: 1px solid #9d9d9d;
    background-image: url("https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_sousuo1.adc352a.png");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.car {
    display: inline-block;width: 32px;height: 32px;
    border: 1px solid #9d9d9d;
    background-image: url("https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_5.png");
    background-repeat: no-repeat;
    background-position: -105px -110px;
}

.phone {
    display: inline-block;width: 24px;height: 24px;
    border: 1px solid #9d9d9d;
    background-image: url("https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_5.png");
    background-repeat: no-repeat;
    background-position: -154px -176px;
}
</style>

cursor 光标

cursor指鼠标放在标签上之后显示的形状。

<div>我是你永远的得不到的爸爸。</div>
<div style='cursor: pointer;'>我去你麻辣个鸡。</div>
<div style='cursor: help;'>你是个傻吊吗？。</div>
<div style='cursor: move;'>不，我是个傻爹？。</div>

position 定位

position用于对屏幕上的标签进行定位，定位相关知识点可以分为两种：

1.position:fixed，生成绝对定位的元素，相对于浏览器窗口进行定位。例如最常见的广告位和返回顶部，都是基于它来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        body{
            margin: 0;
        }
        .back-top{
            width: 45px;
            height: 45px;
            border: 1px solid #dddddd;
            background-color: white;
            position: fixed;
            right: 2px;
            bottom: 100px;
            font-size: 12px;
            text-align: center;
            color: #757575;
        }
        .back-top img{
            display: block;
            width: 20px;
            margin: 3px auto;
        }
    </style>
</head>
<body>
    <div style="height: 48px;background-color: black"></div>
    <div style="height: 500px;background-color: #f5f5f5;"></div>
    <div style="height: 500px;background-color: white;"></div>
    <div style="height: 500px;background-color: #f5f5f5;"></div>
    <div class="back-top">
        <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_backtop.png" alt="">
        回顶部
    </div>
</body>
</html>

2.position:absolute ，生成绝对定位的元素，多用于第一个父元素进行定位，常与position:relative结课使用。例如：想要让某标签相对某指定标签位置显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="shortcut icon" href="img/favicon.ico">
    <style>
        body {
            margin: 0;
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
        }
        .container {
            width: 1190px;
            margin: 0 auto;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .header {
            height: 40px;
            line-height: 40px;
            background-color: #333;
            color: #b0b0b0;
            font-size: 12px;
        }
        .header .menus ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .header .menus ul li {
            float: left;
        }
        .header .menus a, .header .account a, .header .car a {
            text-decoration: none;
            display: inline-block;
            padding: 0 5px;
        }
        .header .menus .app {
            position: relative;
        }
        .header .menus .app .download {
            padding: 10px;
            background-color: white;
            border: 1px solid #dddddd;
            position: absolute;
            left: 5px;
            top: 40px;
        }
        .header .menus .app .download img {
            display: block;
            width: 80px;
            height: 80px;
        }
        .header .menus .app .download div {
            margin-top: 5px;
            line-height: 20px;
            text-align: center;
        }
        .header .car a {
            display: inline-block;
            height: 40px;
            padding: 0 15px;
            margin-left: 20px;
            background-color: #424242;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="menus">
            <ul>
                <li><a>小米商城</a></li>
                <li><a>MIUI</a></li>
                <li><a>IoT</a></li>
                <li><a>云服务</a></li>
                <li class="app">
                    <a>下载app</a>
                    <div class="download">
                        <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png" alt="">
                        <div>快来扫码下载</div>
                    </div>
                </li>
                <li><a>规则协议</a></li>
            </ul>
        </div>
        <div class="car right"><a>购物车（0）</a></div>
        <div class="account right">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>
</body>
</html>

如果在使用absolute定位时，找不到特定的父级标签，absolute根据整个页面大小的进行定位。

fixed，只能根据浏览器窗口进行定位，将标签固定在浏览器窗口的某个位置。
absolute，可结合relative实现相对定位；也可单独使用，将标签固定页面的某个位置。

opacity 透明度

给标签设置透明度，例如：常见的加载、登录框等显示都是基于它实现。

实现思路：

基于z-index属性把页面分为三层：最底层是文章、中间层是黑色遮罩、最上层是登录框。
为中间的黑色遮罩设置透明度，否则无法看到最底层，透明度值范围：0~1，越大越不透明，例如：

filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */

/*使用这种*/
opacity: 0.5; /* 支持opacity的浏览器*/

对话框示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .container{
            width: 980px;
            margin: 0 auto;
        }
        .header{
            height: 48px;
            background-color: #499ef3;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.7;
        }
        .login{
            width: 400px;
            height: 300px;
            background-color: white;
            border: 1px solid #dddddd;
            position: fixed;
            top: 60px;
            left: 50%;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="body">
        <div class="container" style="text-align: center">
            <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_big_girl.png" alt="">
        </div>
    </div>
    <!--遮罩层-->
    <div class="shade"></div>
    <!--登录框-->
    <div class="login">
        <h2 style="text-align: center">用户登录</h2>
    </div>
</body>
</html>

hover 伪类

hover伪类作用：当鼠标放在标签上时，可以能够设置一些样式。

1.鼠标放在标签上方，标签特殊显示。

.header .menus a:hover{
    color: white;
    background-color:#424242 ;
}

2.鼠标放在标签上方，显示额外菜单。

<li class="app">
    <a>下载app</a>
    <div class="download">
        <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png" alt="">
        <div>快来扫码下载</div>
    </div>
</li>

.header .menus .app .download {
    padding: 10px;
    background-color: white;
    border: 1px solid #dddddd;
    position: absolute;
    left: 5px;
    top: 40px;
    display: none;
}

.header .menus .app:hover .download{
    display: block;
}

after 伪元素

after伪元素作用：在自己内部标签底部设置元素。

1.在标签后面设置文字。

li:after{
    content: 'dfh';
    color: green;
    font-weight: 500;
}

2.在标签后添加标签，解决float脱离文档流的问题，不用再额外手动添加标签了。

学习after伪元素之后，再处理脱离文档流的问题时候，

只需要为父标签应用 clearfix样式即可（严重推荐）。

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}

<div class="row clearfix">

posted @ 2020-06-07 21:01 Hedger_Lee 阅读(169) 评论(0) 编辑收藏举报

刷新页面返回顶部

Hedger_Lee