仿小米官网首页（html、css）

最新推荐文章于 2024-08-23 10:53:05 发布

Lynn Gin

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量238

点赞数

分类专栏： HTML5+CSS3 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_46376562/article/details/126794016

版权

HTML5+CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米官网</title>
<link rel="icon" type="image/x-icon" href="https://s01.mifile.cn/favicon.ico">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <div class="header">
        <img src="./images/favicon.ico" alt="" srcset="">
        <ul class="nav">
            <li><a href="#">小米官网</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米影像</a></li>
            <li><a href="#">MIUI</a></li>
            <li><a href="#">IoT</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">天星数科</a></li>
            <li><a href="#">有品</a></li>
            <li><a href=" #">小爱开放平台</a></li>
            <li><a href="#">企业团购</a></li>
        </ul>
        <div class="login">
            <a href="#">登录&nbsp&nbsp&nbsp</a>|
            <a href="#">&nbsp&nbsp&nbsp注册</a>
        </div>
    </div>

    <div class="box">
        <img src="./images/3.jpg" alt="" srcset="">
        <img src="./images/2.jpg" alt="" srcset="">
        <img src="./images/1.jpg" alt="" srcset="">
        <a class="top" href="#"></a>
    </div>

    <div class="footer wrapper">
        <div class="links">
            <dl>
                <dt>选购指南</dt>
                <dd><a href="#">手机</a></dd>
                <dd><a href="#">电视</a></dd>
                <dd><a href="#">笔记本</a></dd>
                <dd><a href="#">平板</a></dd>
                <dd><a href="#">穿戴</a></dd>
                <dd><a href="#">耳机</a></dd>
                <dd><a href="#">家电</a></dd>
                <dd><a href="#">路由器</a></dd>
                <dd><a href="#">音箱</a></dd>
                <dd><a href="#">配件</a></dd>
            </dl>
            <dl>
                <dt>服务中心</dt>
                <dd><a href="#">申请售后</a></dd>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">维修服务价格</a></dd>
                <dd><a href="#">订单查询</a></dd>
                <dd><a href="#">以旧换新</a></dd>
                <dd><a href="#">保障服务</a></dd>
                <dd><a href="#">防伪查询</a></dd>
                <dd><a href="#">F码通道</a></dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd><a href="#">小米之家</a></dd>
                <dd><a href="#">服务网点</a></dd>
                <dd><a href="#">授权体验店/专区</a></dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd><a href="#">了解小米</a></dd>
                <dd><a href="#">加入小米</a></dd>
                <dd><a href="#">投资者联系</a></dd>
                <dd><a href="#">环境，社会及管制</a></dd>
                <dd><a href="#">廉洁举报</a></dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd><a href="#">新浪微博</a></dd>
                <dd><a href="#">官方微信</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">公益基金会</a></dd>
            </dl>
        </div>
        <div class="contact">
            <p class="phone">400-100-5678</p>
            <p>8:00-18:00（仅收市话费）</p>
            <a> 人工客服</a>
        </div>
    </div>
</body>

</html>

.wrapper {
  margin: 0 auto;
  width: 1226px;
  background-color: rgba(0, 0, 0, 0);
}
.header {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 65px;
  margin: 0 40px;
  background-color: rgba(122, 127, 154, 0);
}
.header .login {
  font-size: 14px;
}
.header .nav {
  display: flex;
  justify-content: center;
}
.header .nav li {
  margin-left: 45px;
  font-size: 13px;
}
.header .nav li a {
  font-weight: 550;
}
.box img {
  width: 100%;
}
.box .top {
  background-image: url(../images/top-icon.png);
  background-size: 100%;
  width: 42px;
  height: 62px;
  position: fixed;
  right: 100px;
  bottom: 130px;
  cursor: pointer;
}
.footer {
  height: 350px;
  padding: 40px;
  position: relative;
}
.footer .links {
  display: flex;
  justify-content: space-between;
  width: 70%;
}
.footer .links dt {
  margin: -1px 0 26px;
  font-size: 14px;
  line-height: 1.25;
  color: #424242;
}
.footer .links dd {
  line-height: 26px;
  color: #757575;
}
.footer .contact {
  text-align: center;
  border-left: 1px solid #e0e0e0;
  position: absolute;
  padding-left: 70px;
  float: right;
  right: 50px;
  top: 60px;
}
.footer .contact .phone {
  font-size: 20px;
  color: orange;
}
.footer .contact a {
  margin-top: 5px;
  display: inline-block;
  width: 118px;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
  cursor: pointer;
  border: 1px solid orange;
}
.footer .contact a::before {
  font-family: iconfont;
  content: "\e8bd";
}
.footer .contact a:hover {
  background-color: #ff6700;
  color: white;
}