網頁佈局------小米商城官網

昨夜小楼听风雨發表於2024-05-18
網頁

小米商城官網地址小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米電視官方網站

一、頭部

1、效果圖

2、網頁結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官網</title>
    <link rel="stylesheet"  href="./header.css" >
    <link rel="stylesheet" href="./iconfont.css">
    <link rel="stylesheet" href="./mi.css">
    <link rel="stylesheet" href="./reset.css">
    <link rel="icon" href="./images/favicon.ico" >
</head>
<body>
    <div class="header">
        <div class="content">
            <div class="header-left">
                <ul class="header-left-ul">
                    <li><a href="#">小米商城</a><span>|</span></li>
                    <li><a href="#">MIUI</a><span>|</span></li>
                    <li><a href="#">loT</a><span>|</span></li>
                    <li><a href="#">雲服務</a><span>|</span></li>
                    <li><a href="#">星天數科</a><span>|</span></li>
                    <li><a href="#">有品</a><span>|</span></li>
                    <li><a href="#">小愛開放平臺</a><span>|</span></li>
                    <li><a href="#">企業團購</a><span>|</span></li>
                    <li><a href="#">資質證照</a><span>|</span></li>
                    <li><a href="#">協議規則</a><span>|</span></li>
                    <li class="header-download"><a href="#">
                        下載app</a><span>|</span>
                        <div class="header-download-div">
                            <img  src="./images/78c30d4f259ed43ab20e810a522a6249.png" />
                            <span>小米商城APP</span>
                        </div>
                    
                    </li>
                    <li><a href="#">智慧生活</a><span>|</span></li>
                    <li><a href="#">Select Location</a><span>|</span></li>
                </ul>
            </div>
            <div class="header-right">
                <ul class="header-right-ul">
                    <li><a href="#">登入</a><span>|</span></li>
                    <li><a href="#">註冊</a><span>|</span></li>
                    <li><a href="#">訊息通知</a><span>|</span></li><span>|</span>
                    <li class="shop-li">
                        <a href="#">
                            <i class="iconfont">&#xe653;</i>購物車(0)
                            <div class="shop-div">
                                <span>購物車中還沒有商品，趕緊選購吧！</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

3、css樣式

/* 頭部 */
*{
    margin: 0;
    padding: 0;
}
/* 頭部設定 */
.header{
    width: 100%;
    height: 40px;
    background-color: #333;

}
.content{
    width: 1226px;
    height: 40px;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
}
li{
    list-style-type: none;
}
.content a{
    text-decoration: none;
    color: #b0b0b0;
    font-size: 12px;
}
.content a:hover{
    color: white;
}
.header-left{
    float: left;
}
.header-right{
    float: right;
}
.header-left-ul>li{
    float: left;
}
.header-right-ul>li{
    float: left;
}
.content li span{
    color: #424242;
    margin: 0 6px;
}
.shop-li{
    background-color: #424242;
    margin-left: 25px;
    width: 120px;
    height: 40px;
    position: relative;
}
.shop-li i{
    margin-right: 4px;
}
.shop-li:hover{
    background-color: white;
    cursor: pointer;
}
.shop-li:hover>a>font{
    color: coral;
}
/* 頭部下拉設定 */

.header-download{
    position: relative;

}
.header-download-div{
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -62px;
    width: 124px;
    height: 0;
    overflow: hidden;
    background-color: white;
    box-shadow: 0px 1px  5px #aaa;
    transition: all .3s;
}
.header-download-div img{
    width: 90px;
    height: 90px;
    margin: 18px auto 12px;
    display: block;

}
.header-download-div span{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: block;
    padding-bottom: 10px;
}
.header-download:hover >.header-download-div{
    height: 150px;
}
/* 購物車顯示 */
.shop-div{
    position: absolute;
    right: 0px;
    top:40px;
    width: 316px;
    height: 0;
    background-color: white;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, .15);
    text-align: center;
    line-height: 80px;
    overflow: hidden;
    transition: all .3s;
}
.shop-li:hover >a> .shop-div{
    height: 80px;
}

4、問題

1、懸浮到購物車文字上時，文字自動變為白色，在頁面中檢視原始碼多出了font需要設定在a後面

2、左右兩邊都有資料時，需要設定兩個div包裹起來使用float定位分別設定left和right，裡面的資料在設定為float:left浮動，如果不設定兩個div直接對資料設定左右浮動那麼右側資料將會反過來

3、購物車圖片是引入進來的程式碼如下，透過class設定iconfont來引用

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1548064192113'); /* IE9 */
  src: url('iconfont.eot?t=1548064192113#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1548064192113') format('woff'),
  url('iconfont.ttf?t=1548064192113') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1548064192113#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-15tianwuliyoutuihuo:before {
  content: "\e606";
}

.icon-liwu:before {
  content: "\e657";
}

.icon-iconfonticon5:before {
  content: "\e615";
}

.icon-shouji01:before {
  content: "\e622";
}

.icon-gouwuche:before {
  content: "\e653";
}

.icon-icon:before {
  content: "\e666";
}

.icon-zhizhen:before {
  content: "\e64d";
}

.icon-jiantou2:before {
  content: "\e63e";
}

.icon-youjiantou:before {
  content: "\e658";
}

.icon-buoumaotubiao46:before {
  content: "\e629";
}

.icon-jiantouyou:before {
  content: "\e62a";
}

.icon-fangdajing:before {
  content: "\e63d";
}

.icon-jiantou:before {
  content: "\e616";
}

.icon-jiantou_zuo:before {
  content: "\e617";
}

.icon-duihua:before {
  content: "\e710";
}

.icon-dianhuaqia:before {
  content: "\e733";
}

.icon-chongzhijilu:before {
  content: "\e64c";
}

.icon-gouwuche1:before {
  content: "\e735";
}

.icon-kefu:before {
  content: "\e6ab";
}

.icon-liwu1:before {
  content: "\e62b";
}

.icon-qitianwuliyoutuihuan:before {
  content: "\e63f";
}

.icon-F:before {
  content: "\e61f";
}

二、

相關文章