|
小米商城导航栏
问题描述：利用刚学知识创建如下图样式的页面。  思路：由图可知，该部分分为左右两个板块，可以使用2个div盒子进行放置内容，并且左右两部分是无间隔连接在一起的，所以可以考虑使用CSS浮动，将左右两个板块放置在一个大的div盒子中。使用微信或者QQ截图工具读取出 侧边栏----width: 350px; height: 700px; background-color: rgb(108,119,116); 当鼠标移动到对应图标上时，background-color: rgb(255,103,0); 图片----width: 1400px; height: 700px; 实现代码：
浮动搭配标准流父级使用
div {
width: 1750px;
height: 700px;
/*放置背景颜色查看是否成功创建div盒子*/
background-color: skyblue;
margin: 0 auto;
}
.left {
float: left;
width: 350px;
height: 700px;
background-color: pink;
}
.right {
float: right;
width: 1400px;
height: 700px;
}
.left a {
width: 350px;
height: 70px;
line-height: 70px;
font-size: 20px;
color: white;
background-color: rgb(108, 119, 116);
text-decoration: none;
padding-left: 50px;
display: block;
}
.left a:hover {
background-color: rgb(255,103,0);
}
手机 电话卡
电视 盒子
笔记本 显示器
家电 插线板
出行 穿戴
智能 路由器
电源 配件
健康 儿童
耳机 音箱
生活 箱包
![span""/span](span"02.png"/span)
运行结果：  PS:实际上图片是嵌入在侧边栏下方，但自己还不太懂如何设计，等以后学会了再来更新。网页查看元素时发现，自己设置的文字大小和页面大小普遍偏大，可能是使用浏览器不同的缘由（因为自己使用火狐浏览器查看的小米页面，运行结果使用的是Internet Explorer查看）也有可能是因为自己截图显示的较大。而且为了方便敲写代码，数值均取为较整的数。读取页面长宽或者某些元素的颜色时，可以使用PhotoShop相关工具测量更准确。
|