1.有关项目的基本结构：
|--html 文件与 CSS 文件单独设置分开。
|--在html中引入：
|--重置样式表
|--网页基本样式表:所有网页所共有使用的部分:网页宽度、网页字体、颜色、设置最小宽度、clearfix，消除浮动带来的影响
|--图标字体库
|--结构：
|--CSS：文件夹（bace.css、index.css、reset.css、all.css）
|--Img：图片文件夹
|--fas：图标字体库
|--html文件(index.html)
具体的实现分析：
一、顶部导航条
1. 先把结构写出来
|--创建外部容器，class="top_bar_wrapper"
|--实际内容容器,class = "top_bar"
|--左边导航条，class = "service"
|--具体每一项用列表实现 ，都一样不需要另外设置样式的不用设置class
<ul> <li>li> ul>
|--分割线 '|'，需要设置样式，则设置class
| li>
|--中间登录信息，class = "user-info"
|--右边购物车，class = "shop-car"
2.设置顶部导航条的样式
|--大体布局
|--容器的背景颜色、行高
|--整体的浮动布局
|--左边导航块需要向左浮动，个人信息与购物车向右浮动
|--内部的 li 全部向左浮动，才能显示在一行
|--具体设置样式
|--超链接部分：文本字体、hover效果
|--各种 margin 间距细微的调节
|--购物车样式 ：背景、hover效果
3.设置顶部导航条中下拉框的样式
|-- 分析结构：因为整个下拉框都可以点击，所以内容在a里面
|--在列表 中的app超链接中 中有一个块元素，块元素：图片img+span文字
|--app显示下面还有一个三角形，利用伪元素 after 添加一个 边框
|-- 影响因素：
|--因为父元素是外部导览框，设置了line-height为40，所以会影响里面的span
那么需要重置 line-height：1
|--下拉块元素设置了宽高，但是父元素的宽高不够，相当于宽度上撑开了app的宽度，
高度上是溢出的，加上位置上需要细微调整，所以开启绝对定位，那么app也要开启
相对定位。
|-- 再设置样式
|--背景
|--文字样式
|--定位、布局
|--平常显示，点击出现、出现的效果如何处理 animation ：height
二、头部导航块
1.分析结构
|--最外层有个头部容器 class="hearder-wrapper"
|--中间实际的内容容器 class = "hearder"
logo块向左浮动
|--左边logo块，logo一般比较重要，设置成 h1 class = "logo"
|--鼠标hover出现“小米官网”的显示，直接设置title可以
|--logo图片可以点击，所以是超链接 <a> 里面放置 <img>
|--有两张图片链接，所以设置两个超链接，隐藏一个，设置偏移量实现。
一个超链接的通用格式，另一个单独设置背景图片，偏移量实现切换的效果
<h1 class="logo" title="小米官网">
a>
a>
h1>
|--中间导航块 class = "nav"
|--<ul>ul>里面很多个<li>li> 里面放置超链接 <a>a>
|--<li>li>可以显示下拉菜单
|--只有部分内容点击会出现下拉框，所以另外给某些li设置 class="hover-show"
|--下拉菜单栏 class="show",分析其宽度直接是全屏宽度，所以开启相对定位的父类应为 header-wrapper
|--右边搜索块外部容器 class = "search-wrapper"
利用<form action="#">form>里面设置表单选项，输入框
|--左边文本输入框 ，<input type="text">，class = "search-info"
|--右边提交按钮，<button>button>，插入图标字体 class="search-botton"
2.样式设置
|--logo
背景图片切换，开启绝对定位，用 transition +偏移量
3. 下面的左侧导航，是嵌套在头部导航条中的 全部商品分类中。class = "nav-list-menu"
每一个都是超链接，则结构为：<li><a href="">a>li>
结构应为：
<div class="nav">
<ul>
以下是index的html文件:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
小米商城 - 小米10 Pro、Redmi 10X、小米MIX Alpha，小米电视官方网站
title>
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/index.css">
<link rel="stylesheet" href="./CSS/base.css">
<link rel="stylesheet" href="./fa/css/all.css">
head>
<body>
<div class="top_bar_wrapper">
<div class="top_bar w clearfix">
<div class="service">
<ul>
<li>
<a href="javascript:;">小米商城a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">MIUIa>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">loTa>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">云服务a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">金融a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">有品a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">小爱开放品台a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">企业团购a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">资质证照a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">协议规则a>
li>
<li class="split"> | li>
<li>
<a class="app" href="javascript:;">
下载app
<div class="qrcode">
<img src="./img/download.png" alt="">
<span>小米商城APPspan>
div>
a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">智能生活a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">Selection Locationa>
li>
ul>
div>
<div class="shop-car">
<ul>
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart">i>
购物车（0）
<div class="shop-car-info">
购物车中还没有商品，赶紧选购吧！
div>
a>
li>
ul>
div>
<div class="user-info">
<ul>
<li>
<a href="javascript:;">登录a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">注册a>
li>
<li class="split"> | li>
<li>
<a href="javascript:;">消息通知a>
li>
ul>
div>
div>
div>
<div class="header-wrapper">
<div class="header w">
<h1 class="logo" title="小米官网">
<a class="mi " href="javascript:;">a>
<a class="home" href="javascript:;">a>
h1>
<div class="nav">
<ul>
<li class="nav-list-menu">
<a href="javascript:;">
全部商品分类
a>
<ul class="nav-list">
<li>
<a href="javascript:;">
手机 电话卡
<i class="fas fa-angle-right">i>
a>
li>
<li>
<a href="javascript:;">
电视 盒子
<i class="fas fa-angle-right">i>
a>
li>
<li>
<a href="javascript:;">
笔记本 显示器
<i class="fas fa-angle-right">i>
a>
li>
<li>
<a href="javascript:;">
家电 插线板
<i class="fas fa-angle-right">i>
a>
li>
<li>
<a href="javascript:;">
出行 穿戴
<i class="fas fa-angle-right">i>
a>
li>
<li>
<a href="javascript:;">
智能 路由器
<i class="fas fa-angle-right">i>
a>
li>
<li>
<a href="javascript:;">
电源 配件
<i class="fas fa-angle-right">i>
a>
li>
<li>
<a href="javascript:;">
健康 儿童
<i class="fas fa-angle-right">i>
a>
li>
<li>
<a href="javascript:;">
耳机 音箱
<i class="fas fa-angle-right">i>
a>
li>
<li>
<a href="javascript:;">
生活 箱包
<i class="fas fa-angle-right">i>
a>
li>
<div class="show-right">div>
ul>
li>
<li class="hover-show"><a href="javascript:;">小米手机a>li>
<li class="hover-show"><a href="javascript:;">Redmi红米a>li>
<li class="hover-show"><a href="javascript:;">电视a>li>
<li class="hover-show"><a href="javascript:;">笔记本a>li>
<li class="hover-show"><a href="javascript:;">家电a>li>
<li class="hover-show"><a href="javascript:;">路由器a>li>
<li class="hover-show"><a href="javascript:;">智能硬件a>li>
<li><a href="javascript:;">服务a>li>
<li><a hclass="hover-show" ref="javascript:;">社区a>li>
<div class="show">div>
ul>
div>
<div class="search-wrapper">
<form class="search" action="#">
<input class="search-info" type="text" name="search">
<button class="search-botton">
<i class="fas fa-search">i>
button>
form>
div>
<div class="banner">
<div class="banner-wrapper w clearfix">
<div class="banner-img-list">
<ul>
<li>
<a href="javascript:;">
<img src="./img/banner1.jpg" alt="">
a>
li>
<li>
<a href="javascript:;">
<img src="./img/banner2.jpg" alt="">
a>
li>
<li>
<a href="javascript:;">
<img src="./img/banner3.jpg" alt="">
a>
li>
<li>
<a href="javascript:;">
<img src="./img/banner4.jpg" alt="">
a>
li>
ul>
div>
<div class="pointer">
<a href="javascript:;">a>
<a href="javascript:;">a>
<a href="javascript:;">a>
<a class="active" href="javascript:;">a>
div>
<div class="pre-next">
<a class="pre" href="javascript:;">a>
<a class="next" href="javascript:;">a>
div>
div>
div>
div>
div>
<div class="fix-part">
<ul>
<li>
<a class="pic-hover" href="javasrcipt:;">
<i class="fab fa-slideshare">i>
<div class="pic">
<img src="../mi_1/img/download.png" alt="">
扫码领取新<br>
人百元礼包
div>
a>
li>
<li>
<a href="javasrcipt:;">
<i class="fas fa-info">i>
<div class="display-info">
个人中心
div>
a>
li>
<li>
<a href="javasrcipt:;">
<i class="fas fa-phone-volume">i>
<div class="service-after">
售后服务
div>
a>
li>
<li>
<a href="javasrcipt:;">
<i class="fas fa-truck">i>
<div class="human-service">
人工客服
div>
a>
li>
<li>
<a href="javasrcipt:;">
<i class="fas fa-bell">i>
<div class="car-info">
购物车(0)
div>
a>
li>
ul>
div>
<div class="button-wrapper w">
<div class="fast-nav">
<ul>
<li>
<a href="#">
<i class="fas fa-clock">i>
小米秒杀
a>
li>
<li>
<a href="#">
<i class="fas fa-building">i>
企业团购
a>
li>
<li>
<a href="#">
<i class="fas fa-frog">i>
F码通道
a>
li>
<li>
<a href="#">
<i class="fas fa-robot">i>
米粉卡
a>
li>
<li>
<a href="#">
<i class="fas fa-keyboard">i>
以旧换新
a>
li>
<li>
<a href="#">
<i class="fas fa-sim-card">i>
话费充值
a>
li>
ul>
div>
<div class="picture-show">
<ul>
<li>
<a href="javascript:;">
<img src="./1.jpg" alt="">
a>
li>
<li>
<a href="javascript:;">
<img src="./2.jpg" alt="">
a>
li>
<li>
<a href="javascript:;">
<img src="./3.jpg" alt="">
a>
li>
ul>
div>
div>
body>
html>
以下是设置的index.css文件
.top_bar_wrapper{
background-color:#333;
height:40px;
line-height: 40px;
}
.top_bar a{
display:block;
font-size: 12px;
color: #b0b0b0;
}
.service,
.top_bar li{
float: left;
}
.user-info,
.shop-car{
float:right;
}
.split{
font-size:12px;
color:#424242;
margin:0 8px;
}
.top_bar a:hover{
color:white;
}
.shop-car a {
width: 120px;
background-color:#424242;
text-align:center;
}
.shop-car{
margin-left:26px;
}
.shop-car a:hover{
background-color:white;
color:#FF6700;
}
.app{
position: relative;
}
.qrcode{
width: 124px;
height: 0;
background-color: #fff;
box-shadow:0 0 10px rgba(0, 0, 0, .3);
line-height: 1;
text-align: center;
position: absolute;
left:-40px;
overflow: hidden;
transition: height 0.3s;
z-index: 9999;
}
.qrcode img{
width: 90px;
margin:17px;
margin-bottom: 10px;
}
.qrcode span{
font-size: 14px;
color: #000;
}
.app::after{
content: '';
width: 0;
height: 0;
border:8px solid transparent;
border-top:none;
border-bottom-color: white;
position: absolute;
bottom:0;
right: 0;
left: 0;
margin:auto;
display: none;
}
.app:hover .qrcode,
.app:hover::after{
display: block;
height: 148px;
}
.shop-car{
position: relative;
}
.shop-car-info{
width: 320px;
height: 0;
color:black;
text-align: center;
line-height: 100px;
background-color: white;
box-shadow:2px 2px 5px rgba(0, 0, 0, .1),-2px 2px 5px rgba(0, 0, 0, .1);
position: absolute;
right: 0;
overflow: hidden;
transition: height 0.3s;
z-index: 9999;
}
.shop-car:hover .shop-car-info{
height: 100px;
}
.header-wrapper{
height: 100px;
position: relative;
}
.logo{
float:left;
width: 55px;
height: 55px;
margin-top:22px;
position: relative;
overflow:hidden;
}
.logo a{
width: 55px;
height: 55px;
background-image: url(../img/mi-logo.png);
background-position: center;
background-color: #ff6700;
position: absolute;
left:0;
transition:left 0.1s;
}
.logo .home{
position: absolute;
left:-55px;
background-image:url("../img/mi-home.png");
background-position: center;
}
.logo:hover .mi{
left:55px;
}
.logo:hover .home{
left:0px;
}
.nav{
float:left;
margin-left:7px;
padding-left: 58px;
}
.nav >ul> li {
float:left;
}
.nav li a{
display:block;
line-height: 100px;
font-size:16px;
color:black;
margin:0 10px;
}
.nav a:hover{
color:#ff6700;
}
.nav .show{
width: 100%;
height:0px;
overflow: hidden;
background-color:white;
box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
position: absolute;
top:100px;
left:0;
transition:height 0.3s;
z-index: 9999;
}
.nav .hover-show:hover ~ .show,
.nav .show:hover{
height:228px;
border-top:1px solid rgb(224,224,224);
}
.search-wrapper{
width: 296px;
height: 50px;
float: right;
margin-top: 25px;
}
.search-wrapper .search-info{
box-sizing:border-box;
border:none;
outline:none;
float:left;
width: 223px;
height: 48px;
font-size:16px;
border: 1px solid rgb(224, 224, 224);
padding:0 10px;
}
.search-wrapper .search-botton{
box-sizing:border-box;
border:none;
outline:none;
float: left;
height: 48px;
width: 50px;
padding: 0;
background-color: #fff;
color: #616161;
font-size: 16px;
border: 1px solid rgb(224, 224, 224);
border-left:none;
}
.search-wrapper .search-info:focus,
.search-wrapper .search-info:focus + .search-botton{
border-color: #ff6700;
}
.search-wrapper .search-botton:hover{
background-color:#ff6700;
color:white;
}
.nav-list-menu{
position: relative;
}
.nav-list{
width: 234px;
height: 420px;
padding:20px 0;
background-color:rgba(0, 0, 0, .6);
position:absolute;
left:-120px;
z-index: 999;
}
.nav-list li i{
float:right;
font-size:16px;
line-height:42px;
}
.nav-list li a{
display:block;
height: 42px;
line-height: 42px;
color:white;
font-size:14px;
padding:0 30px;
margin:0px;
}
.nav-list li a:hover{
background-color:#ff6700;
color:white;
}
.show-right{
height: 460px;
width: 990px;
visibility: hidden;
background-color:white;
position: absolute;
left:234px;
top: 0px;
box-shadow:0 0 10px rgba(0, 0, 0, .1);
border:1px solid rgba(0, 0, 0, 0.116);
z-index: 999;
}
.nav-list li:hover ~ .show-right {
visibility: visible;
}
.banner-wrapper{
position: relative;
top:100px;
left:0;
}
.banner-img-list li{
position: absolute;
}
.banner-img-list img{
width: 100%;
vertical-align: top;
}
.pointer{
position: absolute;
bottom: -425px;
right: 35px;
}
.pointer a{
float:right;
width: 6px;
height: 6px;
margin-right: 6px;;
border:2px solid rgba(255,255,255,.5);
border-radius: 50%;
background-color:rgba(0, 0, 0, .6);
}
.pointer a:hover,
.pointer a.active{
background-color: rgba(255,255,255,.5);
border:2px solid rgba(0, 0, 0, .6);
}
.pre-next a{
width: 41px;
height: 69px;
background-image: url(../img/icon-slides.png);
position: absolute;
}
.pre {
left:234px;
top:199px;
background-position:-83px 0;
}
.next {
left:1186px;
top:199px;
background-position:-123px 0;
}
.pre:hover{
background-position:0 0;
}
.next:hover{
background-position:-42px 0;
}
.fix-part{
width: 26px;
height: 206px;
border:1px solid rgba(102, 99, 99, 0.1);
position:fixed;
top:392px;
left:50%;
margin-left:613px;
}
.fix-part a:hover{
color:#FF6700;
}
.fix-part li a{
display:block;
line-height: 40px;
font-size:18px;
color:#999999;
text-align: center;
border:1px solid rgba(102, 99, 99, 0.1);
border-right:none;
border-left:none;
border-bottom:none;
}
.fix-part .pic{
width: 124px;
height: 170px;
background-color: #fff;
box-shadow:0 0 10px rgba(0, 0, 0, .3);
line-height: 1;
text-align: center;
font-size:14px;
color:#9B9B9B;
position: absolute;
left:-135px;
top:0;
z-index: 9999;
display: none;
}
.pic img{
width: 90px;
margin:17px;
}
.pic::after{
content: '';
border:10px solid white;
height: 0;
width: 0;
border-right:none;
border-top-color: transparent;
border-bottom-color: transparent;
position: absolute;
right:-10px;
top:10px;
}
.pic-hover:hover .pic{
display: block;
}
.fix-part .display-info,
.fix-part .human-service,
.fix-part .service-after,
.fix-part .car-info{
width: 80px;
height: 40px;
background-color: #fff;
line-height: 40px;
text-align: center;
font-size:14px;
color:#9B9B9B;
position: absolute;
right:35px;
display: none;
}
.display-info{
top:42px;
}
.service-after{
top:84px;
}
.human-service{
top:126px;
}
.car-info{
top:168px;
}
.display-info::after,
.human-service::after,
.service-after::after,
.car-info::after
{
content: '';
border:10px solid white;
height: 0;
width: 0;
border-right:none;
border-top-color: transparent;
border-bottom-color: transparent;
position: absolute;
right:-10px;
top:8px;
}
.fix-part a:hover >div{
display: block;
}
@media all and (max-width:1278px){
.fix-part{
position:fixed;
top:392px;
left:100%;
z-index: 9999;
}
}
.button-wrapper{
position: relative;
top:475px;
width: 100%;
}
.fast-nav,
.picture-show,
.fast-nav li,
.picture-show li{
float:left;
}
.button-wrapper .fast-nav {
width: 228px;
height: 168px;
background-color:#5f5750
}
.fast-nav a{
display:block;
color:#cfccca;
text-align:center;
height: 80px;
width: 73px;
font-size: 12px;
border:1px solid #665E57;
}
.fast-nav i{
display:block;
font-size:20px;
margin-top:20px;
margin-bottom: 10px;
}
.fast-nav a:hover{
color:white;
}
.picture-show li{
width:316px;
margin-left:15px;
}
.picture-show img{
width: 100%;
vertical-align: top;
}
以下是基本样式表：base.css文件
clearfix::beafore,
clearfix::after{
content:'';
display:table;
clear:both;
}
.w{
width: 1226px;
margin:0 auto;
}
body{
font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color:#333;
min-width: 1226;
}
a{
text-decoration:none;
color: #b0b0b0;
font-size:12px;
}
以下是重置样式表 reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
