大小孩

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Part13 – 前端之CSS

本节内容

  1. CSS

一、CSS

层叠样式表(英文全称：Cascading Style Sheets)，用来装饰html
一、在标签上设置style属性（字典格式，多个属性之间用分号隔开）：
    background-color: #2459a2;        - 背景色
    height: 48px;                    - 行高
    ...

二、编写css样式：
    1. 标签的style属性
    2. 写在head里面 style标签中写样式
        - id选择器，根据标签的id（除去#，例如标签id=i1）设置CSS属性
              #i1{
                background-color: #2459a2;
                height: 48px;
              }
              
        - **class选择器** ，根据标签的class（除去.例如标签class=c11）设置CSS属性******最常用
            
              .名称{
                ...
              }
              
              <标签 class='名称'> </标签>
        
        - 标签选择器，根据标签类型统一设置样式
                div{
                    ...
                }
                
                所有div设置上此样式
        
        - 层级选择器（空格） ******
               .c1 .c2 div{
                    
               }
        - 组合选择器（逗号） ******
                #c1,.c2,div{
                    
               }
        
        - 属性选择器 ******
               对选择到的标签再通过属性再进行一次筛选
               .c1[n='alex']{ width:100px; height:200px; }
               
        PS:
            - 优先级，标签上style优先，编写顺序，就近原则
        
    2.5、 css样式也可以写在单独文件中
        <link rel="stylesheet" href="commons.css" />
        
    3、注释
        /* CSS内容  */

    4、边框
         - 宽度，样式，颜色  (border: 4px dotted red;)
         - border-left
    
    5、  
        height，         标签高度 百分比（因为高度通常是无限的，单纯定义高度百分比无效。用在高度有限的标签内）
        width，          宽度 像素，百分比
        text-align:ceter, 水平方向居中
        line-height，行高，如果标签高度等于行高，则内容垂直方向居中
        color、     字体颜色
        font-size、 字体大小
        font-weight 字体加粗
    
    6、float
        让标签浪起来（按方向标签浮动，如果加起来的总长度超过宽度就另起一行），块级标签div也可以堆叠
        合并父子标签在同一图层，否则子标签会浮动在父标签上，盖住了父标签边框
        老子管不住：
            <div style="clear: both;"></div>
        
    7、display
        display: none; -- 让标签消失
        display: inline;
        display: block;
        display: inline-block;
                 具有inline特性,默认自己有多少占多少
                 具有block特性,可以设置高度、宽度、padding、margin
        ******
        行内标签：无法设置高度，宽度，padding  margin
        块级标签：设置高度，宽度，padding  margin
        
        
    8、边距：padding （内边距），margin（外边距）(0,auto)
       padding-top=1px        - 标签外上边距1像素
       margin-top=1px        - 标签内上边距1像素

    9、position:
        a. fiexd => 固定在页面的某个位置
        
        b. relative + absolute
        
            <div style='position:relative;'>
                <div style='position:absolute;top:0;left:0;'></div>
            </div>

    10、opcity: 0.5      背景色透明度

    11、z-index:        页面多个层级顺序，值大的在上

    12、overflow: hidden,auto   超出部分隐藏，超出出现滚动条

    13、hover
        /*当鼠标移动（悬浮hover）到当前标签（.pg-header .menu）上时，以下css属性才生效*/
        /*样式后加hover*/
        .pg-header .menu:hover{
            background-color: blue;
        }

    14、背景图片background-image
        background-image:url('image/4.gif'); # 默认，div大，图片重复
        background-repeat: repeat-y;    所在标签宽度超出图片宽度是否叠加
        background-position-x:          背景图片x坐标
        background-position-y:          北京图片y坐标
    
    示例：输入框

三、页面布局
    1、主站布局：
        <div class="pg-header"></div>
            <div style="width:98px;margin:0 auto;">
                内容自动居中
            </div>
        <div class="pg-content"></div>
        <div class="pg-footer"></div>
    2、后台管理布局：
        position:
            fixed            -- 永远固定在窗口的某个位置
            relative        -- 单独只参照自身本来位置移动(无意义？)
            absolute        -- 单独只参照自身本来位置(初始位置和大小)移动
            
        左侧菜单不动，右边内容动：    
            顶部菜单栏正常写，左侧菜单栏固定fixed，右侧内容固定fixed并overflow:auto
        左侧菜单和右边内容一起动：
            顶部菜单栏正常写，左侧菜单栏固定absolute，右侧内容固定absolute
        左侧菜单不动，右边内容动(最长用)：
            顶部菜单栏正常写，左侧菜单栏固定absolute，右侧内容固定absolute并overflow:auto
    
        提供图标网站：Font Awesome
CSS笔记
1.页面布局
    一般：float, clear:both, margin(margin 0 auto 水平居中), padding
    涉及到定位的：position, left, top, bottom, right
    
    网上找模板：
        HTML模板（模板之家）
        BootStrap模板
2.背景图片
    整个页面都是：写在body中
    部分应用：写在相应标签中
注意

1、CSS样式选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--**style**，background-color背景色，height行高，-->
    <!--CSS模板-->
    <style>
        /*======id选择器，#标签id，根据标签的id（除去#，例如标签id=i1）设置CSS属性*/
        /*#i1{*/
            /*background-color: #2459a2;*/
            /*height: 48px;*/
        /*}*/
        /*#i2{*/
            /*background-color: #2459a2;*/
            /*height: 48px;*/
        /*}*/
        /*#i3{*/
            /*background-color: #2459a2;*/
            /*height: 48px;*/
        /*}*/

        /*======class选择器 ，根据标签的class（除去.例如标签class=c11）设置CSS属性******最常用*/
        /*.c1{*/
            /*background-color: #2459a2;*/
            /*height: 10px;*/
        /*}*/
        /*#c2{*/
            /*background-color: black;*/
            /*color: white;*/
        /*}*/

        /*======标签选择器，根据标签类型统一设置样式*/
        /*div{*/
            /*background-color: black;*/
            /*color: white;*/
        /*}*/

        /*======层级选择器，层级关联（空格分隔）******常用*/
        /*span div{*/
            /*background-color: black;*/
            /*color: white;*/
        /*}*/
        /*.c1 div{*/
            /*background-color: black;*/
            /*color: white;*/
        /*}*/

        /*======组合选择器，多个id或class共用一个样式（逗号分隔） ******常用*/
        .i1,.i2,.i3{
            background-color: black;
            color: white;
        }

        /*======属性选择器，对选择到的标签再通过属性再进行一次筛选（条件顺序筛选） ******常用*/
        .c1[n='alex']{ width:100px; height:200px; }

    </style>
</head>
<body>
    <div class="i1">ff</div>
    <div class="i2">ff</div>
    <div class="i3">2</div>
    <input class="c1" type="text" n="alex">
    <input class="c1" type="password">
</body>
</html>
View Code

2、CSS样式优先级、link

.c2{
    font-size: 58px;
    color: black;
}

.c1{
    background-color: red;
    color: white;
}
commons.css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--**link**引用已有的CSS样式文件，rel="stylesheet"关系，href="css/commons.css"引用的路径-->
    <link rel="stylesheet" href="css/commons.css" />
</head>
<body>
    <!--**CSS样式优先级**，标签自带style优先，其他引用的样式按照编写顺序就近原则（可以理解为顺序解释代码，后边覆盖前边）-->
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
</body>
</html>
CSS样式优先级、link

3、边框、标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--**边框**-->
    <!--style="border(边框): 1px(边框宽度1像素) solid(实体边框) red(红色边框);-->
    <div style="border: 1px solid red;">
        asdfasdf
    </div>

    <!--**标签样式**-->
    <!--height，             标签高度 百分比（因为高度通常是无限的，单纯定义高度百分比无效。用在高度有限的标签内）-->
    <!--width，              标签宽度 像素，百分比-->
    <!--text-align:ceter,    水平方向居中-->
    <!--line-height，        行高，如果标签高度等于行高，则内容垂直方向居中-->
    <!--color、              字体颜色-->
    <!--font-size、          字体大小-->
    <!--font-weight          字体加粗-->
    <div style="height: 48px;
                width:80%;
                border: 1px solid red;
                font-size: 16px;
                text-align: center;
                line-height: 48px;
                font-weight: bold;
    ">asdf</div>
</body>
</html>
border(边框)、标签样式

4、标签浮动float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--**float**，标签浮动（按方向，如果加起来的总长度超过宽度就另起一行），块级标签也可以堆叠-->
    <!--合并父子标签在同一图层，否则子标签会浮动在父标签上，盖住了父标签边框-->
    <!--<div style="clear: both;"></div>-->
    <div style="width: 20%;background-color: red;float: left">1</div>
    <div style="width: 20%;background-color: black;float: left">2</div>
</body>
</html>
View Code

5、边距padding、margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>

<!--style="margin: 0,外边距为0-->
<body style="margin: 0">
    <div class="pg-header">
        <!--margin: 0 auto，上下边距为0，左右边距自动-->
        <div style="width: 980px;margin: 0 auto;">
            <div style="float: left;">收藏本站</div>
            <div style="float: right;">
                <a>登录</a>
                <a>注册</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div>
        <div style="width: 980px;margin: 0 auto;">
            <div style="float: left">
                Logo
            </div>
            <div style="float: right">
                <div style="height: 50px;width: 100px;background-color: #dddddd"></div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div style="background-color: red;">
         <div style="width: 980px;margin: 0 auto;">
             asdfsdf
         </div>
    </div>
    <div style="width: 300px;border: 1px solid red;">
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <!--按如下写，合并父子标签在同一图层，否则子标签会浮动在父标签上，盖住了父标签边框-->
        <div style="clear: both;"></div>
    </div>
</body>
</html>
网页示例

6、display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--**display**-->
    <!--display: none; &#45;&#45; 让标签消失-->
    <!--display: inline;-->
    <!--display: block;-->
    <!--display: inline-block;-->
             <!--具有inline,默认宽度自己有多少占多少-->
             <!--具有block，可以设置高度、宽度、padding、margin-->

    <!--display: inline，转换成行内标签-->
    <!--<div style="background-color: red;display: inline;">asdf</div>-->

    <!--display: block，转换成块级标签-->
    <!--<span style="background-color: red;display: block;">asdf</span>-->

    <!--“行内标签”无法设置高度、宽度、padding、margin，“块级标签”可以-->
    <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span>
    <a style="background-color: red;">Eric</a>
</body>
</html>
View Code

7、网页示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城首页</title>
    <style>
        .pg-header {
            height: 35px;
            background-color: #f5f5f5;
            line-height: 35px;
            color: #999999;
            font-size: initial;
        }

        .pg-search {
            height: 85px;
            line-height: 85px;
        }

        .search-border {
            height: 35px;
            line-height: 35px;
            border: 1px solid #d6d6d6;
        }

        .pg-menu {
            height: 46px;
            line-height: 46px;
            background-color: #c9033b;
            color: white;
            font-weight: bold;
        }

        .prt-class {
            line-height: 46px;
            font-weight: bold;
            font-size: large;
            color: #000000;
        }

        .hot-prt {
            line-height: 46px;
            font-weight: bold;
            font-size: medium;
        }

        .prt-class-a {
            color: #999999;
            font-weight: normal;
            font-size: small;
        }

        .border-bakg {
            border: 1px solid #dddddd;
            background-color: #f5f5f5;
        }

        .prt-filter {
            float: left;
            width: 63%;
            margin-left: 1%;
            margin-top: 20px;
        }

        .prt-filter-a {
            border-bottom: 1px dashed #dddddd;
            width: 99%;
            height: 38px;
        }

        .prt-filter-b {
            float: left;
            width: 10%;
            text-align: right;
            line-height: 38px;
            font-weight: bold;
        }

        .prt-filter-c {
            float: left;
            width: 10%;
            text-align: left;
            line-height: 38px;
            color: #565656;
            font-weight: normal;
            margin-left: 1%;
        }

        .filter-border {
            border: 1px solid #dddddd;
            border-top: 2px solid #c9033b;
        }

        .prt-detail {
            float: left;
            width: 63%;
            margin-left: 1%;
            margin-top: 8px;
        }

        .prt-border {
            width: 19%;
            height:300px;
            border: 1px solid red;
            /*border: none;*/
            float: left;
            margin: 4px;
            padding: auto;
        }
    </style>
</head>
<body style="margin: 0">
<div style="width: 1900px;margin: 0 auto">
    <div class="pg-header">
        <!--margin: 0 auto，上下边距为0，左右边距自动-->
        <div style="width: 80%;margin: 0 auto;">
            <div style="float: left;">
                <a>收藏本站</a>
            </div>
            <div style="float: right;">
                <a style="margin: 3px">登录</a>
                <a style="margin: 3px">注册</a>
                <a style="margin: 3px">我的订单</a>
                <a style="margin: 3px">我的收藏</a>
                <a style="margin: 3px">VIP会员俱乐部</a>
                <a style="margin: 3px">客户服务</a>
                <a style="margin: 3px">关注</a>
                <a style="margin: 3px">手机版</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div class="pg-search" style="width: 60%;margin: 0 auto;margin-top: 20px;">
        <div style="float: left;width: 20%;height: 80px;">
            <img src="img/logo.gif" style="width: 56%;line-height: 80px" alt="load error ">
        </div>
        <div style="float: left;width: 80%;text-align:center;">
            <div class="search-border" style="float: left;width: 46%;text-align:center;">
                <input type="text" name="search" style="border:none;outline:none;height: 28px;width: 99%;"/>
            </div>
            <div class="search-border" style="float: left;border-left: none;width: 8%;">
                <a><img src="img/search.jpg" style="height: 100%;width: 100%;"></a>
            </div>
            <div class="search-border"
                 style="float: right;background-color: #f5f5f5;width: 21%; text-align:center;line-height:28px">
                <a style="color: #999999;padding: 0 auto">购物车</a>
            </div>
        </div>
        <div style="float: left;margin-top:5px;width: 43%;height: 28px;color: #999999;font-size: medium;">
            <span style="float: left;line-height: 100%;">热门搜索：</span>
            <div style="float: left;line-height: 100%;">
                <a>火龙果</a>&nbsp;
                <a>瓜子</a>&nbsp;
            </div>
        </div>
        <div style="clear: both"></div>
    </div>
    <div class="pg-menu">
        <div id="menu1" style="float: left;width:8%;margin-left: 9%">
            <a>全部商品分类</a>
        </div>
        <div id="menu2" style="width: 64%;margin: 0 auto;">
            <div style="float: left;width: 64%;">
                <a style="float: left;width: 13%;background-color: #b9033c;text-align: center;">
                    首页
                </a> &nbsp;&nbsp;&nbsp;
                <a>网上超市</a>&nbsp;&nbsp;&nbsp;
                <a>水果超市</a>&nbsp;&nbsp;&nbsp;
                <a>超级订餐</a>&nbsp;&nbsp;&nbsp;
                <a>生活娱乐</a>&nbsp;&nbsp;&nbsp;
                <a>研究院</a>&nbsp;&nbsp;&nbsp;
            </div>
            <div style="float: right;text-align: center;width: 10%;background-color: #b9033c;">
                <a>论坛</a>
            </div>
            <div style="clear: both"></div>
        </div>
        <div style="clear: both"></div>
    </div>
    <div class="prt-class" style="float:left;width: 12%;margin-left: 6%;">
        <div class="prt-class">
            <div style="float: left;width: 100%;border: 1px solid #dddddd;">
                <div style="float: left;width: 100%;line-height: 35px;">
                    <a style="margin-left: 3px;">时令水果</a>
                </div>
                <div class="prt-class-a" style="float: left;width: 100%;line-height: 20px;">
                    <a style="margin-left: 3px;">火龙果</a>
                    <a style="margin-left: 3px;">沙糖桔</a>
                    <a style="margin-left: 3px;">精品富士</a>
                </div>
            </div>
            <div style="float: left;width: 100%;border: 1px solid #dddddd;">
                <div style="float: left;width: 100%;line-height: 35px;">
                    <a style="margin-left: 3px;">安心肉禽</a>
                </div>
                <div class="prt-class-a" style="float: left;width: 100%;line-height: 20px;">
                    <a style="margin-left: 3px;">大肉</a>
                    <a style="margin-left: 3px;">蛋品</a>
                    <a style="margin-left: 3px;">牛排</a>
                </div>
            </div>
            <div style="float: left;width: 100%;border: 1px solid #dddddd;">
                <div style="float: left;width: 100%;line-height: 35px;">
                    <a style="margin-left: 3px;">粮油速食</a>
                </div>
                <div class="prt-class-a" style="float: left;width: 100%;line-height: 20px;">
                    <a style="margin-left: 3px;">米面</a>
                    <a style="margin-left: 3px;">粮油</a>
                    <a style="margin-left: 3px;">速食</a>
                </div>
            </div>
            <div style="float: left;width: 100%;border: 1px solid #dddddd;">
                <div style="float: left;width: 100%;line-height: 35px;">
                    <a style="margin-left: 3px;">日用百货</a>
                </div>
                <div class="prt-class-a" style="float: left;width: 100%;line-height: 20px;">
                    <a style="margin-left: 3px;">清洁</a>
                    <a style="margin-left: 3px;">洗护</a>
                    <a style="margin-left: 3px;">日用</a>
                </div>
            </div>
            <div style="float: left;width: 100%;border: 1px solid #dddddd;">
                <div style="float: left;width: 100%;line-height: 35px;">
                    <a style="margin-left: 3px;">服装鞋帽</a>
                </div>
                <div class="prt-class-a" style="float: left;width: 100%;line-height: 20px;">
                    <a style="margin-left: 3px;">男装</a>
                    <a style="margin-left: 3px;">女装</a>
                    <a style="margin-left: 3px;">鞋</a>
                </div>
            </div>
            <div style="float: left;width: 100%;border: 1px solid #dddddd;">
                <div style="float: left;width: 100%;line-height: 35px;">
                    <a style="margin-left: 3px;">口碑外卖</a>
                </div>
                <div class="prt-class-a" style="float: left;width: 100%;line-height: 20px;">
                    <a style="margin-left: 3px;">厨大王</a>
                    <a style="margin-left: 3px;">金手勺</a>
                    <a style="margin-left: 3px;">金拱门</a>
                </div>
            </div>
        </div>
        <div class="hot-prt">
            <div class="border-bakg" style="float: left;margin-top: 20px;width: 100%;line-height: 35px;">
                <a style="margin-left: 3px;color: #515151;font-size: 90%">热销排行榜</a>
            </div>
            <div style="float: left;width: 100%;border: 1px solid #dddddd;">
                <div class="prt-class-a" style="float: left;width: 100%;line-height: 20px;">
                    <a style="margin-left: 3px;">Content</a>
                </div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div class="prt-filter">
        <span style="width: 100%;font-size: 90%">福特 > 蒙迪欧 > 2.0T</span>
        <div class="filter-border" style="width: 100%;margin-top: 10px;text-align: center;">
            <div class="prt-filter-a">
                <div class="prt-filter-b">您已选择：</div>
                <div class="prt-filter-c">服装、上衣</div>
            </div>
            <div class="prt-filter-a">
                <div class="prt-filter-b">材质：</div>
                <div class="prt-filter-c">棉麻</div>
            </div>
            <div class="prt-filter-a">
                <div class="prt-filter-b">品牌：</div>
                <div class="prt-filter-c">BDCT</div>
            </div>
            <div class="prt-filter-a" style="border-bottom: none">
                <div class="prt-filter-b">风格：</div>
                <div class="prt-filter-c">休闲</div>
            </div>
        </div>
        <div>
            <div style="border: none;width: 13%;height: 38px;margin:0 auto;">
                <div style="border: 1px solid #dddddd;border-top:none;width:100%;height:30px;line-height:30px;
                        text-align: center;">更多选项 !
                </div>
            </div>
            <div style="border: 1px solid #dddddd;width: 100%;height: 38px;text-align: left;margin-top: 10px">
                <div class="prt-filter-c" style="color: #565656;width:5%;">排序：</div>
                <div class="prt-filter-c" style="color: #0000ee;width:5%;">价格</div>
                <div class="prt-filter-c" style="color: #0000ee;width:5%;">销量</div>
                <div class="prt-filter-c" style="color: #0000ee;width:5%;">最新</div>
            </div>
        </div>
    </div>
    <div class="prt-detail">
        <div class="prt-border">
            <img src="prt/1.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款日系潮牌外套男 潮男街头字母宽松翻领教练夹克</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">178.00</span>
            </div>
        </div>
        <div class="prt-border">
            <img src="prt/2.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款MA1飞行员夹克男 美式复古空军宽松棒球服外套</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">215.00</span>
            </div>
        </div>
        <div class="prt-border">
            <img src="prt/3.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款单排扣棒球服夹克男 日系复古潮牌宽松工装外套</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">198.00</span>
            </div>
        </div>
        <div class="prt-border">
            <img src="prt/4.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款日系连帽牛仔外套男 复古水洗拼接休闲夹克潮牌</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">215.00</span>
            </div>
        </div>
        <div class="prt-border">
            <img src="prt/5.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款工装连帽夹克男外套 美式复古字母刺绣宽松上衣</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">218.00</span>
            </div>
        </div>
        <div class="prt-border">
            <img src="prt/6.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款潮牌工装牛仔外套男 美式街头宽松休闲夹克上衣</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">215.00</span>
            </div>
        </div>
        <div class="prt-border">
            <img src="prt/7.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款高街中长款夹克男外套 欧美复古宽松连帽风衣潮</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">228.00</span>
            </div>
        </div>
        <div class="prt-border">
            <img src="prt/8.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款日系复古工装外套男 港风潮牌青年百搭休闲夹克</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">189.00</span>
            </div>
        </div>
        <div class="prt-border">
            <img src="prt/9.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款半拉链休闲外套男 日系潮牌半高领套头立领夹克</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">158.00</span>
            </div>
        </div>
        <div class="prt-border">
            <img src="prt/10.jpg" alt="load error" style="width: 100%">
            <a style="font-size: small">BDCT 2018春装新款美式M65军事风迷彩夹克男 复古宽松工装外套潮</a>
            <div style="margin-top: 3px">
                <span>¥</span>&nbsp;<span style="font-weight: bold">189.00</span>
            </div>
        </div>
        <div style="clear: both"></div>
    </div>
    <div style="border-top:1px solid #dddddd;float:left;width: 100%;height:50px;margin: 20px;text-align: center">
        <div style="margin:auto;line-height: 50px;font-weight: bold">感谢CCTV</div>
    </div>
</div>
</body>
</html>
View Code

8、positon

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--**position: fixed**，固定在“窗口”上某一个位置-->
    <!--position: fixed;(固定在“窗口”上某一个位置) bottom:20px;（离底部） right: 20px;（离右边）-->
    <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
        position: fixed;bottom:20px;right: 20px;">返回顶部
    </div>
    <div style="height: 5000px;background-color: #dddddd;">
        asdfasdf
    </div>
    <script>
        function GoTop(){
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>
position: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            /*顶部菜单栏固定在“窗口”最上边*/
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
        .body-border{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>
顶部菜单栏固定在“窗口”最上边
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--**position**，position: absolute;固定在“网页”上位置不动；单独使用没什么特殊效果-->
    <div style="width: 50px;height: 50px;background-color: black;position: absolute;right: 0;bottom: 0;">asdf</div>
    <div style="height: 5000px;background-color: #dddddd;">
        asdfasdf
    </div>
</body>
</html>
position: absolute;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--position中relative和absolute联用，用absolute的标签会固定在父标签的某一个位置-->
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
</body>
</html>
position中relative和absolute联用，用absolute的标签会固定在父标签的某一个位置

9、图片超出范围处理overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--内部图片超出外层范围-->
    <!--超出出现滚动条，overflow: auto-->
    <div style="height: 200px;width: 300px;overflow: auto">
        <img src="1.jpg">
    </div>
    <!--超出部分隐藏，overflow: hidden-->
    <div style="height: 200px;width: 300px;overflow: hidden">
        <img src="1.jpg">
    </div>
</body>
</html>
内部图片超出外层标签范围处理（overflow）

10、鼠标悬浮菜单高亮hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }
        .pg-body{
            /*避免页面内容被顶部菜单覆盖*/
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /*当鼠标移动（悬浮hover）到当前标签（.pg-header .menu）上时，以下css属性才生效*/
        /*样式后加hover*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>
</html>
当鼠标移动（悬浮hover）到当前标签（.pg-header .menu）上时，以下css属性才生效

11、背景图片抠图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--背景图抠图-->
    <!--background-image:url('image/4.gif'); # 默认，div大，图片重复访-->
    <!--background-repeat: repeat-y;-->
    <!--background-position-x:-->
    <!--background-position-y:-->
    <!--background-position:-->
    <!--background:-->

    <div style="height: 100px;"></div>
    <!--背景图片：background-image: url(icon_18_118.png);-->
    <!--北京不重复：background-repeat:no-repeat;-->
    <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;
        height: 20px;width:20px;border: 1px solid red;
        /*一个竖直图片，移动背景图片y轴坐标，改变边框内显示的图片样式*/
        background-position-x: 0;background-position-y: 0"></div>
</body>
</html>
一个竖直图片，移动背景图片y轴坐标，改变边框内显示的图片样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--登录界面示例-->
    <!--div增加属性position: relative，内放input，然后增加span标签position:absolute-->
    <div style="height: 35px;width: 400px;position: relative;">
        <!--加padding-right防止input输入内容被图片挡住-->
        <input type="text" style="height: 35px;width: 370px;padding-right: 30px" />
        <span style="position:absolute;right:0;top:10px;
            background-image: url(i_name.jpg);
            height: 16px;width: 16px;
            /*display: inline-block，使同时具有块级标签和行内标签的属性，有大多占多少空间，也可以设置高度和宽度*/
            display: inline-block;"></span>
    </div>
</body>
</html>
登录界面示例

12、三个图层实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--多个图层实现：position: fixed-->
    <!--多个图层谁在上：z-index:10，谁的值大谁在上-->
                    <!--图层先不显示，触发后出现：display:none-->
    <div style="display:none;
                    /*图层位置，以左上角为基准，整个图层并没有居中*/
                z-index:10; position: fixed;top: 50%;left:50%;
                    /*移动图层使居中*/
                margin-left: -250px;margin-top: -200px;
                background-color:white;height: 400px;width:500px; ">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
    <div style="display:none;z-index:9; position: fixed;background-color: black;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    /*opacity: 0.5--->透明度*/
    opacity: 0.5;
    "></div>
    <div style="height: 5000px;background-color: green;">
        asdfasdf
    </div>
</body>
</html>
position(fixed),z-index,透明度opacity,display

13、后台管理页面布局示例

<!DOCTYPE html>
<html lang="en">
<!--后台管理布局(左侧菜单比右边内容高度要小)，通过overflow: auto;切换-->
    <!--左侧菜单和右边内容一起动-->
    <!--左侧菜单不动，右边内容动(原来基础上.content加overflow: auto;)，最常用-->
<!--positon:absolute单独使用仅自一次定位有效（位置、大小）-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            line-height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .pg-header .logo{
            width: 200px;
            text-align: center;
            background-color: #204982;
        }
        .pg-header .icon{
            padding: 0 20px;
        }
        .pg-header .icon:hover{
            background-color: #204982;
        }
        .pg-header .user{
            height: 48px;
            position: relative;
            margin-right:60px ;
            padding: 0 20px;
            color: white;
        }
        .pg-header .user:hover{
            background-color: #204982;
        }
        .pg-content .menu{
            position: absolute;
            top:48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: absolute;
            top:48px;
            left: 200px;
            right: 0;
            bottom: 0;
            background-color: purple;
            overflow: auto;
            z-index: 9;
        }
        .pg-header .a img{
            /*边框变圆角，50%就是圆*/
            border-radius:50%;
            margin-top:4px;
            height: 40px;
            width: 40px
        }
        .pg-header .user .b{
            display: none;
            position: absolute;
            width: 160px;
            top:48px;
            right: 0;
            background-color: white;
            color: black;
            z-index: 20;
        }
        .pg-header .user .b a{
            display:block;
        }
        .pg-header .user:hover .b{
            display:block;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .new-info{
            background-color:red;
            font-size:12px;
            border-radius:50%;
            display: inline-block;
            padding: 4px;
            line-height: 1px
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">
            老男孩
        </div>
        <div class="user right">
            <a class="a" href="">
                <img src="112.jpg">
            </a>
            <div class="b">
                <a>我的资料</a>
                <a>注销</a>
            </div>
        </div>
        <div  class="right icon">
            <i class="fa fa-commenting-o" aria-hidden="true"></i>
            <span class="new-info">5</span>
        </div>
        <div class="right icon">
            <i class="fa fa-bell-o" aria-hidden="true"></i>
        </div>
        <div style="clear: both"></div>
    </div>
    <div class="pg-content">
        <div class="menu left">左侧菜单</div>
        <div class="content left">
            <div style="background-color: purple">
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
                <p>adfadsfadfsas</p>
            </div>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>
引用图标网站提供的图标

14、hover子标签同时显示不同样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--压缩版(一行)font-awesome.min.css和正常显示版font-awesome.css-->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .item{
            background-color: #999999;
        }
        .item:hover{
            color: red;
        }
        .item:hover .b{
            color: green;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="a">123</div>
        <div class="b">456</div>
    </div>

</body>
</html>
View Code

15、@media响应式布局

@media响应式布局：根据页面大小不一样，页面布局不一样
<!DOCTYPE html>
<html lang="en">
<!--@media响应式布局：根据页面大小不一样，页面布局不一样-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 50px;
        }
        /*最小宽度大于700px时生效*/
        @media (min-width: 700px) {
           .c2{
                background-color: grey;
            }
        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
</body>
</html>
View Code

16、!important

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值。

参考：

http://www.cnblogs.com/wupeiqi/articles/5237672.html
posted on 2018-03-05 15:07  大小孩  阅读(209)  评论(0)    收藏  举报