小米商城官网地址小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米电视官方网站
一、头部
1、效果图
2、网页结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米官网</title>
<link rel="stylesheet" href="./header.css" >
<link rel="stylesheet" href="./iconfont.css">
<link rel="stylesheet" href="./mi.css">
<link rel="stylesheet" href="./reset.css">
<link rel="icon" href="./images/favicon.ico" >
</head>
<body>
<div class="header">
<div class="content">
<div class="header-left">
<ul class="header-left-ul">
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">loT</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 class="header-download"><a href="#">
下载app</a><span>|</span>
<div class="header-download-div">
<img src="./images/78c30d4f259ed43ab20e810a522a6249.png" />
<span>小米商城APP</span>
</div>
</li>
<li><a href="#">智能生活</a><span>|</span></li>
<li><a href="#">Select Location</a><span>|</span></li>
</ul>
</div>
<div class="header-right">
<ul class="header-right-ul">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a><span>|</span></li><span>|</span>
<li class="shop-li">
<a href="#">
<i class="iconfont"></i>购物车(0)
<div class="shop-div">
<span>购物车中还没有商品，赶紧选购吧！</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
3、css样式
/* 头部 */
*{
margin: 0;
padding: 0;
}
/* 头部设置 */
.header{
width: 100%;
height: 40px;
background-color: #333;
}
.content{
width: 1226px;
height: 40px;
margin: 0 auto;
text-align: center;
line-height: 40px;
}
li{
list-style-type: none;
}
.content a{
text-decoration: none;
color: #b0b0b0;
font-size: 12px;
}
.content a:hover{
color: white;
}
.header-left{
float: left;
}
.header-right{
float: right;
}
.header-left-ul>li{
float: left;
}
.header-right-ul>li{
float: left;
}
.content li span{
color: #424242;
margin: 0 6px;
}
.shop-li{
background-color: #424242;
margin-left: 25px;
width: 120px;
height: 40px;
position: relative;
}
.shop-li i{
margin-right: 4px;
}
.shop-li:hover{
background-color: white;
cursor: pointer;
}
.shop-li:hover>a>font{
color: coral;
}
/* 头部下拉设置 */
.header-download{
position: relative;
}
.header-download-div{
position: absolute;
top: 40px;
left: 50%;
margin-left: -62px;
width: 124px;
height: 0;
overflow: hidden;
background-color: white;
box-shadow: 0px 1px 5px #aaa;
transition: all .3s;
}
.header-download-div img{
width: 90px;
height: 90px;
margin: 18px auto 12px;
display: block;
}
.header-download-div span{
font-size: 14px;
font-weight: 400;
line-height: 20px;
display: block;
padding-bottom: 10px;
}
.header-download:hover >.header-download-div{
height: 150px;
}
/* 购物车显示 */
.shop-div{
position: absolute;
right: 0px;
top:40px;
width: 316px;
height: 0;
background-color: white;
box-shadow: 0px 2px 10px rgba(0, 0, 0, .15);
text-align: center;
line-height: 80px;
overflow: hidden;
transition: all .3s;
}
.shop-li:hover >a> .shop-div{
height: 80px;
}
4、问题
1、悬浮到购物车文字上时，文字自动变为白色，在页面中查看源代码多出了font需要在悬浮显示内容中设置在a后面
2、左右两边都有数据时，需要设置两个div包裹起来使用float定位分别设置left和right，里面的数据在设置为float:left浮动，如果不设置两个div直接对数据设置左右浮动那么右侧数据将会反过来
3、经过头部标题显示的内容通过定义高度来显示，不是通过display设置。将显示内容的区域height设置为0 ，将显示手动内容通过overflow：hidden隐藏起来在经过标题时设置高度显示，设置transition实现加载的动画，设置box-shadow阴影将内容边框显示出来
4、购物车图片是引入进来的代码如下，通过class设置iconfont来引用
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1548064192113'); /* IE9 */
src: url('iconfont.eot?t=1548064192113#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1548064192113') format('woff'),
url('iconfont.ttf?t=1548064192113') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1548064192113#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-15tianwuliyoutuihuo:before {
content: "\e606";
}
.icon-liwu:before {
content: "\e657";
}
.icon-iconfonticon5:before {
content: "\e615";
}
.icon-shouji01:before {
content: "\e622";
}
.icon-gouwuche:before {
content: "\e653";
}
.icon-icon:before {
content: "\e666";
}
.icon-zhizhen:before {
content: "\e64d";
}
.icon-jiantou2:before {
content: "\e63e";
}
.icon-youjiantou:before {
content: "\e658";
}
.icon-buoumaotubiao46:before {
content: "\e629";
}
.icon-jiantouyou:before {
content: "\e62a";
}
.icon-fangdajing:before {
content: "\e63d";
}
.icon-jiantou:before {
content: "\e616";
}
.icon-jiantou_zuo:before {
content: "\e617";
}
.icon-duihua:before {
content: "\e710";
}
.icon-dianhuaqia:before {
content: "\e733";
}
.icon-chongzhijilu:before {
content: "\e64c";
}
.icon-gouwuche1:before {
content: "\e735";
}
.icon-kefu:before {
content: "\e6ab";
}
.icon-liwu1:before {
content: "\e62b";
}
.icon-qitianwuliyoutuihuan:before {
content: "\e63f";
}
.icon-F:before {
content: "\e61f";
}
二、
标签：font,网页,height,content,header,-----,头部,icon,before From： https://www.cnblogs.com/lixianhui/p/18176961