今天是小米官网部分内容的制作
<link rel="stylesheet" href="css/小米官网1.css">
<link rel="stylesheet" href="css/小米官网2.css">
</head>
<body>
<div class="header">
<div class="inner">
<div class="naver">
<a href="#">小米商城</a>
<span class="kongge">|</span>
<a href="#">MIUI</a>
<span class="kongge">|</span>
<a href="#">loT</a>
<span class="kongge">|</span>
<a href="#">云服务</a>
<span class="kongge">|</span>
<a href="#">天星数科</a>
<span class="kongge">|</span>
<a href="#">有品</a>
<span class="kongge">|</span>
<a href="#">小爱开放平台</a>
<span class="kongge">|</span>
<a href="#">企业团购</a>
<span class="kongge">|</span>
<a href="#">资质证照</a>
<span class="kongge">|</span>
<a href="#">协议规则</a>
<span class="kongge">|</span>
<a href="#">下载app</a>
<span class="kongge">|</span>
<a href="#">智能生活</a>
<span class="kongge">|</span>
<a href="#">Select Location</a>
</div>
<div class="gwc">
<a href="#"><p>购物车(0)</p></a>
</div>
<div class="mont">
<a href="#">消息通知</a>
</div>
<div class="link">
<a href="#">登录</a>
<span class="kongge">|</span>
<a href="#">注册</a>
<span class="kongge">|</span>
</div>
</div>
</div>
<div class="nav">
<div class="headed">
<div class="logoer">
<img src="images/logo.png" alt="">
</div>
<div class="nothing">
</div>
<div class="linked">
<a href="#">Xiaomi手机</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>
</div>
<div class="search">
<div class="boxbig">
<div class="boxsmall"><input class="search_text" type="text"></div>
<div class="boxsmaller"><img src="images/123.jpeg" width="50px" height="50px"></div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content_left">
<ul class="list_nav">
<li class="list_text">
<a href="#">手机
<div class="nexted">
>
</div>
</a>
</li>
<li class="list_text">
<a href="#">电脑
<div class="nexted">
>
</div>
</a>
</li>
<li class="list_text">
<a href="#">笔记本 平板
<div class="nexted">
>
</div>
</a>
</li>
<li class="list_text">
<a href="#">家电
<div class="nexted">
>
</div>
</a>
</li>
<li class="list_text">
<a href="#">出行 穿戴
<div class="nexted">
>
</div>
</a>
</li>
<li class="list_text">
<a href="#">智能 路由器
<div class="nexted">
>
</div>
</a>
</li>
<li class="list_text">
<a href="#">电源 配件
<div class="nexted">
>
</div>
</a>
</li>
<li class="list_text">
<a href="#">健康 儿童
<div class="nexted">
>
</div>
</a>
</li>
<li class="list_text">
<a href="#">耳机 音响
<div class="nexted">
>
</div>
</a>
</li>
<li class="list_text">
<a href="#">生活 箱包
<div class="nexted">
>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="second">
<div class="channel">
<ul>
<li class="channel_il">
<a href="#"><img src="images/6.png" alt="">保障服务</a>
</li>
<li class="channel_il">
<a href="#"><img src="images/7.png" alt="">企业团购</a>
</li>
<li class="channel_il">
<a href="#"><img src="images/8.png" alt="">F码通道</a>
</li>
<li class="channel_il">
<a href="#"><img src="images/9.png" alt="">米粉卡</a>
</li>
<li class="channel_il">
<a href="#"><img src="images/10.png" alt="">以旧换新</a>
</li>
<li class="channel_il">
<a href="#"><img src="images/11.png" alt="">话费充值</a>
</li>
</ul>
</div>
<div class="figure">
<a href="#"><img src="images/2.jpg" alt=""></a>
</div>
<div class="figure">
<a href="#"><img src="images/3.jpg" alt=""></a>
</div>
<div class="figure">
<a href="#"><img src="images/4.jpg" alt=""></a>
</div>
</div>
<div class="footer">
<div class="pic_big">
<a href="#"><img src="images/5.jpg" alt=""></a>
</div>
</div>
</body>
</html>
这是部分网页的代码CSS的话也是用了两个 如果要完整版的话还需要大量时间去码代码因为时间的问题只做了部分的网页
a{
text-decoration: none;
color: black;
}
.header{
height: 40px;
background-color: rgb(51, 51, 51);
}
.header .inner{
width: 1226px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.header .inner .naver{
width: 800px;
float: left;
}
.header .inner .naver a{
color: rgb(176, 164, 132);
display: inline-block;
line-height: 40px;
font-size: 10px;
}
.header .inner .naver a:hover{
color: rgb(176, 176, 176);
}
.header .inner .gwc{
float: right;
background-color: rgb(66, 66, 66);
height: 40px;
width: 120px;
}
.header .inner .gwc a{
display: block;
height: 40px;
float: left;
padding-top: 10px;
color: rgb(176, 176, 176);
font-size: 14px;
width: 120px;
text-align: center;
}
.header .inner .gwc a:hover{
background-color: rgb(255, 255, 255);
color: rgb(255, 103, 0);
}
.header .inner .mont{
height: 40px;
width: 68px;
float: right;
}
.header .inner .mont a{
color: rgb(176, 164, 132);
display: block;
line-height: 40px;
font-size: 10px;
text-align: center;
}
.header .inner .mont a:hover{
color: rgb(176, 176, 176);
}
.header .inner .naver{
width: 800px;
float: left;
}
.header .inner .link{
float: right;
}
.header .inner .link a{
color: rgb(176, 164, 132);
display: inline-block;
line-height: 40px;
font-size: 10px;
}
.header .inner .link a:hover{
color: rgb(176, 176, 176);
}
.nav{
height: 100px;
}
.nav .headed{
width: 1226px;
height: 100px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.nav .headed .logoer{
width: 56px;
height: 56px;
float: left;
margin-top: 22px;
}
.nav .headed .logoer img{
width: 56px;
height: 56px;
}
.nav .headed .nothing{
height: 100px;
width: 150px;
left: 60px;
float: left;
}
.nav .headed .linked{
height: 100px;
width: 650px;
left: 210px;
float: left;
}
.nav .headed .linked a{
display: inline-block;
line-height: 100px;
font-size: 16px;
margin-right: 20px;
}
.nav .headed .linked a:hover{
color: rgb(255, 103, 0);
}
.nav .headed .search{
height: 100px;
width: 350px;
float: right;
}
.nav .headed .search .boxbig{
width: 300px;
height: 50px;
margin-top: 22px;
float: right;
overflow: hidden;
}
.nav .headed .search .boxbig .boxsmall{
width: 238px;
height: 50px;
float: left;
overflow: hidden;
}
.nav .headed .search .boxbig .boxsmaller{
width: 52px;
height: 50px;
float: left;
border: 1px solid rgb(176, 176, 176);
}
.nav .headed .search .boxbig .boxsmall .search_text{
width: 240px;
height: 48px;
font-size: 14px;
line-height: 48px;
border: 1px solid rgb(176, 176, 176);
}
.nav .headed .search .boxbig .boxsmall .search_text:focus{
outline: none;
border-color: rgb(255, 103, 0);
}
.content{
width: 1226px;
height: 460px;
background:url("../images/1.jpg");
margin-left: auto;
margin-right: auto;
}
.content .content_left{
width: 234px;
height: 460px;
float: left;
background-color: rgba(164, 151, 139, 0.8);
overflow: hidden;
}
.content .content_left .list_nav{
width: 234px;
height: 420px;
margin-top: 20px;
}
.content .content_left .list_nav .list_text{
height: 42px;
position: relative;
font-weight: 800;
}
.content .content_left .list_nav .list_text a{
display: block;
width: 214px;
height: 100%;
padding-left: 20px;
line-height: 42px;
font-size: 14px;
color: rgb(255,255,255);
}
.content .content_left .list_nav .list_text .nexted{
color: rgb(255,255,255);
font-size: 20px;
position: absolute;
right: 20px;
top: 0;
}
.content .content_left .list_nav .list_text a:hover{
background-color: rgb(255, 103, 0);
}
.second{
width: 1226px;
height: 170px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.second .channel{
height: 170px;
width: 234px;
background-color: rgb(95, 87, 80);
text-align: center;
float: left;
}
.second .channel .channel_il{
width: 76px;
height: 83px;
float: left;
}
.second .channel .channel_il a{
display: block;
height: 64px;
width: 70px;
font-size: 12px;
color: rgb(207, 204, 202);
}
.second .channel .channel_il a img{
width: 24px;
height: 24px;
display: block;
margin:auto;
padding-top: 20px;
}
.second .channel .channel_il a:hover{
color: rgb(255,255,255);
}
.second .figure{
width: 310px;
height: 170px;
float: left;
margin-left: 20px;
}
.second .figure a{
display: block;
width: 310px;
height: 170px;
}
.second .figure a img{
width: 310px;
height: 170px;
}
.footer{
height: 200px;
background-color: rgb(245, 245, 245);
margin-top: 30px;
}
.footer .pic_big{
width: 1226px;
height: 120px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
.footer .pic_big a{
display: block;
width: 1226px;
height: 120px;
}
.footer .pic_big a img{
width: 1226px;
}
这是其中一个的CSS下面是另外一个CSS
html{
color:#000;
background:#FFF;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
font-variant:normal;
}
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input,textarea,select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
input,textarea,select {
*font-size:100%;
}
legend {
color:#000;
}
然后图片的话这边就不上传了自己去找对应的就可以了最后我把效果图放在封面了