效果图如下，并没有完全写出整张网页，
HTML代码部分：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div class="total">
<!-- 导航栏部分 -->
<div class="main-nav-head">
<div class="nav-top">
<div class="nav-content">
<a href="#">小米商城</a><span class="sep">|</span>
<a href="#">MIUI</a><span class="sep">|</span>
<a href="#">IoT</a><span class="sep">|</span>
<a href="#">云服务</a><span class="sep">|</span>
<a href="#">天星数科</a><span class="sep">|</span>
<a href="#">有品</a><span class="sep">|</span>
<a href="#">小爱开放平台</a><span class="sep">|</span>
<a href="#">企业团购</a><span class="sep">|</span>
<a href="#">资质证照</a><span class="sep">|</span>
<a href="#">协议规则</a><span class="sep">|</span>
<a href="#">下载app</a><span class="sep">|</span>
<a href="#">智能生活</a><span class="sep">|</span>
<a href="#">SelectLocation</a>
<span class="right-log">
<a href="#">登录</a><span class="sep">|</span>
<a href="">注册</a><span class="sep">|</span>
<a href="#">消息通知</a>
<span class="shopping-car-logo">
<a href="#"> 购物车(0)</a>
</span>
</span>
</div>
</div>
</div>
<!-- header部分 -->
<div class="nav-category-list">
<span class="logo">
<img src="./images/mi_logo.png" alt="图片无法显示">
</span>
<span class="category-list-left">
<a href="#">小米手机</a>
<a href="#">Redmi红米</a>
<a href="#">电视</a>
<a href="#">笔记本</a>
<a href="#">家电</a>
<a href="#">路由器</a>
<a href="#">智能硬件</a>
<a href="#">服务</a>
<a href="#">社区</a>
</span>
<div class="search-input">
<input type="text" placeholder="【新品】 Redmi MAX 86">
<button>GO</button>
</div>
</div>
<!-- 侧边栏部分 -->
<div class="content-photo">
<div class="side-list-left">
<ul>
<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><a href="#">健康 儿童</a><span>〉</span></li>
<li><a href="#">耳机 音响</a><span>〉</span></li>
<li><a href="#">生活 箱包</a><span>〉</span></li>
</ul>
</div>
</div>
<!-- 小图表部分 -->
<div class="list-channel">
<div class="channel-logo-list">
<div class="ad-up">
<div class="ad-up1">
<p>BEGIN</p>
<p>小米秒杀</p>
</div>
<div class="ad-up2">
<p>Shopping</p>
<p>企业团购</p>
</div>
<div class="ad-up3">
<p>Production</p>
<p>F码通道</p>
</div>
</div>
<div class="ad-down">
<div class="ad-down1">
<p>Card</p>
<p>米粉卡</p>
</div>
<div class="ad-down2">
<p>Money</p>
<p>以旧换新</p>
</div>
<div class="ad-down3">
<p>Price</p>
<p>话费充值</p>
</div>
</div>
</div>
<div class="mid-photo">
<img src="./images/photo-mid-1.png" alt="" width="316px" height="170px">
</div>
<div class="mid-photo">
<img src="./images/photo-mid-2.png" alt="" width="316px" height="170px">
</div>
<div class="mid-photo">
<img src="./images/photo-mid.png" alt="" width="316px" height="170px">
</div>
</div>
<!-- 小米秒杀 -->
<div class="miaosha">
<h2 class="title">小米秒杀</h2>
</div>
<div class="popular-product">
<div class="star1">
<img src="./images/小米10s-mid-small.jpg" alt="">
<p>小米手机10s 全系列</p>
<a href="#">40/48/49/55英寸 现货购买</a>
</div>
<div class="star2">
<img src="./images/小米10s-mid-small.jpg" alt="">
<p>小米手机10s 全系列</p>
<a href="#">40/48/49/55英寸 现货购买</a>
</div>
<div class="star3">
<img src="./images/小米10s-mid-small.jpg" alt="">
<p>小米手机10s 全系列</p>
<a href="#">40/48/49/55英寸 现货购买</a>
</div>
<div class="star4">
<img src="./images/小米10s-mid-small.jpg" alt="">
<p>小米手机10s 全系列</p>
<a href="#">40/48/49/55英寸 现货购买</a>
</div>
<div class="star5">
<img src="./images/小米10s-mid-small.jpg" alt="">
<p>小米手机10s 全系列</p>
<a href="#">40/48/49/55英寸 现货购买</a>
</div>
</div>
<!-- 中间的大的横向图片 -->
<div class="note9">
<img src="./images/note 9.png" alt="" width="1226px" height="120px">
</div>
<!-- 手机 -->
<div class="left-word">
<h2 class="ai">智能硬件</h2>
</div>
<div class="middle-phone">
<div class="middle-product">
<div class="product-left-big">
</div>
<div class="pro-middle">
<div class="pro-up">
<div class="pro1">
<img src="./images/tv-small-mid.jpg" alt="">
<p>小米智能家庭套装</p>
<a href="#">3分钟快速安装，30分钟智能玩法</a>
<p class="money">1999元</p>
</div>
<div class="pro2">
<img src="./images/tv-small-mid.jpg" alt="">
<p>小米智能家庭套装</p>
<a href="#">3分钟快速安装，30分钟智能玩法</a>
<p class="money">1999元</p>
</div>
<div class="pro3">
<img src="./images/tv-small-mid.jpg" alt="">
<p>小米智能家庭套装</p>
<a href="#">3分钟快速安装，30分钟智能玩法</a>
<p class="money">1999元</p>
</div>
<div class="pro4">
<img src="./images/tv-small-mid.jpg" alt="">
<p>小米智能家庭套装</p>
<a href="#">3分钟快速安装，30分钟智能玩法</a>
<p class="money">1999元</p>
</div>
</div>
<div class="pro-down">
<div class="pro5">
<img src="./images/tv-small-mid.jpg" alt="">
<p>小米智能家庭套装</p>
<a href="#">3分钟快速安装，30分钟智能玩法</a>
<p class="money">1999元</p>
</div>
<div class="pro6">
<img src="./images/tv-small-mid.jpg" alt="">
<p>小米智能家庭套装</p>
<a href="#">3分钟快速安装，30分钟智能玩法</a>
<p class="money">1999元</p>
</div>
<div class="pro7">
<img src="./images/tv-small-mid.jpg" alt="">
<p>小米智能家庭套装</p>
<a href="#">3分钟快速安装，30分钟智能玩法</a>
<p class="money">1999元</p>
</div>
<div class="pro8">
<img src="./images/tv-small-mid.jpg" alt="">
<p>小米智能家庭套装</p>
<a href="#">3分钟快速安装，30分钟智能玩法</a>
<p class="money">1999元</p>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="bottom">
<div class="bottom-up">
<ul>
<li>
<a href="#">预约维修服务</a>
<span>|</span>
</li>
<li>
<a href="#">7天无理由退货</a>
<span>|</span>
</li>
<li>
<a href="#">15天免费提货</a>
<span>|</span>
</li>
<li>
<a href="#">满99元包邮</a>
<span>|</span>
</li>
<li>
<a href="#">520余家售后网点</a>
</li>
</ul>
</div>
<hr>
<div class="bootom-center">
<div class="center-left">
<ul>
<li class="left-head">帮助中心</li>
<li><a href="#">购物指南</a></li>
<li><a href="#">账户管理</a></li>
<li><a href="#">订单操作</a></li>
</ul>
<ul>
<li class="left-head">服务支持</li>
<li><a href="#">售后政策</a></li>
<li><a href="#">自助服务</a></li>
<li><a href="#">相关下载</a></li>
</ul>
<ul>
<li class="left-head">线下门店</li>
<li><a href="#">小米之家</a></li>
<li><a href="#">服务网点</a></li>
<li><a href="#">授权体验店</a></li>
</ul>
<ul>
<li class="left-head">了解小米</li>
<li><a href="#">加入小米</a></li>
<li><a href="#">投资者关系</a></li>
<li><a href="#">企业社会责任</a></li>
<li><a href="#">廉洁举报</a></li>
</ul>
<ul>
<li class="left-head">关注我们</li>
<li><a href="#">新浪微博</a></li>
<li><a href="#">官方微信</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">公益基金会</a></li>
</ul>
</div>
<div class="center-right">
<p class="tel">666-888-9999</p>
<p class="time">周一-周六 8:00-19:00</p>
<p class="huafei">（仅收市话费）</p>
<dic class="online">人工客服在线</dic>
</div>
</div>
<div class="bottom-down">
<div class="bottom-logo">
<img src="./images/mi_logo.png" alt="" width="57px" height="57px">
</div>
<div class="bottom-word">
<a href="#">小米商城</a><span>|</span>
<a href="#">MIUI</a><span>|</span>
<a href="#">米粉家族</a><span>|</span>
<a href="#">多看看</a><span>|</span>
<a href="#">游戏体验</a><span>|</span>
<a href="#">政企服务</a><span>|</span>
<a href="#">小米天猫商店</a><span>|</span>
<a href="#">小米集团隐私政策</a><span>|</span>
<a href="#">小米公司儿童信息保护规则</a><span>|</span>
<a href="#">问题反馈</a><span>|</span>
<a href="#">北京市消费者协会</a>
</div>
</div>
</div>
<div class="bottom-vocabulary">
<p>
让全球每个人都能通过奋斗享受科技带来的美好生活
</p>
</div>
</div>
</body>
<link rel="stylesheet" href="./begin-style.css" type="text/css">
</html>
CSS代码部分：
* {
margin: 0;
padding: 0;
}
.total {
width: 1226px;
margin: auto;
}
a {
text-decoration: none;
font-family: sans-serif;
}
ul>li {
list-style-type: none;
}
.sep {
color: #f5e5d6;
margin: 0.3em;
}
.main-nav-head {
background-color: #333333;
font-size: 14px;
line-height: 40px;
width: 1520px;
height: 40;
}
.nav-content {
width: 1226px;
height: 40px;
margin: auto;
}
.nav-content a {
background-color: #333333;
font-size: 13px;
color: #b0b0b0;
}
.nav-content a:hover {
color: #ffffff;
}
.right-log {
display: inline-block;
margin-left: 130px;
}
.shopping-car-logo {
background-color: #424242;
width: 120px;
height: 40px;
display: inline-block;
padding-left: 20px;
}
.shopping-car-logo:hover {
background-color: #fff;
}
.nav-category-list {
width: 1226px;
height: 100px;
margin: auto;
}
.logo>img {
width: 55px;
height: 55px;
margin-top: 20px;
}
.category-list-left {
margin-left: 160px;
}
.nav-category-list a {
color: black;
display: inline-block;
margin-left: 20px;
}
.search-input {
display: inline-block;
}
.search-input>input {
width: 244.6px;
height: 47px;
font-size: 15px;
margin-left: 60px;
}
.search-input>button {
width: 50px;
height: 50px;
background-color: #fff;
border: 1px solid black;
}
.content-photo {
width: 1226px;
height: 460px;
margin: 0 auto;
background-image: url(./images/main_mi.jpg);
background-size: 1226px 460px;
}
.side-list-left {
background-color: rgb(96, 98, 100);
width: 234px;
height: 100%;
}
.side-list-left>ul {
display: inline-block;
width: 234px;
height: 42px;
font-size: 16px;
line-height: 42px;
padding-top: 15px;
padding-left: 35px;
padding-right: 15px;
}
.side-list-left a {
color: white;
}
.list-channel {
width: 1226px;
height: 170px;
margin: 20px auto;
}
.channel-logo-list {
width: 248px;
height: 100%;
background-color: #5f5750;
float: left;
padding: 0px 5px 5px 5px;
}
.ad-up,
.ad-down {
width: 241px;
height: 81px;
margin-top: 5px;
}
.ad-up1,
.ad-up2,
.ad-up3,
.ad-down1,
.ad-down2,
.ad-down3 {
width: 77px;
height: 78px;
float: left;
text-align: center;
}
.ad-up1>p,
.ad-up2>p,
.ad-up3>p,
.ad-down1>p,
.ad-down2>p,
.ad-down3>p {
color: white;
font-size: 13px;
margin-top: 15px;
font-family: sans-serif;
}
.mid-photo {
margin-left: 6px;
float: left;
}
.note9 {
margin: 0 auto;
text-align: center;
}
.miaosha {
width: 1226px;
display: inline-block;
margin: auto;
}
.miaosha .title {
margin: 0;
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333333;
}
.popular-product {
width: 1226px;
height: 380px;
margin: 0 auto;
}
.star1,
.star2,
.star3,
.star4,
.star5 {
width: 242px;
height: 350px;
float: left;
background-color: #fafafa;
text-align: center;
}
.star1 {
border-top: 2px solid #ff7;
}
.star2 {
border-top: 2px solid rgb(224, 136, 136);
}
.star3 {
border-top: 2px solid rgb(65, 146, 184);
}
.star4 {
border-top: 2px solid rgb(147, 226, 94);
}
.star5 {
border-top: 2px solid rgb(216, 132, 63);
}
.star2,
.star3,
.star4,
.star5 {
margin-left: 4px;
}
.star1>img,
.star2>img,
.star3>img,
.str4>img,
.star5>img {
margin-top: 10px;
}
.popular-product p {
font-size: 13px;
margin-top: 20px;
margin-bottom: 8px;
}
.popular-product a {
font-size: 12px;
color: #b0b0b0;
}
.left-word {
width: 1226px;
display: inline-block;
margin: auto;
}
.left-word h2 {
margin: 0;
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333333;
}
.middle-phone {
width: 100%;
height: 710px;
background-color: white;
}
.middle-product {
width: 1226px;
height: 100%;
margin: 0 auto;
}
.product-left-big {
width: 234px;
height: 614px;
background: url(./images/小米11-big-left.jpg) no-repeat;
float: left;
}
.pro-middle {
float: left;
}
.pro1,
.pro2,
.pro3,
.pro4,
.pro5,
.pro6,
.pro7,
.pro8 {
width: 240px;
height: 300x;
float: left;
margin-left: 8px;
background-color: #fff;
text-align: center;
}
.pro-middle p {
font-size: 12px;
}
.pro-middle a {
font-size: 12px;
color: #724a4a;
}
.money {
font-size: 12px;
color: #ff6700;
margin-top: 5px;
}
.bottom{
width: 100%;
height: 350px;
text-align: center;
}
.bottom-up{
background-color: #ffffff;
width: 1226px;
height: 100px;
margin: 0 auto;
padding-left: 120px;
border-bottom: 1px solid #bebebe;
}
.bottom-up>ul{
display: inline;
line-height: 100px;
font-size: 18px;
}
.bottom-up>ul li{
float: left;
color: #9d9d9d;
font-size: 18px;
}
.bottom-up>ul li>a{
color: #9d9d9d;
}
.bottom-center{
background-color: rgb(161, 26, 109);
width: 1226px;
height: 200px;
margin: 0 auto;
}
.center-left{
width: 900px;
height: 100%;
padding-left: 20px;
}
.center-left>ul{
height: 100%;
float: left;
padding-left: 70px;
font-size: 13px;
}
.left-head{
line-height: 25px;
color: #000000;
font-size: 14px;
margin-bottom: 20px;
}
.center-left>ul li>a{
color: #9d9d99;
font-size: 12px;
line-height: 25px;
}
.center-right{
margin-top: 5px;
height: 150px;
padding-left: 75px;
background-color: white;
}
.tel{
font-size: 17px;
color: #ff6700;
margin-bottom: 7px;
}
.time .huafei{
color: black;
font-size:10px;
margin-bottom: 7px;
}
.online{
width: 120px;
height: 30px;
border: 1px solid #ff6700;
font-size: 14px;
color: #ff6700;
margin-top: 100px;
padding-top: 4px;
line-height: 20px;
}
.bottom-down{
width: 1226px;
height: 57px;
color: #cdcdcd;
background-color: white;
}
.bottom-logo{
width: 57px;
height: 57px;
margin-left: 90px;
float: left;
}
.bottom-word{
display: inline-block;
text-align: center;
line-height: 57px;
}
.bottom-word>a{
font-size: 13px;
color:#a1a4a5;
}
.bottom-word>span{
color: #757775;
}
.bottom-vocabulary{
color: #cdcdcd;
font-family: fantasy;
text-align: center;
}
手法不够娴熟，有待进步，只是运用所学知识输出一些东西
如有不当，欢迎大佬指正，菜鸟持续进步中……
