HTML/CSS项目练习——小米首页

项目搭建

搭建

• 创建index.html
• 放css的文件夹，加入reset.css
• 复制fs文件夹，图片文件夹
• 改index.html的title
• 引入reset.css和图标字体
• 新建index.css（专门给主页写样式，名称要对应，方便查找）
• 引入index.css
• 新建base.css，存放公共样式（在每一个页面中都引入）
• 引入base.css

公共样式

• 写clearfix
• 统一网页的字体，写在body中

顶部导航结构

公共样式

• 给body加上min-width，限定最小宽度
• 设置类w，表示中间容器

• 固定容器宽度
• 居中

• a

• 去下划线
• 统一颜色 #333

index

• 顶部导航条外部容器topbar-wrapper
• →内部容器 topbar w
• →→ul service 左侧导航
• →→→li→a 内容
• →→→li line 竖线
• →→ul shop-cart 购物车
• →→→li→a&i（图标字体）内容
• →→ul user-info（结构和service一样，故省略）登陆注册信息

顶部导航样式

• .topbar-wrapper

• width100%
• height 40
• line-height 40
• background-color #333

• .topbar .service, li

• 向左浮动

• .shop-cart,.user-info

• 向右浮动

高度塌陷，给topbar加上clearfix

• .topbar a

• font-size 12
• color #b0b0b0
• 成为块元素（整块都可以点击）

• .topbar a:hover

• color #fff

• .topbar .line

• color #424242
• font-size 12
• margin 0 8px

• .shop-cart

• margin-left:26px

• .shop-cart a

• width 120px
• background-color #424242
• text-align center

• .shop-cart i

• margin-right 2px

• .shop-cart:hover a(hover必须给shop-cart，为了下拉层)

• background-color white
• color ##FF6700

下拉层

• .service→li(.app-wrapper)→a(.app)（下载app处）→div(.qrcode)→img&span

• .app

• position: relative;

• .app .qrcode

• position: absolute（它不应该在父元素中占据位置，把select location挤到后面）
• left: -40px (让二维码框位于正中间)
• width: 124px
• height: 0（必须写高度为0，否则默认auto，过渡无法实现）
• overflow: hidden (需要隐藏掉图片和字)
• /* margin-left: -62px; */
• line-height: 1 (字继承了之前的40px行高，所以被挤下去了，现在需要去除这个效果)
• text-align: center
• background-color: #fff
• box-shadow: 0 0 10px rgba(0, 0, 0, .3)
• transition: height 0.3s
• z-index: 9999

• app:hover .qrcode,.app:hover::after（注意这里的写法）

• display block
• height 148（为了做过渡效果）

• .app .qrcode img

• width 90
• margin 17
• margin-bottom 10

• .app .qrcode span

• color #000(避免鼠标移入后字变白色)
• font-size 14

• .app::after（做小三角）

• border 8px solid transparent
• content: ‘’
• width 0
• height 0（不写0，会出现梯形而不是小三角）
• border-top none
• border-bottom-color #fff
• position absolute（同时给 .app 开启相对定位）
• bottom 0
• left 0
• right 0
• margin auto
• display none

头部logo

结构

• 折叠上方的代码
• 创建头部外部容器div(.header-wrapper)
• →div(.header w clearfix(防止外边距重叠，但其实对浮动元素可以不写))
• →→h1(.logo) (title=“小米”) 内容写“小米官网”（为了让浏览器爬取该信息）
• →→→a(href="/" 返回主页)(.home)
• →→→a(.mi)

样式

.header

• height 100

.header .logo

• 向左浮动
• margin-top 22.5
• width55
• height 55
• position relative
• overflow hidden（只能看见右边的正方形）
• text-indent -10px（首行往左缩进，不会显示“小米官网”）

.header .logo a

• width 55
• height 55
• background-color ##ff6700
• background-image url()
• background-position center
• position absolute(改变两个小正方形的排列方式)
• left 0（如果不写left值为auto，无法实现过渡效果）
• transition left 0.3s

.header .logo .home

• left -55
• background-image url(改成房子图标的图片)

.header .logo:hover .mi

• left 55

.header .logo:hover .home

• left 0

头部导航条

结构

在header-wrapper内：

• →div(.nav-wrapper)
• →→ul(.nav clearfix)
• →→→li→a
• 给第一个li设置.all-goods

样式

• .header .nav-wrapper

• 向左浮动
• margin-left 7

• .header .nav

• width 不写(被内容撑开)
• height 100
• line-height 100
• padding-left 58

• .nav > li（只对其子元素设置）

• 向左浮动

• .nav-wrapper li a

• font-size 16
• margin-right 20
• display block

• .nav-wrapper li a

• color #FF6700

• .all goods

• visibility hidden

头部导航下拉层

结构

在ul(.nav)下

• →div(.goods-info)
• li除了第一个和最后两个，其它加.show-goods

按住alt键，点击li后面，可以出现很多个光标，可以一起对li进行修改。

样式

• .header-wrapper

• position relative(让下拉层相对header-wrapper定位)
• 小技巧，可以给不同的容器等设置背景颜色来看它们的范围，从而决定相对于谁定位

• .nav .goods-info

• height 0
• overflow hidden(为了不显示，还要过渡效果)
• transition height 0.3s
• width 100%
• position absolute
• top 100
• left 0
• z-index 9999(思考下拉层的层级)

• .nav .show-goods:hover ~ .goods-info,
  .goods-info:hover(为了鼠标移入下拉层后，它不消失)
  (由于优先级相同产生的覆盖问题，这个必须写在上一个的下面)

• height 228
• border-top 1 solid rgb(224,224,224)
• box-shadow 0 5 3px rgba(0,0,0,.2) 第二个值设置5是去掉上边的阴影

右侧搜索框

结构

在head-wrapper内：
div(.search-wrapper)
→form(.search)
→→input(.search-inp)
→→button(.search-btn)→i(图标字体)

样式

• .search-wrapper

• width 296
• height 50
• 向右浮动
• margin-top 25

• .search-wrapper .search-inp

• // width 244（计算、调试得到，加padding后减20）
• box-sizing border-box
• width 224
• 向左浮动（使缝消失）
• height 50
• border none
• padding 0 10
• border 1 solid rgb(224,224,224)
• outline none

• search-wrapper .search-inp:focus,
  .search-wrapper .search-inp:focus + button

• border-color #FF6700

• .search-wrapper .search-btn

• 向左浮动（使缝消失）
• border none
• height 50
• width 52
• padding 0
• background-color #fff
• colro #616161
• font-size 16
• border-left 1 solid rgb(224,224,224)
• border-left none

• .search-wrapper .search-btn:hover

• background-color ##FF6700
• color white

左侧导航条

结构

写在第一个li(.all-goods-wrapper)里面：
ul(.left-menu)→li→a（写字）→i（图标字体）

• .all-goods-wrapper

• position relative

• .left-menu

• width 234
• height 460
• line-height 1
• background-color
• position absolute
• z-index 999
• left -120
• padding 20 0

• ul .left-menu li a（这个得写在.nav-wrapper li a的上边）

选择器写得越精确，优先级越高。

• display block
• height 42
• line-height 42
• color white
• margin-right 0
• padding 0 30
• font-size 14

• ul .left-menu li a:hover

• color white
• background-color #FF6700

• .left-menu a i

• 向右浮动
• line-height 42

完成banner

结构

和其它外部容器并列：
div(.banner-wrapper)
→div(.banner)
→→ul(.img-list)
→→→li()→a→img
→→div(.pointer)
→→→a*5
→→ div(.prev-next)
→→→a(.prev)
→→→a(.next)

样式

• banner

• position relative
• banner 460（网友：绝对定位带来的高度塌陷问题不能用clearfix解决）

• .banner .img-list li

• position absolute

• .banner img

• width 100%
• vertical-align top（除去中间的边距）

• pointer

• position absolute
• bottom 22
• right 35

• .pointer a

• 向左浮动
• width 6
• height 6
• border-radius 50%
• margin-left 6
• background-color rgba(0,0,0,.4)
• border 2 solid rgba(255,255,255,.4)

• .pointer a:hover

• border-color rgba(0,0,0,.4)
• background-color rgba(255,255,255,.4)
  反色处理

• .prev-next a

• width 41
• height 69
• background-image
• position absolute
• top 0
• bottom 0
• margin auto 0

• .prev-next .prev

• left 234
• background-position -84 0

• .prev-next .prev:hover

• background-position: 0 0

• .prev-next .next

• right 0
• background-position -125 0

• .prev-next .next:hover

• background-position -42 0

右侧工具条

和其它外部容器并列：
div(.back-top)

• .back-top

• width 26
• height 206
• background-color
• position fixed
• bottom 60
• right 50%
• margin-right -639

中间广告栏

结构

div(.ad w)
→ul(.shortcut)
→→li→a→i(仅第一个)
→ul(.imgs)
→→li→a→img

样式

• .ad

• height 170
• margin-top 14

• .ad .shortcut, .ad .imgs, .ad li

• 向左浮动

• .ad .shortcut

• width 228
• height 168
• background-color #5f5750
• margin-top 14
• padding-top 2（显示上边框）
• padding-left 6

• .ad .shortcut li

• position relative

• .ad .shortcur li::before

• content ‘’
• position absolute
• width 64
• height 1
• background-color #665e57
• left 0
• right 0
• top 0
• margin 0 auto（边框线居中）

• .ad .shortcut li::after

• content ‘’
• position absolute
• height 70
• width 1
• background-color #665e57
• top 0
• bottom 0
• margin auto 0
• left 0

• .ad .shortcut a

• display block
• color #cfccca
• height 84
• width 76
• text-align center
• font-size 12
• overflow hidden（开启bfc，去掉外边距重叠问题）

• .ad .shortcut a:hover

• color #fff

• .ad .shortcut i

• display block
• margin-top 20
• margin-bottom 6
• font-size 20

• .ad .imgs li

• width 316
• margin-right 15

• .ad .imgs img

• width 100%
• vertical-align top

• .ad .imgs li:last-child

• margin 0（清除最右边图片的外边距，从而三张图片可以在一行上）

项目补充

网站图标的图片：网站/favicon.ico 查看网站图标并右键另存为下载（部分网站可用）

插入图标：

 <link rel="icon" href="./favicon.ico">
 <!-注意rel不是stylesheet-->

---

练习总结

练习的方法：先照着原代码敲，敲几步就看看效果，然后继续敲，一边敲一边想，把思路记下来。

topbar

导航条部分

结构没什么注意的，已经很熟悉了
（写项目最重要的，就是合理的html结构，并且给正确的元素绑定css）

• 给topbar-wrapper设置高度的时候，记得line-height
• 需要购物车内文字居中时，请记得text-align:center

二维码部分

这个部分我也算写得比较熟了，需要注意的就是：

.app:hover .qrcode,
.app:hover::after

这个写法我容易忘记↑

写三角形的口诀：宽高零，一边无，一有色，三透明

header

最外层的容器毫无疑问是header-wrapper，内套header，内层容器莫忘w和clearfix

logo

• 外层容器是h1，里边有2个a，不使用img标签，外层容器要开overflow:hidden
• 对外层容器开启相对定位，统一设置a，开启绝对定位，left设为0，将a的背景图片设置为某一张logo图（background-image:url()），开启过渡
• 将.home移动到.mi的右侧，修改.home的logo图
• 对a开启hover，改变left值（注意是.logo:hover！）

本身是很简单的操作，被我嵌套了n层容器，使用了好几次相对定位，最后鼠标移上去还没反应…

第二次，写成.mi:hover，.home:hover，然后h忘开浮动，导致图片在logo区域只能显示上半部分