小米首頁案例練習

小米商城

實現的效果

初始化css

/* 初始化 */

/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,aronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,h,
menu,nav,output,ruby,section,summary,time,mark,audio,video,input {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}


a {
    text-decoration: none;
    color: #555;
}

ul,
ol {
    list-style: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

img {
    cursor: pointer;
}

.active {
    color: tomato;
}

.activee {
    color: #ff6700;
}

.check {
    background-color: #fff !important;
    border-color: #818181 !important;
}

img {
    display: block;
}

/* 清除浮動 */

.clearfix::after,
.clearfix::before {
    content: "";
    display: table;
    clear: both;
}


/*版心  */

.container {
    width: 1226px;
    height: inherit;
    margin: 0 auto;
}

ps: 在全局範圍使用*號，會極大的消耗資源

SEO優化

title
description
keywords

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>小米商城 - 小米8、小米MIX 2S、紅米6 Pro、小米電視官方網站</title>
    <meta name="description"
        content="小米商城直營小米公司旗下所有產品，囊括小米手機系列小米Note 3、小米8、小米MIX 2S，紅米手機系列紅米5 Plus、紅米6 Pro，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售後支持。" />
    <meta name="keywords" content="小米,小米8,小米7,紅米5Plus,小米MIX2,小米商城" />
    
    <link rel="shortcut icon" href="logo-xm.ico" type="image/x-icon">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

搜索框製作

PS:去input的邊框輪廓線以父盒子的邊框爲輸入框，右邊搜索按鈕及框中文字內容通過定位實現

html

 		<div class="search fr">
                <input type="text">
                <div class="box">
                    <a href="#">小米電視4A直降300</a>
                    <a href="#">小米5C</a>
                </div>
                <div class="searchbox">
                    <span class="fa fa-search"></span>
                </div>
         </div>

css(less)

.search {
            position: relative;
            width: 294px;
            height: 50px;
            border: 1px solid #cccccc;
            margin: 22px 0;

            input {
                width: calc(100% - 48px);
                height: 100%;
                // 去輪廓線
                outline: none;
                border-right: 1px solid #cccccc;
            }

            .box {
                position: absolute;
                top: 12px;
                left: 47px;

                a {
                    font-size: 12px;
                    background-color: #eeeeee;
                    margin-right: 20px;
                }
            }

            .searchbox {
                position: absolute;
                top: 0;
                right: 0;
                width: 48px;
                height: 50px;
                text-align: center;
                line-height: 50px;

            }
        }

輪播圖

PS: 左右箭頭通過定位實現，小圓點用span給其設置圓角邊框，選中狀態通過邊框顏色和背景顏色實現

 <!-- 右邊輪播圖 -->
            <div class="carousel-focus">
                <ul>
                    <li class="actives">
                        <a href="#">
                            <img src="images/tp1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/tp2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/tp3.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/tp4.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/tp5.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/tp6.jpg" alt="">
                        </a>
                    </li>
                </ul>

                <!-- 箭頭 -->
                <div class="btn left">
                    <span class=" fa fa-angle-left"></span>
                </div>
                <div class="btn right">
                    <span class="fa fa-angle-right"></span>
                </div>

                <!-- 小圓點 -->
                <div class="box">
                    <span class="check"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

css(less)

.carousel-focus {
            position: relative;
            float: right;
            height: 460px;
            width: 983px;

            .btn {
                width: 40px;
                height: 70px;
                background: rgba(0, 0, 0, 0);
                position: absolute;
                top: 50%;
                font-weight: 200;
                font-size: 50px;
                text-align: center;
                line-height: 70px;
                cursor: pointer;
                margin-top: -35px;
                color: #767676;

                &:hover {
                    background-color: rgba(0, 0, 0, .3);
                    color: #fff;
                }

            }

            .left {
                position: absolute;
                left: 0;
            }

            .right {
                position: absolute;
                right: 0;

            }

            .box {
                position: absolute;
                bottom: 30px;
                right: 30px;
                text-align: center;


                span {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    margin: 0 5px;
                    border-radius: 50%;
                    background-color: #8f857a;
                    border: 2px solid #a29b95;
                    cursor: pointer;

                    &:hover {
                        background-color: #fff;
                        border-color: #818181;
                    }
                }
            }


        }

盒子陰影

PS: 通過給盒子添加陰影效果，設置模糊程度實現

 /* x軸偏移 y軸偏移 模糊程度 陰影範圍 陰影顏色（默認黑色） 內陰影*/
  box-shadow: 10px 10px 10px 10px blue inset;

   <!-- 小米單品 start-->
    <div class="xmdp">
        <div class="container ">
            <div class="xmdp-top clearfix ">
                <div class="title fl">
                    小米單品
                </div>
                <div class="span fr">
                    <span class="fa fa-chevron-left"></span>
                    <span class="fa fa-chevron-right"></span>
                </div>
            </div>
            <div class="xmdp-list ">
                <ul class="clearfix">
                    <li>
                        <div class="img">
                            <a href="#">
                                <img src="images/mxdp1.png" alt="">
                            </a>
                        </div>
                        <div class="t t1">
                            <a href="#">小米5S 64GB</a>
                        </div>
                        <div class="t t2">
                            <a href="#">"暗夜之眼"超感光相機</a>
                        </div>
                        <div class="t t3">
                            <a href="#">1999元</a>
                        </div>
                    </li>
                    <li>
                        <div class="img">
                            <a href="#">
                                <img src="images/mxdp2.png" alt="">
                            </a>
                        </div>
                        <div class="t t1">
                            <a href="#">小米手環2</a>
                        </div>
                        <div class="t t2">
                            <a href="#">OLED顯示屏幕,升級計步算法</a>
                        </div>
                        <div class="t t3">
                            <a href="#">149元</a>
                        </div>
                    </li>
                    <li>
                        <div class="img">
                            <a href="#">
                                <img src="images/mxdp3.png" alt="">
                            </a>
                        </div>
                        <div class="t t1">
                            <a href="#">小米鐵圈耳機PRO</a>
                        </div>
                        <div class="t t2">
                            <a href="#">獨創雙動圈+動鐵,三單元發聲</a>
                        </div>
                        <div class="t t3">
                            <a href="#">149元</a>
                        </div>
                    </li>

                    <li>
                        <div class="img">
                            <a href="#">
                                <img src="images/mxdp4.png" alt="">
                            </a>
                        </div>
                        <div class="t t1">
                            <a href="#">小米筆記本</a>
                        </div>
                        <div class="t t2">
                            <a href="#">更輕更薄,像雜誌一樣隨身攜帶</a>
                        </div>
                        <div class="t t3">
                            <a href="#">3599元起</a>
                        </div>
                    </li>
                    <li>
                        <div class="img">
                            <a href="#">
                                <img src="images/mxdp5.png" alt="">
                            </a>
                        </div>
                        <div class="t t1">
                            <a href="#">小米路由器3</a>
                        </div>
                        <div class="t t2">
                            <a href="#">更快更強,不止四天線</a>
                        </div>
                        <div class="t t3">
                            <a href="#">149元</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 小米單品 end-->

css(less)

/* 小米單品 */
.xmdp {
    .title {
        height: 58px;
        line-height: 58px;
    }

    .xmdp-top {
        font-size: 20px;
    }

    .span {
        span {
            width: 34px;
            height: 22px;
            border: #e0e0e0 1px solid;
            color: #e0e0e2;
            text-align: center;
            line-height: 22px;
        }
    }

    .xmdp-list {
        ul {
            width: 1245px;
            overflow: hidden;
            height: 340px;

            li {
                float: left;
                width: 234px;
                height: 340px;
                border-top: 1px solid#FF6700;
                margin-right: 15px;
                text-align: center;
                line-height: 20px;
                transition: all 0.3s ease-in;

                &:hover {
                    // x軸偏移 y軸偏移 模糊程度  陰影顏色
                    box-shadow: 0 15px 50px rgba(0, 0, 0, .3);
                }

                &:first-child {
                    border-top: 1px solid yellow;
                }

                &:nth-child(2) {
                    border-top: 1px solid red;
                }

                &:nth-child(3) {
                    border-top: 1px solid blue;
                }

                &:nth-child(4) {
                    border-top: 1px solid orange;
                }

                &:nth-child(5) {
                    border-top: 1px solid orangered;
                }

                .img {
                    width: 160px;
                    height: 160px;
                    margin: 30px auto;

                    a {
                        font-size: 12px;

                        img {
                            width: 100%;
                            height: 100%;

                        }
                    }
                }

                .t {
                    a {
                        font-size: 12px;
                    }
                }

                .t1 {
                    a {
                        color: #000000;
                    }
                }

                .t2 {
                    a {
                        color: #b0b0b0;
                    }
                }

                .t3 {
                    a {
                        color: #FF6700;
                    }
                }

            }
        }
    }
}

flex的使用

PS: 5個li大小相等，父盒子100%寬度，子盒子每個20%，li中字體圖標與文字使用彈性盒子使其居中對齊

<!-- service start-->
        <div class="service">
            <ul>
                <li><span class="fa fa-cog"></span><a href="#">預約維修服務</a></li>
                <li><span class="fa fa-reply-all"></span><a href="#">7天無理由退貨</a></li>
                <li><span class="fa fa-refresh"></span><a href="#">15天免費換貨</a></li>
                <li><span class="fa fa-briefcase"></span><a href="#">滿150元包郵</a></li>
                <li><span class="fa fa-location-arrow"></span><a href="#">520家售後網點</a></li>
            </ul>
        </div>
        <!-- service start-->

css(less)

.service {
        ul {
            width: 100%;
            height: 101px;
            padding: 50px 0;
            border-bottom: 1px solid #e0e0e0;
            font-size: 16px;
            color: #616161;

            li {
                display: flex;
                // 水平垂直居中
                align-items: center;
                justify-content: center;
                float: left;
                width: 20%;
                height: 43px;
                line-height: 43px;
                text-align: center;
                border-left: 1px solid #e0e0e0;

                &:first-child {
                    border: none;
                }

                a {
                    display: inline-block;
                    color: #616161;
                }

                span {
                    display: inline-block;
                    font-size: 24px;
                    margin-right: 8px;
                    color: #616161;
                }
            }
        }
    }

小米首頁案例練習

小米商城

實現的效果

初始化css

SEO優化

搜索框製作

輪播圖

盒子陰影

flex的使用

高效率使用windows

移動web開發學習整理

博學谷案例練習

小米首頁案例練習

蘇寧易購首頁局部案例練習

簡書首頁案例練習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結