码迷，mamicode.com
首页 > Web开发 > 详细

CSS

时间：2016-10-24 09:31:34      阅读：298      评论：0      收藏：0      [点我收藏+]

标签：pad   lock   meta   use   搜索   auto   dal   open   margin   

一、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;
            /*组合选择器*/
        }

    </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>
</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;
}

三、基本样式

技术分享 
<!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

 

CSS

标签：pad   lock   meta   use   搜索   auto   dal   open   margin   

原文地址：http://www.cnblogs.com/terrycy/p/5991732.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！