小米商城导航栏
问题描述:利用刚学知识创建如下图样式的页面。
思路:由图可知,该部分分为左右两个板块,可以使用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;
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动搭配标准流父级使用</title>
<style>
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);
}
</style>
</head>
<body>
<div>
<div class="left">
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 显示器</a>
<a href="#">家电 插线板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">电源 配件</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音箱</a>
<a href="#">生活 箱包</a>
</div>
<div class="right">
<a href="#"><img src="02.png" alt=""></a>
</div>
</div>
</body>
</html>
运行结果:
PS:实际上图片是嵌入在侧边栏下方,但自己还不太懂如何设计,等以后学会了再来更新。网页查看元素时发现,自己设置的文字大小和页面大小普遍偏大,可能是使用浏览器不同的缘由(因为自己使用火狐浏览器查看的小米页面,运行结果使用的是Internet Explorer查看)也有可能是因为自己截图显示的较大。而且为了方便敲写代码,数值均取为较整的数。读取页面长宽或者某些元素的颜色时,可以使用PhotoShop相关工具测量更准确。