小米官网（部分内容）

今天是小米官网部分内容的制作

 <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="data: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="data: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">&gt;</div></a></li><li class="list_text"><a href="#">电脑<div class="nexted">&gt;</div></a></li><li class="list_text"><a href="#">笔记本&nbsp;平板<div class="nexted">&gt;</div></a></li><li class="list_text"><a href="#">家电<div class="nexted">&gt;</div></a></li><li class="list_text"><a href="#">出行&nbsp;穿戴<div class="nexted">&gt;</div></a></li><li class="list_text"><a href="#">智能&nbsp;路由器<div class="nexted">&gt;</div></a></li><li class="list_text"><a href="#">电源&nbsp;配件<div class="nexted">&gt;</div></a></li><li class="list_text"><a href="#">健康&nbsp;儿童<div class="nexted">&gt;</div></a></li><li class="list_text"><a href="#">耳机&nbsp;音响<div class="nexted">&gt;</div></a></li><li class="list_text"><a href="#">生活&nbsp;箱包<div class="nexted">&gt;</div></a></li></ul></div></div><div class="second"><div class="channel"><ul><li class="channel_il"><a href="#"><img src="data:images/6.png" alt="">保障服务</a></li><li class="channel_il"><a href="#"><img src="data:images/7.png" alt="">企业团购</a></li><li class="channel_il"><a href="#"><img src="data:images/8.png" alt="">F码通道</a></li><li class="channel_il"><a href="#"><img src="data:images/9.png" alt="">米粉卡</a></li><li class="channel_il"><a href="#"><img src="data:images/10.png" alt="">以旧换新</a></li><li class="channel_il"><a href="#"><img src="data:images/11.png" alt="">话费充值</a></li></ul></div><div class="figure"><a href="#"><img src="data:images/2.jpg" alt=""></a></div><div class="figure"><a href="#"><img src="data:images/3.jpg" alt=""></a></div><div class="figure"><a href="#"><img src="data:images/4.jpg" alt=""></a></div></div><div class="footer"><div class="pic_big"><a href="#"><img src="data: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;
}

然后图片的话这边就不上传了自己去找对应的就可以了最后我把效果图放在封面了

小米官网（部分内容）相关推荐

小米官网项目制作——javascript知识分享上
目录前言一.整体架构二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子四.轮播图 1.本体的部件 ...
第一个完整页面来啦~小米官网
不知不觉学习前端已经快4个月啦,之前没学JavaScript之前做的项目都只能看不能玩,小米官网这个页面算上写出的第一个相对完整一点的项目,虽然需要进步的地方还有很多,但是未来可期! 本篇博客主要是针 ...
花季美少女和小米官网你选哪个？
前言花季少女和小米官网你选哪个?只有小孩子才做选择,你当然都会拥有!我们今天就看看花季美少女是怎么用jQuery写小米官网的,看看女孩子的思维和男孩子有什么不一样!css的东西我这里就不多说啦,时间 ...
css:动画小米官网盒子阴影心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
前端700行代码项目练习--小米官网（仅html、css实现）
目录一.效果展示二.准备工具 1.css重置样式 2.awesome图标字体 3.各图片 4.title网站图标三.代码一.效果展示二.准备工具 1.css重置样式请自行查找,CSDN上一 ...
用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距图片原 ...
小米官网是不是用php开发的,小米官网抢手机排队功能，后台语言是什么
我猜这种后台编程语言处理并发量的能力一定很强! 回复内容: 我猜这种后台编程语言处理并发量的能力一定很强! 主要支撑的是Go. 详细参考:http://www.csdn.net/article/201 ...
HTML+CSS 小米官网案例
HTML+CSS 小米官网案例收获:学会引用阿里矢量图,观察网页布局,熟练掌握float的使用方式,简单实用css动画,调整网页布局,引用css样式. 网页没有完全还原,建议大家找最新的教程 xia ...

小米官网（部分内容）

小米官网（部分内容）相关推荐

最新文章

热门文章