小米商城
一、Html网页二、CSS美化样式三、成果图一、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>Document</title><link rel="stylesheet" href="C:\Users\Administrator\Desktop\HTML\图片素材\base.css"><link rel="stylesheet" href="C:\Users\Administrator\Desktop\HTML\图片素材\index.css"><!-- <link rel="stylesheet" href="C:\Users\Administrator\Desktop\HTML\图片素材\reset.css"> --></head><body><div class="topbar-wrapper"><div class="topbar w clearfix"><ul class="service"> <li><a href="javascript:;">小米商城</a></li><li class="line">|</li><li><a href="javascript:;">MIUI</a></li><li class="line">|</li><li><a href="javascript:;">云服务</a></li><li class="line">|</li><li><a href="javascript:;">金融</a></li><li class="line">|</li><li><a href="javascript:;">云计算</a></li><li class="line">|</li><li><a href="javascript:;">有品</a></li><li class="line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="line">|</li><li><a href="javascript:;">企业团购</a></li><li class="line">|</li><li><a href="javascript:;">资质证照</a></li><li class="line">|</li><li><a href="javascript:;">协议规则</a></li><li class="line">|</li><li class="app-wrapper"><a class="app" href="javascript:;">下载APP<div class="qracode"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\小米二维码.png" alt="此照片无法访问"><span>小米商城app</span></div></a></li><li class="line">|</li><li><a href="javascript:;">Select Location</a></li><li class="line"></li></ul><ul class="shop-cart"><li><a href="javascript:;"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\京东小图片.png" alt="">购物车</a></li></ul><ul class="user-info"><li><a href="javascript:;">登录</a></li><li class="line">|</li><li><a href="javascript:;">注册</a></li><li class="line">|</li><li><a href="javascript:;">消息通知</a></li></ul></div></div><div class="header-wrapper"><div class="header w clearfix"><h1 class="logo"><a href="/"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\logo-mi2.png" alt=""></a></h1></div><div class="header-list clearfix"><ul class="nav"><li><a class="all-goods" href="#">全部商品分类</a></li><!-- 创建一个左侧导航菜单 --><ul class="left-menu"><li><a href="#">手机 电话卡</a></li></ul><li><a href="#">小米手机</a></li><li><a href="#">Redmi 红米</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><li><a href="#">服务</a></li><li><a href="#">社区</a></li><!-- 创建一个弹出层 --><div class="goods-info"></div></ul><div class="search-warpper"><form action="search" action="#" ><input class="search-inp" type="text"><a href="#"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\搜索框.png" alt=""></a></form></div></div></div></body></html>
二、CSS美化样式
/* 顶部导航条的样式 */.topbar-wrapper{/* 设置宽度全屏 */margin-top: -8px;width: 100%;height: 40px;line-height: 40px;background-color: #333;position: relative;}/* 设置超链接颜色 */.topbar a{font-size: 13px;color: #b0b0b0;}/* 设置左侧导航栏 */.service, .topbar li{/* 使标签整体并排 */float: left;/* 无序样式列表无 */list-style: none;margin-top: -1px;margin-left: 4px;padding-left: 3px;color:gray;}.app:hover .qracode{display: block;}/* 设置下载app的下拉 */.app .qracode{display: none;position: absolute;left:-35px;width: 124px;height: 148px;line-height: 1;text-align: center;background-color:#fff ;box-shadow: 0 0 10px rgba(0, 0, 0, .3);}.app{position: relative;}/* 设置二维码的图片 */.app .qracode img{width: 90px;margin: 17px;margin-bottom: 2px;}/* 设置二维码中的文字 */.app .qracode span{color: #000;font-size: 14px;}/* 鼠标移动到下载app处打开 */.app-wrapper:hover>.app .qracode{display: block;}/* 设置app的下三角 */li:hover >.app::after{display: none;content: '';position: absolute;line-height: 1;width: 0;height: 0;/* 设置四个方向的边块 */border: 6px solid transparent;/* 去除上边框 */border-top: none;/* 单独设置下边框的颜色 */border-bottom-color: #fff;bottom: -12px;left: 0;right: 0;margin: auto;}/* 设置导航条标签鼠标移动的颜色 */.service li a:hover{color: #fff;}.shop-cart img{padding-top: 4px;}/* 设置右侧导航栏 */.shop-cart, .user-info{float:right ;margin-top: 0px;padding-left: 25px;}.user-info a:hover{color: #fff;}.shop-cart:hover a{color: #fff;}/* 设置中间的header */.header{height: 100px;}.header .logo{float: left;margin-top: 22px;margin-left: -800px;width: 55px;height: 55px;}.header .logo img{position: absolute;width: 55px;height: 55px;}.header .logo a img:hover{padding-left: 1px;}.header-list{float: left;margin-top: -70px;margin-left: 200px;}.header-list li{float: left;list-style: none;padding-left: 35px;font-weight: 500;}.header-list li a:hover{color: #f33;}.all-goods{visibility: hidden;}.nav li:hover ~ .goods-info,.goods-info:hover{height: 228px;border-top: 1px solid rgb(224, 224, 224);box-shadow: 0 5px 3px rgba(0, 0, 0, .2);}.nav .goods-info{height: 0;overflow: hidden;width: 100%;background-color: #fff;position: absolute;top: 110px;left: 0; transition: height 0.3s;}/* .search-warpper{float: right;} *//* .search-warpper form{margin-left: 200px;} */.search-warpper{float: right;}/* 设置input获取焦点后的样式 */.search-warpper .search-inp:focus{outline: 1px solid #ff6700;}/* 设置搜索框的图片样式,这里没有使用图片家族 */.search-warpper img{float: left;height: 50px;width: 52px;border: none;padding: 0;background-color: #fff;color: #616161;font-size: 18px;border-left: 2px solid rgb(224, 224, 224);position: absolute;right: 46px;margin-top: -20px}/* 文本框的长度宽度以及颜色 */.search-warpper .search-inp{width: 227px;float: left;padding: 0 10px;height: 46px;font-size: 16px;position: absolute;right: 100px;margin-top: -20px}
