CSS

一、CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: red;
            color: royalblue;
        }
        /*<!--style标签写在head区域表示当前页面的div标签都适用 这种选择器叫标签选择器-->*/

        #i1{
            font-size: 50px;
            /*id选择器*/
        }
        .c1{
            background-color: blue;
            /*class选择器*/
        }
        .c2  div p .c3{
            color: black;
            /*层级选择器*/
        }

        .c4,.c5,.c6{
            background-color: aqua;
            /*组合选择器*/
        }

        .b1[alex='a']{
            color: #B1191A;
        } /*属性选择器*/

    </style>

</head>
<body>

    <div class="c4">1</div>
    <div class="c5">2</div>
    <div class="c6">3</div>

    <div class="c2">
        <div>
            <p>
                <span>00000</span>
                <a class="c3">88888</a>
            </p>
        </div>
    </div>

    <span class="c1"> sss</span>
    <div class="c1"> sss</div>
    <a class="c1"> sss</a>
    <br/>
    <a id="i1">百度</a>
    <div style="background-color: black; color: white;">888</div>
    <div> 888</div>
    <p>888</p>
    <span style="background-color: aqua; color: brown">999</span>
    <span>999</span>
    <span>999</span>

    <div class="b1" alex="a">1</div>
    <div class="b1">2</div>
    <div class="b1" alex="a">3</div>
    <div class="b1">4</div>
    <div class="b1">5</div>
</body>
</html>
View Code

二、引入外部CSS文件、优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
    <!--引入CSS文件-->
    <!--CSS优先级为:标签属性>headCSS属性>CSS文件想-->
    <style>
        div{
            background-color: red;
            color: royalblue;
        }
        /*<!--style标签写在head区域表示当前页面的div标签都适用-->*/
        span{
            background-color: royalblue;
            color: brown;
        }
        /*<!--style标签写在head区域表示当前页面的span标签都适用-->*/
    </style>

</head>
<body>
    <div style="background-color: black; color: white;">888</div>
    <div> 888</div>
    <p>888</p>
    <span style="background-color: aqua; color: brown">999</span>
    <span>999</span>
    <span>999</span>
</body>
</html>
View Code
div{
    background: black;
    color: green;
}
commons.css

三、基本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: aqua;
            color: cadetblue;
            height: 100%;
            width:500px;
        }
        /*.img{*/
            /*background-image: url("1.png") ;*/
            /*height: 50px;*/
            /*width: 80px;*/
            /*background-repeat: no-repeat;*/
        /*}*/
        .img2{
            background-image: url("1.png");
            height: 20px;
            width:30px;
            background-repeat: no-repeat;
            background-position: 2px -56px;
        }
    </style>
</head>
<body>
    <div class="c1">sdfsfsdfsdf</div>

    <!--<div class="img"></div>-->
    <div class="img2"></div>

</body>
</html>
View Code

四、实例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            margin: 0;
            /* margin 外部变化*/
            list-style-type: none;
        }
        ul li{
            float: left;
            padding: 0 20px 0 20px;
            /*padding 内部变化*/
            color: white;
            cursor: pointer;
            /* cursor 鼠标放上去变成手*/
        }
        ul li:hover{
            background-color: chartreuse;
            /*ul li:hover 当鼠标放上去的时候变化*/
        }
        .pg-header{
            height: 44px;
            background-color: #2459a2;
            line-height: 44px;
        }
        .pg-body{

        }
        .pg-footer{

        }
        body{
            margin: 0;
            /*去掉边框距离*/
        }
        .w{
            width: 980px;
            margin: 0 auto;
            background-color: red;
        }


    </style>
</head >
<body>
    <div class="pg-header">
        <div class="w">
            <ul>
                <li>菜单一</li>
                <li>菜单二</li>
                <li>菜单三</li>
            </ul>
        </div>
    </div>
    <div class="pg-body"></div>
    <div class="pg-footer"></div>

</body>
</html>
View Code

五、模态对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .modal{
11             width: 400px;
12             height: 300px;
13             background-color: aqua;
14             position: fixed;
15             top: 50%;
16             left: 50%;
17             margin-left: -200px;
18             margin-top: -150px;
19             z-index: 10;
20 
21         }
22 
23         .shadow{
24             position: fixed;
25             top: 0;
26             right: 0;
27             left: 0;
28             bottom: 0;
29             /*background-color: black;*/
30             /*opacity: 0.4;*/
31             background-color: rgba(0,0,0,.4);
32             /*背景色+透明 2种写法 */
33             z-index: 9;
34         }
35     </style>
36 </head>
37 <body>
38     <input type="button" value="添加">
39     <div class="shadow"></div>
40     <div class="modal">
41         <input type="text">
42         <input type="text">
43         <input type="text">
44         <input type="text">
45     </div>
46 
47     <div style="height: 2000px"></div>
48 
49 </body>
50 </html>
View Code

六、漂浮

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="width: 500px; border: 1px solid red">
 9         <div style="width: 20%;height: 200px; background-color: green; float: left">fff</div>
10         <div style="width: 80%; height:200px;background-color: blue; float: left">sss</div>
11         <div style="clear: both;"></div>
12     </div>
13 
14 </body>
15 </html>
View Code

七、position-fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 2000px; width: 100%; background-color: aquamarine;">
        <div style="position: fixed; right: 30px;bottom: 20px">返回顶部</div>
        <!--position=fixed 固定、页面移动、返回顶部不动-->
        <div style="position: absolute;">返回顶部2</div>
        <!--position=absolute 页面移动、返回顶部2也跟着移动-->
    </div>

</body>
</html>
View Code

八、position-absolute-relastive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 500px;width: 500px; border: 1px solid red; position: relative">
        <div style="position: absolute; right: 0; bottom: 0">标志</div>

    </div>

</body>
</html>
View Code

九、仿京东网站示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shopping_mall</title>
    <style>
        body{
            margin: 0;
        }
        .pg-head{
            background-color: #F1F1F1;
            height: 44px;
            line-height: 44px;
        }
        .pg-body{
            width: auto;
            height: 886px;
        }
        .pg-foot{
            width: auto;
            background-color: #f8f8f8;
        }
        ul{
            margin: 0;
            list-style-type: none;
        }
        ul li{
            float: right;
            color: #666;
            margin: 0;
            padding: 0 20px 0 20px;
            font-size: small;
            cursor: pointer;
        }
        ul li:hover{
            background-color: #dddddd;
        }
        .w{
            width: 1150px;
            margin: 0 auto;
        }
        .log{
            min-width: 400px;
            min-height: 100px;
            background: url('../images/1.png' ) no-repeat;
            background-position: 49px 21px;
            margin: 0 50px 0 20px;
            float: left;
        }
        .inp{
            width: 482px;
            height: 36px;
            float: left;
            border-color: red;
            margin:  32px 0 50px 80px;
            border-right-style: hidden;
            border-left-style: solid;
            border-top-style: solid;
            border-bottom-style: solid;
        }
        button{
            width: 82px;
            height: 42px;
            background-color: red;
            color: white;
            font-size: 20px;
            margin: 32px 0 -1px ;
            border: solid red;
            cursor: pointer;
        }
        .shopping_car{
            float: right;
            height: 36px;
            width: 136px;
            background-color: #F9F9F9;
            margin: -37px 110px 0 0;
            color: #666;
            line-height: 36px;
        }
        .shopping_car_img{
            background-image: url('../images/2.png');
            height: 20px;
            width: 30px;
            background-repeat: no-repeat;
            background-position: 0 -55px;
            float: left;
            margin: 6px -36px 0 28px;
        }

        .style-110{
            color: #666;
            font-size: small;
            float: left;
            margin: 2px -487px;

        }
        .style-111{
            background-color: red;
            color: white;
            width: 100%;
            height: 44px;
            margin: 30px 0;
        }
        .style-112{
            float: left;
            margin: 0 -900px;
            cursor: pointer;
            width: 200px;
            height: 44px;
            background-color: #B1191A;
            line-height: 44px;
            text-align: center;
        }
        .style-113{
            /*height: 44px;*/
            /*width: 200px;*/
            float: left;
            margin: 0 -700px;
            background-color: #d84a47;
        }
        .style-114{
            float: left;
            display: block;
            background-color: #d84a47;
            height: 44px;
            width: 100px;
            text-align: center;
            line-height: 44px;
            cursor: pointer;
        }
        div a:hover{
            background-color: #a22127;
        }
        .style-115{
            width: 200px;
            height: 600px;
            float: left;
            margin: -30px 0 0 136px;
            text-align: left;
        }
        .style-116{
            border: 1px solid #dddddd;
        }
        .style-117{
            border-top: 2px solid red;
            width: 950px;
            height: 200px;
            float: left;
            margin: 3px 10px;
        }
        .style-118{
            border-bottom: 1px solid #ddd;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            width: 948px;
            height: 40px;
            line-height: 40px;
            font-weight: bold;
        }
        .style-119{
            height: 30px;
            width: 948px;
            float: left;
            border: 1px solid #dddddd;
            margin: -29px 10px;
            line-height: 30px;
            cursor: pointer;
            font-size: small;
        }
        .style-120{
            width: 220px;
            height: 225px;
            border: 1px solid #dddddd;
            float: left;
            margin: 7px 10px;
        }
        .style-121{
            display: block;
            /*float: left;*/
            font-size: small;
            /*text-align: center;*/
            margin: 0 43px;
        }
        .style-122{
            border: 1px solid #dddddd;
            display: block;
            width: 15px;
            height: 15px;
            float: right;
            margin: -24px 82px;
            text-align: center;
            line-height: 15px;
            cursor: pointer;
        }
        .style-123{
            width: 23px;
            height: 11px;
            float: right;
            margin: -24px 56px;
            text-align: center;
            line-height: 15px;
        }
        .style-124{
            border: 1px solid #dddddd;
            display: block;
            width: 15px;
            height: 15px;
            float: right;
            margin: -24px 40px;
            text-align: center;
            line-height: 15px;
            cursor: pointer;
        }
        .style-125{
            width: 25px;
            height: 15px;
            line-height: 15px;
            font-size: 9px;
            display: block;
            border: 1px solid red;
            background-color: red;
            color: white;
            float: right;
            margin: -24px 13px;
            cursor: pointer;
            text-align: center;
        }
        .style-126{
            display: block;
            color: red;
            float: left;
            margin: 7px 3px;
        }
        dl{
            width: 156px;
            height: 199px;
            float: left;
        }
        dt{
            font-size: larger;
            width: 120px;
            margin: 0 100px;
        }
        dd div {
            font-size: smaller;
            width: 83px;
            margin: 11px 65px;
            color: #dddddd;
        }

        a:link,a:visited{
         text-decoration:none;  /*超链接无下划线*/
        }
        a:hover{
         text-decoration:underline;  /*鼠标放上去有下划线*/
        }
    </style>
</head>
<body>
    <div class="pg-head">
        <div class="w">
            <ul>
                <li>客户服务</li>
                <li>VIP会员俱乐部</li>
                <li>我的订单</li>
                <li>免费注册</li>
                <li>登陆</li>
            </ul>
        </div>
    </div>
    <div class="pg-body">
        <div class="log"></div>
        <div>
            <input class="inp" type="text" />
            <button>搜索</button>
        </div>
        <div class="style-110">
            热门搜索:
            <span STYLE="margin: 10px;cursor: pointer">Tesla</span>
            <span style="margin: 10px;cursor: pointer">BMW</span>
        </div>
        <div class="shopping_car">
            <div class="shopping_car_img"></div>
            <div style="font-size: small; text-align: center; line-height: 36px; cursor: pointer">
                我的购物车
            </div>
        </div>
        <div class="style-111">
            <div class="style-112">全部商品分类</div>
            <div class="style-113">
                <a class="style-114">首页</a>
                <a class="style-114">3C</a>
                <a class="style-114">生鲜</a>
                <a class="style-114">医药</a>
                <a class="style-114">图书</a>
            </div>
        </div>
        <div class="style-115" >
            <div class="style-116">南方水果
                <p/>
                <a style="color: #666; font-size: smaller">火龙果  火龙果  火龙果</a>
            </div>
            <div class="style-116">南方水果
                <p/>
                <a style="color: #666; font-size: smaller">火龙果  火龙果  火龙果</a>
            </div>
            <div class="style-116">南方水果
                <p/>
                <a style="color: #666; font-size: smaller">火龙果  火龙果  火龙果</a>
            </div>
            <div class="style-116">南方水果
                <p/>
                <a style="color: #666; font-size: smaller">火龙果  火龙果  火龙果</a>
            </div>
            <div class="style-116">南方水果
                <p/>
                <a style="color: #666; font-size: smaller">火龙果  火龙果  火龙果</a>
            </div>
            <div class="style-116">南方水果
                <p/>
                <a style="color: #666; font-size: smaller">火龙果  火龙果  火龙果</a>
            </div>
        </div>
        <div class="style-117" style="border: hidden; font-size: smaller; height: 10px; ">
            吉利>博越>1.8T
        </div>
        <div class="style-117">
            <div class="style-118">
                <span style="font-size: 16px; margin: 0 20px">
                您已选择:
                </span>
                <span style="font-size: smaller; font-weight: normal; margin: 0 -8px">
                   博越1.8T
                </span>
            </div>
            <div class="style-118">
                <span style="font-size: 16px; margin: 0 52px">
                型号:
                </span>
                <span style="font-size: smaller; font-weight: normal; margin: 0 -40px">
                   2016款领先型
                </span>
            </div>
            <div class="style-118">
                <span style="font-size: 16px; margin: 0 52px">
                档位:
                </span>
                <span style="font-size: smaller; font-weight: normal; margin: 0 -40px">
                   6速手自一体
                </span>
            </div>
            <div class="style-118">
                <span style="font-size: 16px; margin: 0 52px">
                天窗:
                </span>
                <span style="font-size: smaller; font-weight: normal; margin: 0 -40px">
                   全景天窗
                </span>
            </div>
        </div>
        <div class="style-119">
            <span style="padding: 10px">排序:</span>
            <span style="padding: 10px">价格</span>
            <img src="../images/up.gif" style="width: 10px;height: 10px">
            <span style="padding: 10px">销量</span>
            <img src="../images/down.gif" style="width: 10px;height: 10px">
            <span style="padding: 10px">最新</span>
            <img src="../images/down.gif" style="width: 10px;height: 10px">
            <span style="color: red;float: right;padding: 0 8px">
                共19928件商品
                <span style="color: black; padding: 0 20px">1/657</span>
                <span style="border: 1px solid #dddddd;color: black;margin: 0 -10px"><</span>
                <span style="border: 1px solid #dddddd;color: black;margin: 0 10px">></span>
            </span>
        </div>
        <div>
            <div class="style-120">
                <img src="../images/by.png" style="width: 220px;height: 180px;">
                <div >
                    <span class="style-121">吉利博越</span>
                    <span class="style-126">￥149999</span>
                    <span class="style-122">-</span>
                    <input type="text" value="1" class="style-123" />
                    <span class="style-124">+</span>
                    <span class="style-125"> 买</span>

                </div>
            </div>
            <div class="style-120">
                <img src="../images/tang.jpg" style="width: 220px;height: 180px;">
                <div >
                    <span class="style-121">比亚迪唐</span>
                    <span class="style-126">￥229999</span>
                    <span class="style-122">-</span>
                    <input type="text" value="1" class="style-123" />
                    <span class="style-124">+</span>
                    <span class="style-125"> 买</span>

                </div>
            </div>
            <div class="style-120">
                <img src="../images/br.jpg" style="width: 220px;height: 180px;">
                <div >
                    <span class="style-121">吉利博瑞</span>
                    <span class="style-126">￥169999</span>
                    <span class="style-122">-</span>
                    <input type="text" value="1" class="style-123" />
                    <span class="style-124">+</span>
                    <span class="style-125"> 买</span>

                </div>
            </div>
            <div class="style-120">
                <img src="../images/tsl.jpg" style="width: 220px;height: 180px;">
                <div >
                    <span class="style-121">特斯拉</span>
                    <span class="style-126">￥749999</span>
                    <span class="style-122">-</span>
                    <input type="text" value="1" class="style-123" />
                    <span class="style-124">+</span>
                    <span class="style-125"> 买</span>

                </div>
            </div>
            <div class="style-120">
                <img src="../images/q5.jpeg" style="width: 220px;height: 180px;">
                <div >
                    <span class="style-121">奥迪Q5</span>
                    <span class="style-126">￥849999</span>
                    <span class="style-122">-</span>
                    <input type="text" value="1" class="style-123" />
                    <span class="style-124">+</span>
                    <span class="style-125"> 买</span>

                </div>
            </div>
            <div class="style-120">
                <img src="../images/X6.jpg" style="width: 220px;height: 180px;">
                <div >
                    <span class="style-121">X6</span>
                    <span class="style-126">￥1499999</span>
                    <span class="style-122">-</span>
                    <input type="text" value="1" class="style-123" />
                    <span class="style-124">+</span>
                    <span class="style-125"> 买</span>

                </div>
            </div>
            <div class="style-120">
                <img src="../images/bc.jpg" style="width: 220px;height: 180px;">
                <div >
                    <span class="style-121">奔驰E级</span>
                    <span class="style-126">￥1149999</span>
                    <span class="style-122">-</span>
                    <input type="text" value="1" class="style-123" />
                    <span class="style-124">+</span>
                    <span class="style-125"> 买</span>

                </div>
            </div>
            <div class="style-120">
                <img src="../images/bjd.jpg" style="width: 220px;height: 180px;">
                <div >
                    <span class="style-121">布加迪</span>
                    <span class="style-126">￥99999999</span>
                    <span class="style-122">-</span>
                    <input type="text" value="1" class="style-123" />
                    <span class="style-124">+</span>
                    <span class="style-125"> 买</span>

                </div>
            </div>
        </div>
    </div>
    <div class="pg-foot">
        <div>
            <img src="../images/10.png">
        </div>
        <div style="width: auto; background-color: white">
            <dl>
                <dt>购物指南
                    <dd>
                        <div>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >购物流程</a>
                                <!--target标签值为_blank定义超链接打开新的窗口-->
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >会员介绍</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >常见问题</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >联系客服</a>
                            </p>

                        </div>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>配送方式
                    <dd>
                        <div>
                            <p>
                                <a href="http://www.jd.com" target="_blank">上门自提</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank">211限时达</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank">配送服务查询</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank">海外配送</a>
                            </p>

                        </div>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>支付方式
                    <dd>
                        <div>
                            <p>
                                <a href="http://www.jd.com" target="_blank">货到付款</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank">在线支付</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank">分期付款</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank">公司转账</a>
                            </p>

                        </div>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>售后服务
                    <dd>
                        <div>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >售后政策</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >退款说明</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >价格保护</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >取消订单</a>
                            </p>

                        </div>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>特色服务
                    <dd>
                        <div>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >夺宝岛</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >延保服务</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >关于我们</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >联系我们</a>
                            </p>

                        </div>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>自营覆盖区县
                    <dd>
                        <div>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >购物流程</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >会员介绍</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >常见问题</a>
                            </p>
                            <p>
                                <a href="http://www.jd.com" target="_blank" >联系客服</a>
                            </p>

                        </div>
                    </dd>
                </dt>
            </dl>
        </div>

    </div>
</body>
</html>
View Code

十、利用伪类清除漂浮(clearfix:after)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1:hover{
            background-color: #2459a2;
        }
        .c1:before{
            content: "8888";
        }
        .c1:after{
            content: "7777";
        }
        .style-1{
            float: left;
        }


        .clearfix:after{
            content: '.';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        /*.item:after实现一个伪类支撑起整个div标签,
        功能相当于<div style="clear: both"></div>*/

    </style>
</head>
<body>
    <div class="c1">
        99999
    </div>

    <div style="background-color: red" class="clearfix">
        <div class="style-1" style="height: 100px;background-color: green">11</div>
        <div class="style-1" style="height: 200px;background-color: blue">22</div>
        <!--<div style="clear: both"></div>-->
    </div>
</body>
</html>
View Code

十一、自定义小尖角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义小尖角</title>
    <style>
        .inco{
            display: inline-block;
            border-top: 15px solid transparent;
            /*transparent 透明色*/
            border-right: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 15px solid pink;

        }
    </style>
</head>
<body>
    <div class="inco">

    </div>
</body>
</html>
View Code

 

posted @ 2016-10-24 08:48  张文强Terry  阅读(133)  评论(0)  编辑  收藏  举报