前端之CSS

什么是CSS？

在标签上设置标签的style属性。

编写CSS的方法

一、直接在标签中写style属性。

二、在head标签中写style标签，这里就需要选择器选择所需的标签

1、id选择器，以#开头，例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    定义了id为i1的使用style-->
    <style>
        #i1{
        background-color:blue;
        }
    </style>
</head>
<body>

    <div>Treelight</div>
    <div id="i1">Alex</div>
    <div>Syvia</div>
    <div>HeMinLing</div>
</body>
</html>

2、类选择器，以.开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    定义了类名为c1标签的使用style-->
    <style>
        .c1{
        background-color:blue;
        }
    </style>
</head>
<body>
    <div>Treelight</div>
    <div>Alex</div>
    <div class="c1">Syvia</div>
    <div>HeMinLing</div>
</body>
</html>

3、标签选择器，例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    定义了span标签的使用style-->
    <style>
        span{
        background-color:blue;
        }
    </style>
</head>
<body>
    <div>Treelight</div>
    <div>Alex</div>
    <div>Syvia</div>
    <div>HeMinLing</div>
    <span>Diana</span>
</body>
</html>

4、层级选择器（空格分隔会从子子孙孙那里找，>会从儿子那里找）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    定义了div标签中的span标签的使用style（中间用空格分开）,标签可用以点开头的类或以#开头的id代替-->
    <style>
        div span{
        background-color:blue;
        }
    </style>
</head>
<body>
    <div>
        Treelight
        <span>30岁</span>
    </div>
    <div>Alex</div>
    <div>Syvia</div>
    <div>
        HeMinLing
        <span>18岁</span>
    </div>
</body>
</html>

5、组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    此处定义的标签或类或ID（用逗号分隔）均可用此style-->
    <style>
        div,span{
        background-color:blue;
        }
    </style>
</head>
<body>
    <div>
        Treelight
        <span>30岁</span>
    </div>
    <div>Alex</div>
    <div>Syvia</div>
    <div>
        HeMinLing
        <span>18岁</span>
    </div>
</body>
</html>

6、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    此处定义了具有属性n="30"的div标签可用此style，其中标签可用类或id代替-->
    <style>
        div[n="30"]{
        background-color:blue;
        }
    </style>
</head>
<body>
    <div n="30">
        Treelight
        <span>30岁</span>
    </div>
    <div>Alex</div>
    <div>Syvia</div>
    <div>
        HeMinLing
        <span>18岁</span>
    </div>
</body>
</html>

7、全选：*号选择器，通配选择器

8、E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; }

9、E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; }

10、属性选择器（可使用多个[][][]）

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
 
 
E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
 
 
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
 
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

11、且选择器：<选择器1><选择器2>，同时符合两个选择器的，不用符号分隔。如p.c1，选择的是p标签中class属性是c1的

12、伪类选择器（针对a标签）

a:link：尚未用过时的css

a:hover：悬浮时的css

a:active：点击时尚未放开鼠标

a:visited：已经访问过的

13、after、before选择器：

<选择器>:<after or before>{

　　content:...

}

作用：在选中的标签的子类追加content，也可以设置样式

优先级：

1、!import是最优先的

2、然后按照以下的规则来比较，主要是按权重来比较。如果是层级选择器，则要把所有层的权重加起来。

内嵌（即在标签中写style）(1000)>id(100)>class(10)>element(1)

括号内为权重

7、css还可存在于文件中，然后可在html的头标签中利用link标签，示例如下：

css样式文件

.c1{
background-color:red;}

.c2{
background-color:green;}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    此处引用了commons.css样式-->
    <link rel="stylesheet" href="commons.css">
</head>
<body>
    <div>
        Treelight
        <span>30岁</span>
    </div>
    <div class="c1">Alex</div>
    <div class="c2">Syvia</div>
    <div>
        HeMinLing
        <span>18岁</span>
    </div>
</body>
</html>

CSS中常用属性

一、border：设置边框的宽度、颜色、样式

二、height：标签高度，单位像素，不能使用百分比

三、width：标签宽度，单位可为像素或百分比

四、text-align:center：水平居中

五、line-height:<标签高度>：可实现垂直居中

六、color:red：字体颜色

七、font-size:num：字号

八、font-weight:bold：加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border:1px solid red;
height:50px;
width:400px;
text-align:center;
line-height:50px;
color:blue;
font-size:20px;
font-weight:bold">Treelight
</div>
</body>
</html>

九：float:<left><right>：使得块级标签可堆叠

clear:both：使用情况如下：如果父级标签没设置高度，此时可在子级标签（设置了浮动）下加上一个样式clear:both，清除浮动，此时可撑起父级标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:80%;background-color:red;float:left">Treelight</div>
    <div style="width:20%;background-color:blue;float:right">Alex</div>
</body>
</html>

十、display属性：

display:inline：使得块级标签有多少占多少

display:block：使得行内标签占一行

display:inline-block：使得标签有多少占多少；可以设置高度，宽度，padding margin

display:none：使得标签消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="display:inline;background-color:red">Treelight</div>
    <span style="display:block;background-color:blue">Alex</span>
</body>
</html>

默认情况下，行内标签无法设置高度、宽度等，但以下程序使用display则可实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span style="width:600px;height:100px;display:inline-block;background-color:blue">Alex</span>
</body>
</html>

十一、margin属性：外边距，就是标签的外边框与上一层标签之间的距离

关于父子div：
if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

解决办法：

父div中:overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height:60px;border:1px solid blue">
        <div style="margin:0px">Treelight</div>
    </div>
</body>
</html>

十二、padding属性：内边距，标签的内边框与标签内容的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height:60px">
        <div style="padding:10px;background-color:red;border:3px solid blue">Treelight</div>
    </div>
</body>
</html>

写html注意事项

1、应该在最外面设置绝对宽度（像素》，然后在里面用百分比

十三、postion属性

1、fixed：另起一层，可固定在页面的一个地方，参照物是当前窗口，脱离了文档流

案例一：返回顶部按钮固定在右下角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div style="height:800px;border: 1px solid red"></div>
<div style="position: fixed;bottom:5px;right:5px;background-color: black;color:white">返回顶部</div>
</body>
</html>

案例二：头部内容永远固定在页面的最上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .pg-header{
        height:48px;
        position:fixed;
        top:0;
        left:0;
        right:0;
        background-color:black;
        color:white
        }
        .pg-body{
        margin-top:53px;
        border:1px solid red;
        height:800px
        }
    </style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>

2、relative：相当于原来的位置定位，没有脱离文档流

2、absolute：脱离文档流，参照物是已定位（已经设置了position为absolute或relative）的父级标签

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width:980px;height:200px;margin:0 auto;position:relative;border:1px solid red;">
    <div style="background-color:black;
                position:absolute;top:0;left:0;
                width:50px;height:50px"></div>
</div>
<div style="width:980px;height:200px;margin:0 auto;position:relative;border:1px solid red;">
    <div style="background-color:black;
                position:absolute;top:0;right:0;
                width:50px;height:50px"></div>
</div>
<div style="width:980px;height:200px;margin:0 auto;position:relative;border:1px solid red;">
    <div style="background-color:black;
                position:absolute;bottom:0;left:0;
                width:50px;height:50px"></div>
</div>
</body>
</html>

十四、opacity：透明度，值为0-1之间

十五、z-index：层级；越大就在上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .layer1{
        border:1px solid red;
        height:5000px;
        }
        .layer2{
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        z-index:9;
        opacity:0.5;
        background-color:black}
        .layer3{
        position:fixed;
        top:50%;
        left:50%;
        height:100px;
        width:250px;
        margin-top:-100px;
        margin-left:-250px;
        z-index:10;
        background-color:white;
        }
    </style>
</head>
<body>
<div class="layer1">
    第一层
</div>
<div class="layer2">
    第二层
</div>
<div class="layer3">
    <input type="text "\>
    <input type="text "\>
    <input type="text "\>
</div>

</body>
</html>

十六、overflow：应用场景：父div中含有一个img标签，而此标签中的图片的宽、长比父div的大，则overflow设置为auto或scroll则会出现滚动条。设为hidden，则超出的范围不显示。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height:400px;width:400px;overflow:auto">
    <img src="1.jpg"\>
</div>

</body>
</html>

十七、hover

使用方法：在style标签中，.<classname>:hover，表示此样式，在鼠标移动到对应的classname的标签上才应用

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
        background-color:blue;
        height:48px
        }
        .pg-header .content{
        width:1000px;
        margin:0 auto;
        line-height:48px;
        }
        .topic{
        float:left;
        padding:0px 40px}
        .topic:hover{
        background-color:red}
    </style>
</head>
<body>
<div class="pg-header">
    <div class="content">
        <div class="topic">全部</div>
        <div class="topic">42区</div>
        <div class="topic">段子</div>
        <div class="topic">图片</div>
        <div class="topic">挨踢1024</div>
    </div>
</div>
<div class="pg-body">
    a
</div>

</body>
</html>

十八、background-color：设置背景颜色

十九、background-image：url(path)：设置背景图片，默认情况下会占满整个标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="background-image:url(4.gif);height:150px"></div>
</body>
</html>

二十、background-repeat:no-repeat：设置图片不重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="background-image:url(4.gif);height:150px;background-repeat:no-repeat"></div>
</body>
</html>

二十一、background-repeat-x background-repeat-y:no repeat：设置不在x或y方向重复

二十二、background-position-x、background-position-y：设置背景图片的位置

background-position：设置背景图片的位置，也可设置为center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height:100px">
    <div style="background-image:url(2.png);height:19px;
                background-repeat:no-repeat;width:20px;
                border:1px solid red;
                background-position-y:10px">
    </div>
</div>
</body>
</html>

案例：用户登录框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div style="width:980px;height:48px;
                margin:0 auto">
        <div style="color:red;line-height:48px;font-size:20px;float:left">*</div>
        <div style="line-height:48px;font-size:20px;float:left;margin-left:10px">用户名</div>
        <div style="height:48px;width:400px;float:left;margin-left:10px;position:relative">
            <input type="text" style="height:48px;width:370px;padding-right:30px" \>
            <span style="background-image:url(i_name.jpg);
                         height:48px;display:inline-block;
                         width:30px;background-repeat:no-repeat;
                         position:absolute;right:0;top:20px;
"                        ></span>

        </div>
    </div>
</div>

</body>
</html>

案例：后台管理页面（左侧菜单不动，右侧的内容可动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
        background-color:#3825a2;
        height:48px;color:white;
        }
        body{
        margin:0;}
        .pg-content .menu{
        position:fixed;
        top:48px;left:0;
        bottom:0;width:200px;
        background-color:red;}
        .pg-content .content{
        position:fixed;
        top:48px;left:200px;
        bottom:0;right:0;
        background-color:green;
        overflow:auto;}

    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu">a</div>
    <div class="content">
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

案例：后台管理页面（左侧菜单可随着滚动条移动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            background-color:#3825a2;
            height:48px;color:white;
        }
        body{
            margin:0;}
        .pg-content .menu{
            position:absolute;
            top:48px;left:0;
            bottom:0;width:200px;
            background-color:red;}
        .pg-content .content{
            position:absolute;
            top:48px;left:200px;
            bottom:0;right:0;
            background-color:green;
            }


    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu">a</div>
    <div class="content">
        <div style="background-">
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
        </div>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

案例：后台管理页面（左侧菜单不动，右侧的可滚动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            background-color:#3825a2;
            height:48px;color:white;
        }
        body{
            margin:0;}
        .pg-content .menu{
            position:absolute;
            top:48px;left:0;
            bottom:0;width:200px;
            background-color:red;}
        .pg-content .content{
            position:absolute;
            top:48px;left:200px;
            bottom:0;right:0;
            background-color:green;
            overflow:auto;
            }


    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu">a</div>
    <div class="content">
        <div style="background-">
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
        </div>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

主要是在content中添加了overflow:auto，则此标签可流动

建议加上mini-width，则少于mini-width出现横排滚动条，防止变形。

案例：鼠标放到父标签上，其中的一个子标签可显示红色背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item:hover .item2{
            background-color:red
        }

    </style>
</head>
<body>
<div class="item">
    <div class="item1">123</div>
    <div class="item2">456</div>
</div>
</body>
</html>

案例：后台管理（用户菜单的显示和隐藏）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            background-color:#3825a2;
            height:48px;color:white;
        }
        .pg-header .logo{
            width:200px;height:48px;
            background-color:#3cb572;
            line-height:48px;
            text-align:center;
        }
        .pg-header .login{
            width:200px;
            height:48px;
            background-color:#a97c38;
            postion:relative;
        }
        .pg-header .login:hover{
            background-color:blue;
        }
        body{
            margin:0;}
        .pg-content .menu{
            position:absolute;
            top:48px;left:0;
            bottom:0;width:200px;
            background-color:red;}
        .pg-content .content{
            position:absolute;
            top:48px;left:200px;
            bottom:0;right:0;
            background-color:green;
            overflow:auto;
            z-index:10;
            }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header .login a img{
            width:40px;height:40px;
            border-radius:50%;
            margin-top:5px;
            }
        .pg-header .login .usermenu{
            position:absolute;
            top:48px;right:120px;
            z-index:20;
            width:80px;height:60px;
            padding:10px;
            background-color:red;
        }
        .hide{
            display:none
        }
        .login:hover .usermenu{
            display:block
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="logo left">老男孩</div>
    <div class="login right">
        <a>
            <img src="1.jpeg">
        </a>
        <div class="usermenu hide">
            <a style="display:block">我的资料</a>
            <a style="display:block">注销</a>
        </div>
    </div>
</div>
<div class="pg-content">
    <div class="menu">a</div>
    <div class="content">
        <div style="background-">
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
        </div>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

二十四、text-decoration：属性规定添加到文本的修饰。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

二十五、vertical-align：用于垂直对齐，主要用于图片

每一个文本元素自身都会有四条线，顶线，中线，基线，底线。而基线一般是指文本元素中以x字母为准，x字母的下边缘为该文本元素的基线。

而行高则是两个文本行基线之间的距离，往往使段落产生间距。

但是也可以这样理解，行高 = 字体大小 + 上半行距 + 下半行距（其中上下半行距相等，这个等式可以从图中推导出来）

vertical-align的主要参数：

middle：基于中线对齐

npx：在垂直方向移动图片

二十六、文本属性

font-family：字体

font-weight：字体粗细

font-style：斜体的样式

text-indent：缩进

letter-spacing：单词与单词之间的距离

word-spacing：汉字之间的距离

text-transform：capitalize（首字母大写）

lowercase小写

uppercase大写

二十七、list-style：对于无序列表，设置前置符号的样式。

二十八、clear

清除浮动元素，值有left、right、both

作用：清除元素左、右或两边的浮动元素，不过由于不能改变别人的属性，所以一般如果发现左右有浮动，则会移动自己，以达到此效果

图标使用

网络上具有大量的图标提供，可直接使用，如http://www.fontawesome.com.cn

一、使用方法

1、下载：http://www.fontawesome.com.cn

2、解压缩下载文件，并把font-awesome.min.css放在某个文件夹

3、引入：在html中的<head>处加载font-awesome.min.css如下。

link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

4、使用：参考http://www.fontawesome.com.cn/faicons/，点击对应的图标有使用的教程

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome.min.css">
</head>
<body>
<i class="fa fa-superpowers" aria-hidden="true" style="font-size:50px"></i>
</body>
</html>

后台管理页面（终极版）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0\css\font-awesome.min.css">
    <style>
        .pg-header{
            background-color:#3825a2;
            height:48px;color:white;
        }
        .pg-header .logo{
            width:200px;height:48px;
            background-color:#3cb572;
            line-height:48px;
            text-align:center;
        }
        .pg-header .login{
            width:70px;
            height:48px;
            position:relative;
            margin-right:40px;
            text-align:center;
        }
        .pg-header .login:hover{
            background-color:blue;
        }
        body{
            margin:0;}
        .pg-content .menu{
            position:absolute;
            top:48px;left:0;
            bottom:0;width:200px;
            background-color:red;}
        .pg-content .content{
            position:absolute;
            top:48px;left:200px;
            bottom:0;right:0;
            background-color:green;
            overflow:auto;
            z-index:10;
            }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header .login a img{
            width:40px;height:40px;
            border-radius:50%;
            margin-top:5px;
            }
        .pg-header .login .usermenu{
            position:absolute;
            top:48px;right:-15px;
            z-index:20;
            width:80px;height:60px;
            padding:10px;
            background-color:red;
        }
        .hide{
            display:none
        }
        .login:hover .usermenu{
            display:block
        }

    </style>
</head>
<body>
<div class="pg-header">
    <div class="logo left">老男孩</div>
    <div class="login right">
        <div style="position:absolute;
                    top:14px;left:-130px;">
            <i class="fa fa-bell-o" aria-hidden="true"></i>
        </div>
        <div style="position:absolute;
                    top:14px;left:-70px;">
            <i class="fa fa-comment-o" aria-hidden="true"></i>
        </div>
        <span style="position:absolute;
                     top:14px;left:-50px;
                     background-color:red;
                     border-radius:50%;
                     padding:1px 12px;">5</span>

        <a>
            <img src="1.jpeg">
        </a>
        <div class="usermenu hide">
            <a style="display:block">我的资料</a>
            <a style="display:block">注销</a>
        </div>
    </div>
</div>
<div class="pg-content">
    <div class="menu">a</div>
    <div class="content">
        <div style="background-">
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
            <p>asdf</p>
        </div>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

弧形背景的实现：

用border-radius和padding相结合实现

二十三、border-radius：设置边框的弧度，用百分比。

二十四、@media：响应式，格式如下：

@media (<condition>){

<css>

}

案例：当width少于500px显示红色，大于500px显示绿色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 50px;
        }
        @media (min-width:500px) {
            .c2{
                background-color: green;
            }
        }
    </style>
</head>
<body>
<div class="c1 c2"></div>
</body>
</html>

关于bootstrap

一、响应式

@media (<cond>){

<css>

}

二、图标、字体

在bootstrap中的图标是以字体的形式出现的，要使用其中的图标，步骤如下：

1、可打开网页https://v3.bootcss.com/components/

2、使用浏览器的检查元素，找到对应的源码，复制到本机上即可

三、基本使用

1、下载https://v3.bootcss.com/getting-started/#download

2、引入：bootstrap.css、bootstrap-theme.css、jquery、bootstrap.js

3、从https://v3.bootcss.com/components/把代码复制下来即可使用。

posted on 2019-07-15 00:19 Treelight 阅读(315) 评论(0) 编辑收藏举报

前端之CSS

什么是CSS？

编写CSS的方法

CSS中常用属性

图标使用

一、使用方法

关于bootstrap

搜索

常用链接

随笔档案

阅读排行榜

推荐排行榜