白眼不会，

最新推荐文章于 2024-08-13 17:13:54 发布

白眼boy

最新推荐文章于 2024-08-13 17:13:54 发布

阅读量59

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_63286123/article/details/121030469

版权

此网页展示了小米商城的头部导航，包括品牌链接、登录注册、消息通知和购物车等元素，以及主体部分的商品分类和推荐图片。设计中包含了Xiaomi手机、电视、笔记本等产品类别，同时具备搜索框功能。整体布局清晰，融合了前端开发中的HTML、CSS和图标库应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

   <body>
       <div class="tou">
           <a href="#">小米商城</a>｜
           <a href="#">MIUI</a>｜
           <a href="#">loT</a>｜
           <a href="#">云服务</a>｜
           <a href="#">天星数科</a>｜
           <a href="#">有品</a>｜
           <a href="#">小爱开放平台</a>｜
           <a href="#">企业团购</a>｜
           <a href="#">资质证照</a>｜
           <a href="#">协议规则</a>｜
           <a href="#">下载app</a>｜
           <a href="#">智能生活</a>｜
           <a href="#">Select Location</a>
           <span style="float: right;">
               <a href="#">登录</a>｜
               <a href="#">注册</a>｜
               <a href="#">消息通知</a>｜
               <a class="gou" href="#">购物车(0)</a>
           </span>
       </div>
       <div class="er">
           <img class="xiao" src="img/xiaomi.PNG" />
           <div style="float: right;" class="er1">
               <a href="#">Xiaomi手机</a>
               <a href="#">Rdemi 红米</a>
               <a href="#">电视</a>
               <a href="#">笔记本</a>
               <a href="#">平板</a>
               <a href="#">家电</a>
               <a href="#">路由器</a>
               <a href="#">智能硬件</a>
               <a href="#">服务</a>
               <a href="#">社区</a>        
               <input placeholder="白眼" class="kuang" type="text" />
               <a class="kuang1" href="#"></a>
           </div>
       </div>
       <div class="dage">
           <div style="float: left;" class="ping">
               <br />
               <a href="#">手机<i class="fa fa-chevron-right"></i></a>
               <a href="#">电视<i class="fa fa-chevron-right"></i></a>
               <a href="#">笔记本平板<i class="fa fa-chevron-right"></i></a>
               <a href="#">家电<i class="fa fa-chevron-right"></i></a>
               <a href="#">出行穿戴<i class="fa fa-chevron-right"></i></a>
               <a href="#">智能路由器<i class="fa fa-chevron-right"></i></a>
               <a href="#">电源配件<i class="fa fa-chevron-right"></i></a>
               <a href="#">健康儿童<i class="fa fa-chevron-right"></i></a>
               <a href="#">耳机音响<i class="fa fa-chevron-right"></i></a>
               <a href="#">生活箱包<i class="fa fa-chevron-right"></i></a>
               <div style="clear: both;"></div>
           </div>
           <div style="float: left;" class="ping1"><img src="img/d498c673c14fac077c37869cd82e38a9.jpg" /></div>
           <div style="clear: both;"></div>
       </div>

</html>

html,
body {
	margin: 0;
	padding: 0;
	font-size: 12px;
}
.tou {
	background: #333333;
	width: 100%;
	height: 40px;
}

div a {
	color: white;
	text-decoration: none;
	font-size: 10px;
	font-family: 华文楷体;
	line-height: 40px;
	padding: 0px 12px 0px;
}

.er {
	background: white;
	width: 100%;
	height: 70px;
}

.xiao {
	width: 60px;
	margin-top: 2px;
	margin-left: 120px;
}

.er a {
	font-family: "微软雅黑";
	font-size: 15px;
	margin-right: 5px;
}

.er1 {
	margin-top: 8px;
	margin-right: 60px;
}

.er1 a {
	color: black;
}

.kuang {
	border: 2px solid black;
	border-radius: 10px 10px 10px 10px;
	height: 20px;
	width: 200px;
}

.kuang1 {
	background: url(../img/搜.png) no-repeat;
	display: block;
	width: 30px;
	height: 30px;
	float: right;
	margin-top: 5px;
}

.dage {
	width: 1200px;
	margin: 0 auto;
}

.ping {
	width: 250px;
	height: 500px;
	background: #413f40;
}

.ping a {
	display: block;
	margin-bottom: 5px;
	font-size: 20px;
}

.ping1 {
	width: 900px;
	height: 500px;
	margin-left: 10px;
}

.ping1 img {
	width: 1000px;
	height: 500px;
}

i {
	float: right;
	margin-top: 10px;
	
}
.da{
	background: red;
	height: 200px;
	width: 1260px;
	margin-left: 112px;
	margin-top: 5px;
}
.yi{
	background: #605750;
	width: 250px;
	height: 180px;
	margin-left: 111px;
	margin-top: 10px;
}
.bu{
	margin-left: 11px;
	margin-top: 10px;
	
}

白眼boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
白眼不会，

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/123.css" /> <link rel="stylesheet" href="font-awesome-4.7.0/css/f...
复制链接

扫一扫