使用HTML制作简单的小米界面(部分)
以下为最终的效果图
需要实现的效果
- 最左边展示最新手机图片
- 右边并排展示销售的手机界面
- 每个块级元素并排
- 鼠标移动到块元素时出现阴影和向上弹起的效果
制作思路
- 使用HTML的div标签制作一个一级大盒子,实现整体大框架
- 在大框架中设置两个div标签,作为两个二级子盒子,分别放左边的图片以及右边的手机展示
- 在右边的div盒子中制作出八个放置手机展示的三级子盒子
- 在三级子盒子中插入图片以及文字
- 设置各个级别盒子的属性:宽、高、背景色、排版样式
- 实现鼠标移动到三级盒子上时产生阴影以及弹起效果
开始制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米界面</title>
<style>
<!--*号表示选中所有标签属性,margin、padding设置为0
表示内外边距为0-->
*{
margin: 0;
padding: 0;
}
/*body为网页可视部分,使用background设置背景色*/
body{
background-color: #f5f5f5;
}
/*.box选中一级盒子,设置宽度、高度、浮动、内边距
使用了浮动,就可以不使用display:inline-block*/
.box{
width: 1234px;
height: 628px;
float: left;
padding: 50px;
}
/*.box1设置左边盒子、宽、高、背景色、浮动*/
.box1{
width: 234px;
height: 614px;
background-color: black;
float: left;
}
/*.box2设置左边盒子、宽、高、浮动*/
.box2{
width: 992px;
height: 614px;
float: left;
}
/*设置box3中box4的属性,
list-style去除列表前面的小圆点
box-sizing声明c3属性,调整内边距时不改变盒子大小
text-align设置图片居中对齐*/
.box3 .box4{
list-style: none;
width: 234px;
height: 300px;
background-color: white;
float: left;
box-sizing: border-box;
text-align: center;
margin: 0 0 14px 14px;
}
/*hover为伪类元素,效果为鼠标移动到块级元素时产生变化
box-shadow 阴影属性 :水平阴影大小 垂直阴影大小 模糊距离 阴影尺寸 颜色 内inset /外 outset
变换属性 transform:
平移:translateX translateY(100px)
缩放: scale(0.5)
倾斜: skew(-120deg)
旋转:rotate(360deg)*/
.box4:hover {
box-shadow: 0 0 20px 0 gray;
transform: translateY(-2px);
}
.box4 .text1{
display: inline-block;
width: 214px;
height: 18px;
font-size: 14px;
text-align: center;
font-family: 微软雅黑;
}
.box4 .text2{
display: inline-block;
width: 214px;
height: 18px;
margin: 0 10px 10px 10px;
font-size: 12px;
color: #b0b0b0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-family: 微软雅黑;
}
.box4 .text3{
color: #ff6700;
text-align: center;
margin: 0 10px 14px 10px;
}
</style>
</head>
<body>
<!--创建一级盒子,类名为box-->
<div class="box">
<!--创建两个二级盒子,class分别为box1、box2-->
<div class="box1"><img src="images/xm.jpg" width="234px" height="614" alt=""></div>
<div class="box2">
<!--在二级盒子box2中创建八个三级盒子,使用ul列表标签-->
<ul class="box3">
<!--三级盒子中加入需要插入的图片以及文字,图片使用img标签,文字使用p标签-->
<li class="box4">
<img src="images/download.jpg" width="160px" height="160px" alt="">
<p class="text1">小米8 青春版 4G+16GB</p>
<p class="text2">潮流镜面渐变色,2400万自拍旗舰</p>
<p class="text3">1399元</p>
</li>
<li class="box4">
<img src="images/download.jpg" width="160px" height="160px" alt="">
<p class="text1">小米8 青春版 4G+16GB</p>
<p class="text2">潮流镜面渐变色,2400万自拍旗舰</p>
<p class="text3">1399元</p>
</li>
<li class="box4">
<img src="images/download.jpg" width="160px" height="160px" alt="">
<p class="text1">小米8 青春版 4G+16GB</p>
<p class="text2">潮流镜面渐变色,2400万自拍旗舰</p>
<p class="text3">1399元</p>
</li>
<li class="box4">
<img src="images/download.jpg" width="160px" height="160px" alt="">
<p class="text1">小米8 青春版 4G+16GB</p>
<p class="text2">潮流镜面渐变色,2400万自拍旗舰</p>
<p class="text3">1399元</p>
</li>
<li class="box4">
<img src="images/download.jpg" width="160px" height="160px" alt="">
<p class="text1">小米8 青春版 4G+16GB</p>
<p class="text2">潮流镜面渐变色,2400万自拍旗舰</p>
<p class="text3">1399元</p>
</li>
<li class="box4">
<img src="images/download.jpg" width="160px" height="160px" alt="">
<p class="text1">小米8 青春版 4G+16GB</p>
<p class="text2">潮流镜面渐变色,2400万自拍旗舰</p>
<p class="text3">1399元</p>
</li>
<li class="box4">
<img src="images/download.jpg" width="160px" height="160px" alt="">
<p class="text1">小米8 青春版 4G+16GB</p>
<p class="text2">潮流镜面渐变色,2400万自拍旗舰</p>
<p class="text3">1399元</p>
</li>
<li class="box4">
<img src="images/download.jpg" width="160px" height="160px" alt="">
<p class="text1">小米8 青春版 4G+16GB</p>
<p class="text2">潮流镜面渐变色,2400万自拍旗舰</p>
<p class="text3">1399元</p>
</li>
</ul>
</div>
</div>
</body>
</html>
此界面并未加链接,只能实现排版以及鼠标移动到手机块上产生阴影以及弹起的效果,可作为HTML的初学者练习熟悉一些基本操作。