制作隔行变色的商品列表_开心网案例 游戏菜单导航制作 html 1003

11 游戏导航左右盒子制作 演练 开心网首页的布局与制作 1003

开始这个的制作

先量出左右盒子的宽度

190宽，左浮动

520宽，右浮动

220高

》做一个盒子放游戏的目录

.first_line

我们在盒子里放了左边与右边的容器

》让first_line盒子底色可见

目的是查看它的状态变化

给了一个灰色

》让目录与轮播浮动

一个左浮，一个右浮

》清除浮动

父盒子底色，灰色不见了

原因？

子容器全浮动了

父容器感知不到子的存在

需要清除浮动

办法：

写一个清除浮动的样式

clearfix

样式写好后给父级添加上就好

这样父的盒子会被浮动的子级撑开高度

》给浮动的子级设置宽度

width: 190px;

12 左游戏菜单制作 演练 开心网首页的布局与制作 1003

目标

》做一个有七列的列表

》让单元格具有渐变色

先给高度

再给浅变色

行高 26

颜色浅变

#fcfcfc410.

#eaeaea

#f0eeef

》li里面的布局

》先来一个右浮的>

来点右边距

结果

》让文字在li中垂直居中

》箭头的颜色

别人的按钮是个图片

我们的按钮自己做出来的

效果差不多即可

颜色

#dadadb

13 列表文字与图片 演练 开心网首页的布局与制作 1003

》先上背景图片

在li里添加背景

经测试，发现

背景图片与浅变颜色不兼容

》改变策略，插入图片

让图片垂直居中

》左边来一点间距

可考虑给li一点左填充

我们的左填充并不会影响li盒子的大小

因为li没有给宽度

所以不会影响布局

》让图片与文字间距离再大一些

给img一个右边距

》给鼠标划过li一个样式

水平向右的渐变色

#ed9774

#cf4916

》其它内容进行替代

》左侧游戏列表结构完成

空余的时间

把图片，把文字占位的内容进行一个替代即可

14 列表的边框与圆角 演练 开心网首页的布局与制作 1003

》列表的边框

给哪个加？

ul包的li

给ul加边框

边框色

#cccccc

》圆角

给ul一个圆角的效果

四面都是圆角

》超出ul的全部隐藏

overflow

hidden

》把看效果的底色可去掉

15 轮播图盒子制作 演练 开心网首页的布局与制作 1003

》宽度

520 * 195

大约是这样的

》布局

》完成ul li img的布局

》调图片大小

宽给100%

》给图一个高

发现不用给高也可以

原因

如果只给了图片一个宽度

那么高度会等比缩放

》下一个目标，制作

16 悬浮的圆形按钮 演练 开心网首页的布局与制作 1003 HTML

》先做一个无序列表

》让这个ul定位，相对于父盒子定个位

ul绝对定位

div相对定位

》让li浮动起来

》让他们有底色

设置为正方形

变成圆形

让文字有颜色

》文字位置 间距

文字白色

文本居中

》让这些小圆形到右下角去

利用定位，相对于父级

向右，向下

控制偏移

这些数据是通过调试阶段获取的

17 选中的数字样式 演练 开心网首页的布局与制作 1003 HTML

》做一个选中状态的样式

.active

》假设第一个li具有active样式

具有的背景色

#b51c16

》去掉底色