css

概念：

CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一

css语法结构

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）

css样式表

1.行内样式

它是所有样式方法中最为直接的一种，它直接对HTML的标签使用style属性，然后将css代码直接写在其中

<div style="color:red;font-size: 20px;">css的初体验</div>

2.内部样式

内部样式就是将css写在<head>与</head>之间，并且用<style>和</style>标签进行声明。

类

div{
      color:red;
      font-size: 20px;
     }
<div>css的初体验2</div>

各种选择器

标签选择器

div{
    color:red;
    font-size: 20px;
}
 <div>css的初体验2</div>

id选择器

#two{
    color: yellow;
}
<div id="two">css的初体验2</div>
id不要重复  只能唯一

类选择器

.three{
    color:blue;
}
 <div class="three">css的初体验2</div>
 <span class="three">span标签</span>

包含选择器

.four span{
    color:green;
}
<div class="four">
    <span>css测试dsad</span>
</div>

分组选择器

 div,span,h2{
    color:orange;
 }

通用选择器

*{
    color:gray;
}

伪类选择器

:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式

a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            /*color:red;*/
        }
        a:visited{
           color:red;
        }
        a:hover{
            color:green;
        }
        a:active{
            color:yellow;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

选择器优先级
　　行内样式>id选择器>类选择器>标签选择器>通用选择器

3.外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="a.css">
</head>
<body>

    <div class="show">csssssssss</div>
    <h1>cscs</h1>
    <span>span</span>
</body>
</html>

样式全部写在a.css文件中

css的基本属性

-文字段落
边框设置：border
宽度，样式，颜色 (border: 1px solid red;)
文字属性
　　字号:font-size
　　颜色:color

文本行高：line-height
语法： line-height：行高值(像素)

水平对齐： text-align
left：左对齐；
right：右对齐
center：居中对齐
段落文本属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 980px;
            height: 48px;
            border: 1px solid red;
            line-height: 48px;
            /*text-align: right;*/
            color:#503131;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>
        段落文本测试
    </div>
</body>
</html>


背景属性 
     背景颜色：background-color
         关键字：red pink orange 

     背景图像：background-image
         使用background-image属性可以设置元素的背景图像。
         语法：background-image：url（图像地址）

     背景重复：background-repeat
         语法：background-repeat：取值
         Repeat(默认)       背景图像平铺排满整个网页
         repeat-x           背景图像只在水平方向上平铺； 
         repeat-y           背景图像只在垂直方向上平铺。
         no-repeat          背景图像不平铺

     背景位置：background-position
         background-position-x:200px ;
         background-position-y:100px;
background-position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #myimg{
            width:18px;
            height: 18px;
            background-image: url("02.png");
            background-position-y: 130px;
        }
    </style>
</head>
<body>
    <div id="myimg">

    </div>
</body>
</html>

一次性加载，然后去抠，节省带宽

margin外边距

边距属性
margin是对外元素的距离，用来控制元素本身的浮动位置
四边距margin
上边距margin-top
下边距margin-bottom
左边距margin-left
右边距margin-right

margin 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        #main{
            width: 400px;
            height:300px;
            border:1px solid red;
        }
        #content{
            width:200px;
            height:150px;
            border:1px solid blue;
            /*margin-top: 10px;*/
            /*margin-left: 10px;*/
            margin:10px 10px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content">

        </div>
    </div>
</body>
</html>

padding内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            width:300px;
            height: 200px;
            border:1px solid red;
            padding-top: 100px;
        }
    </style>
</head>
<body>
    <div id="main">
        dsnandsadsamkdmskanfdjsanf
    </div>
</body>
</html>

布局属性float

float:none; 默认值
float:left; 左浮
float:right;右浮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width:200px;
            height: 100px;
            border:1px solid red;
            float: left;
            margin:0 10px;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="one">one</div>
    <div class="one">one</div>
    <div class="one">one</div>
</body>
</html>

有若干个div，它们都向左浮动，则它们会像流水一样，依次排开

制作banner头部，主要就是利用了float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .pg-head{
            height:20px;
            background-color: #999;
        }
        .info_login{
            /*border:1px solid red;*/
            float: left;
        }
        .info_user{
            /*border:1px solid blue;*/
            float: right;
        }
        .main{
            width:780px;
            margin:0 auto;
            line-height: 20px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="pg-head">
        <div class="main">
            <div class="info_login">请登录</div>
            <div class="info_user">
                <a href="#">我的淘宝</a>
                <a href="#">我的支付宝</a>
            </div>
        </div>

    </div>
</body>
</html>

Display属性

Display：
block：将元素变成块级标签，可以设置高度和宽度
Inline：将元素变成行内标签，不能设置高度和宽度
Inline-block：同时具有两种
none：标签消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span style=" 100px;height: 100px;border: 1px solid red;display: inline-block;">display属性</span>
</body>
</html>

布局属性overflow

溢出处理属性overflow分类
Overflow (水平和垂直均设置)
Overflow-x (设置水平方向)
Overflow-y (设置垂直方向)

布局属性position

定位属性position:
fixed : 将某个元素固定在页面的某个位置
absolute : 绝对定位
relative：相对定位

position-fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        #pg-header{
            background-color: #2459a2;
            height:38px;
            position: fixed;
            top:0;
            left:0;
            right:0;
        }
        #content{
            height:3000px;
            background-color: #999999;
            margin-top: 40px;
        }
        #mytop{
            width:100px;
            height:50px;
            border:1px solid red;
            position:fixed;
            right:5px;
            bottom: 5px;
            background-color: #2459a2;
        }
    </style>
</head>
<body>
    <div id="pg-header">
        hndsjahndksa
    </div>
    <div id="content">
        dbsjabdjsandna
    </div>
    <div id="mytop" onclick = "goTop()">返回顶部</div>
</body>
<script>
    function goTop(){
        document.body.scrollTop = 0;
    }
</script>
</html>

position-relative-absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width:400px;
            height:100px;
            border:1px solid red;
            margin:0 auto;
            position: relative;
        }
        #two{
            width:50px;
            height:50px;
            background-color: black;
            position: absolute;
            left:0;
            bottom: 0;
        }
        #three{
            width:50px;
            height:50px;
            background-color: black;
            position: absolute;
            right:0;
            bottom: 0;
        }
        #four{
            width:50px;
            height:50px;
            background-color: black;
            position: absolute;
            top:0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="one">
        <div id="two"></div>
    </div>
    <div class="one">
        <div id="three"></div>
    </div>
    <div class="one">
        <div id="four"></div>
    </div>

</body>
</html>

网站页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        body{
            background-color: #999999;
        }
        .pg-body{
            width:780px;
            margin:0 auto;
            border:1px solid orange;
            background-color: white;
        }
        .item{
            float: left;
            border:1px solid #dddddd;
            margin:10px;
            padding: 10px;
            position: relative;
        }
        .hot{
            position: absolute;
            right:0;
            top:0;
        }
        p,span,u{
            font-size: 12px;
            text-align: center;
        }
        span{
            color:red;
            padding-left: 30px;
        }
        h2{
            color: orange;
            border:1px solid orange;
            height:48px;
            line-height: 48px;
            padding-left: 15px;

        }
    </style>
</head>
<body>
    <div class="pg-body">
        <h2>限时抢购</h2>

        <div class="item">
            <img src="images/01.jpg" alt="">
            <p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
            <span>¥476.00</span> <u>¥1360</u>
            <div class="hot">
                <img src="images/xsq.png" alt="">
            </div>
        </div>

        <div class="item">
            <img src="images/01.jpg" alt="">
            <p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
            <span>¥476.00</span> <u>¥1360</u>
            <div class="hot">
                <img src="images/xsq.png" alt="">
            </div>
        </div>
        <div class="item">
            <img src="images/01.jpg" alt="">
            <p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
            <span>¥476.00</span> <u>¥1360</u>
            <div class="hot">
                <img src="images/xsq.png" alt="">
            </div>
        </div>
        <div class="item">
            <img src="images/01.jpg" alt="">
            <p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
            <span>¥476.00</span> <u>¥1360</u>
            <div class="hot">
                <img src="images/xsq.png" alt="">
            </div>
        </div>
        <div class="item">
            <img src="images/01.jpg" alt="">
            <p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
            <span>¥476.00</span> <u>¥1360</u>
            <div class="hot">
                <img src="images/xsq.png" alt="">
            </div>
        </div>
        <div class="item">
            <img src="images/01.jpg" alt="">
            <p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
            <span>¥476.00</span> <u>¥1360</u>
            <div class="hot">
                <img src="images/xsq.png" alt="">
            </div>
        </div>
        <div class="item">
            <img src="images/01.jpg" alt="">
            <p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
            <span>¥476.00</span> <u>¥1360</u>
            <div class="hot">
                <img src="images/xsq.png" alt="">
            </div>
        </div>
        <div class="item">
            <img src="images/01.jpg" alt="">
            <p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
            <span>¥476.00</span> <u>¥1360</u>
            <div class="hot">
                <img src="images/xsq.png" alt="">
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</body>
</html>

布局属性z-index

定位属性z-index:
Z-index：设置对象的层叠顺序

特点：
较大 number 值的对象会覆盖在较小 number 值的对象之上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .one{
            height:2000px;
            background-color: white;
        }
        .two{
            height:2050px;
            background-color: #2459a2;
            position: fixed;
            top:0;
            left:0;
            right:0;
            opacity: 0.3;
        }
        .three{
            width:400px;
            height:300px;
            background-color: white;
            position: fixed;
            top:100px;
            left:400px;
            right:400px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="one">
        dbnsjkabndjsanjdnsman
    </div>
    <div class="three"></div>
    <div class="two">
        dsanmdsnadns,a
    </div>
<!--<div></div>-->

</body>
</html>

后台管理布局

overflow：auto

dispaly：none隐藏

z-index

border-radius头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg_head{
            height: 48px;
            background-color: #2459a2;
        }
        .pg_body .pg_menu{
            width: 10%;
            background-color: #7abd54;
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
        }
        .pg_body .pg_content{
            width: 90%;
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            overflow: auto;
            z-index: 9;
            background-color: #999999;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .logo{
            width: 10%;
            text-align: center;
            line-height: 48px;
            background-color: #503131;
            color: white;
        }
        .pg_head .userinfo{
            border:1px solid red;
            margin-top: 4px;
            width:140px;
        }
        .pg_head .userinfo img{
            border-radius: 50%;
            margin-top: 5px;

        }
        .pg_head .userinfo .infolist{
            display: none;
        }
        .pg_head .userinfo:hover .infolist{
            display: block;
            color: red;
        }
        .pg_head .userinfo .infolist{
            background-color: green;
            position: absolute;
            top: 43px;
            right: 36px;
            z-index: 10;
        }
        .pg_head .userinfo .infolist a{
            display: block;
            color: white;
            width: 140px;
        }
    </style>
</head>
<body>
    <div class="pg_head">
        <div class="logo left">
            <span>欢迎光临</span>
        </div>
        <div class="userinfo right "style="position: relative">
            <a href=""><img src="01.jpg" alt="" width="40" height="40"></a>
            <div class="infolist">
                <a>我的信息</a>
                <a>登录</a>
            </div>
        </div>
    </div>
    <div class="pg_body">
        <div class="pg_menu">
            这是菜单
        </div>
        <div class="pg_content">
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>
            <p>这是内容</p>

        </div>

    </div>

</body>
</html>