HTML+CSS静态页面的实战练习——小米商城

跟着Pink老师学完HTML+CSS后试着写了一个小米商城首页项目，虽然过程曲折，但是结果还是不错的，做项目的过程就是总结归纳知识点，让学过的东西能更加熟练的运用；页面部分截图：项目的搭建：HTML部分代码：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta h

奶油味的泡芙

3353人浏览 · 2022-04-19 18:13:11

奶油味的泡芙 · 2022-04-19 18:13:11 发布

跟着Pink老师学完HTML+CSS后试着写了一个小米商城首页项目，虽然过程曲折，但是结果还是不错的，做项目的过程就是总结归纳知识点，让学过的东西能更加熟练的运用；

页面部分截图：

项目的搭建：

HTML部分代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="widdh=device-widdh, initial-scale=1.0">
    <title>
        小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD,小米电视官方网站
    </title>
    <meta name="discription"
        content="小米官网直营小米公司旗下所有产品,包括Xiaomi手机系列Xiaomi 11 Ultra、MIX FOLD,Redmi 红米系列Redmi Note 9、Redmi K40 Pro,小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
    <meta name="keywords" content="Xiaomi,redmi,Xiaomi11 Ultra,Redmi Note 9,Xiaomi MIX Alpha,小米商城">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!--快捷导航-->
    <section class="shortcut">
        <div class="w">
            <div class="top-nav">
                <a href="#">小米商城</a>
                <span class="sp">|</span>
                <a href="#">MIUI</a>
                <span class="sp">|</span>
                <a href="#">IoT</a>
                <span class="sp">|</span>
                <a href="#">云服务</a>
                <span class="sp">|</span>
                <a href="#">天星数科</a>
                <span class="sp">|</span>
                <a href="#">有品</a>
                <span class="sp">|</span>
                <a href="#">小爱开放平台</a>
                <span class="sp">|</span>
                <a href="#">企业团购</a>
                <span class="sp">|</span>
                <a href="#">资质证书</a>
                <span class="sp">|</span>
                <a href="#">协议规则</a>
                <span class="sp">|</span>
                <a href="#">下载app</a>
                <span class="sp">|</span>
                <a href="#">Select Location</a>
            </div>
            <div class="top-info">
                <a href="#">登录</a>
                <span class="sp">|</span>
                <a href="#">注册</a>
                <span class="sp">|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </section>
    <!--头部模块-->
    <header class="header">
        <div class="w">
            <div class="logo">
                <h1>
                    <a href="index.html" title="小米官网">小米商城</a>
                </h1>
            </div>
            <div class="nav">
                <ul class="nav-list">
                    <li class="nav-first">
                        <a href="#" class="link-first"><span class="text">全部商品分类</span></a>
                        <div class="site-first" style="display: block;">
                            <ul class="site-first-list">
                                <li class="first-item"><a herf="#" class="title">手机<span>  </span></a></li>
                                <li class="first-item"><a herf="#" class="title">电视<span>  </span></a></li>
                                <li class="first-item"><a herf="#" class="title">笔记本 平板<span>  </span></a>
                                </li>
                                <li class="first-item"><a herf="#" class="title">家电<span>  </span></a></li>
                                <li class="first-item"><a herf="#" class="title">出行 穿戴<span>  </span></a>
                                </li>
                                <li class="first-item"><a herf="#" class="title">智能 路由器<span>  </span></a>
                                </li>
                                <li class="first-item"><a herf="#" class="title">电源 配件<span>  </span></a>
                                </li>
                                <li class="first-item"><a herf="#" class="title">健康 儿童<span>  </span></a>
                                </li>
                                <li class="first-item"><a herf="#" class="title">耳机 音箱<span>  </span></a>
                                </li>
                                <li class="first-item"><a herf="#" class="title">生活 箱包<span>  </span></a>
                                </li>
                            </ul>
                        </div>

                    </li>
                    <li class="nav-item"><a href="#">Xiaomi手机</a></li>
                    <li class="nav-item"><a href="#">Redmi红米</a></li>
                    <li class="nav-item"><a href="#">电视</a></li>
                    <li class="nav-item"><a href="#">笔记本</a></li>
                    <li class="nav-item"><a href="#">平板</a></li>
                    <li class="nav-item"><a href="#">家电</a></li>
                    <li class="nav-item"><a href="#">路由器</a></li>
                    <li class="nav-item"><a href="#">服务</a></li>
                    <li class="nav-item"><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="header-search ">
                <input type="text" placeholder="小米手机">
                <span></span>
            </div>
        </div>
    </header>

CSS部分代码：

.w {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}

.shortcut {
    position: relative;
    z-index: 30;
    height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    background: #333;
}

.top-nav {
    float: left;
    height: 40px;
    line-height: 40px;

}

.top-info {
    position: relative;
    float: right;
    height: 40px;
    line-height: 40px;
}

.shortcut a:hover {
    color: #fff;
}

.shortcut .sp {
    margin: 0 0.3em;
    color: #424242;
}

.top-nav a {
    line-height: 40px;
    color: #b0b0b0;
    display: inline-block;
}

.top-info a {
    line-height: 40px;
    color: #b0b0b0;
    display: inline-block;
    padding: 0 5px;
    text-align: center;
}

.top-info .sp {
    margin: 0;
}

.header {
    height: 100px;
    background-color: #fff;
}

.logo {
    float: left;
    margin-top: 22px;
    height: 56px;
    width: 56px;
}

.logo a {
    display: block;
    width: 56px;
    height: 56px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/logo.png) no-repeat;
    background-size: contain;
}

.nav {
    float: left;
    width: 850px;
}

.nav .nav-list {
    position: relative;
    float: left;
    width: 1100px;
    height: 88px;
    margin: 0;
    padding: 12px 0 0 30px;
    font-size: 16px;
}

.nav .nav-first {
    position: relative;
    float: left;
    width: 127px;
    padding-right: 15px;
}

.nav-first .link-first {
    display: block;
    padding: 26px 0 38px;
    text-align: right;
    color: #333;
    visibility: hidden;
}

.site-first {
    position: absolute;
    top: 88px;
    left: -87px;
    width: 234px;
    height: 460px;
    font-size: 14px;
    background: rgba(105, 101, 101, .6);
}

.site-first .site-first-list {
    height: 460px;
    border: 0;
    margin: 0;
    padding: 20px 0;
    color: #fff;

}

.site-first-list .title {
    position: relative;
    display: block;
    padding-left: 30px;
    height: 42px;
    line-height: 42px;
}

.site-first-list .title:hover {
    background-color: coral;
}

.site-first-list .title span {
    position: absolute;
    font-family: "icomoon";
    top: 12px;
    right: 20px;
    font-size: 20px;
    line-height: 16px;
    color: #e0e0e0;
}

.nav .nav-item {
    float: left;
}

.nav .nav-item a {
    display: block;
    padding: 26px 10px 38px;
    color: #333;
}

.nav-item a:hover {
    color: coral;
}

.header-search {
    position: relative;
    float: right;
    width: 296px;
    height: 50px;
    margin-top: 25px;
    border: 1px solid #e0e0e0;
}

.header-search input {
    position: absolute;
    top: 0;
    right: 51px;
    width: 243px;
    height: 48px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 48px;
    outline: none;
    border-right: 1px solid #e0e0e0;
}

.header-search span {
    position: absolute;
    font-family: "icomoon";
    top: 0;
    right: 0;
    width: 52px;
    height: 50px;
    font-size: 20px;
    padding: 8px 15px;
    color: #616161;
    cursor: pointer;
}

.header-search span:hover {
    background-color: coral;
}