布局效果图,鼠标移动到图片上图片用定位上移
网站布局:
1.整体入手
2.局部分析
3.调整位置
4.添加样式
开发规范:
目的:提高代码的可维护利用性
代码格式
命名规范
结构语义化
知识点:0.5秒的动画效果 transition: .5s;
<!-- 【超基础】一个简单布局的实现:浮动,及transition过渡 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width: 1240px;
height: 628px;
background-color: #f5f5f5;
margin:100px auto 0;/*上100 左右自适应 下0*/
}
.box .box-hot{
width: 243px;
height: 628px;
float: left;
margin-left: 10px;
}
.box .box-hot a img{
width: 243px;
height: 628px;
}
.box .box-list{
width: 978px;
height: 628px;
float: left;
margin-left: 9px;
}
.box .box-list .list-con{
width: 234px;
height: 300px;
background-color: pink;
float: left;
margin:0px 0px 27px 9px;
position: relative;
transition: .5s;/*0.5秒的动画效果*/
}
.box .box-list .list-con:hover{
top:-10px;/*用定位*/
}
.box .box-list .list-con a img{
width: 160px;
height: 160px;
margin:10px auto;
display: block;
}
.box .box-list .list-con p,h3{
text-align: center;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="box">
<!-- 热销展示 -->
<div class="box-hot">
<a href="#"><img src="img/mihot.png"></a>
</div>
<!-- 列表展示 -->
<div class="box-list">
<div class="list-con">
<a href="#">
<img src="img/list1.png">
</a>
<h3>小米6X 4GB+32GB</h3>
<p>全索尼相机,骁龙660 AIE处理器</p>
<p>1499元</p>
</div>
<div class="list-con"></div>
<div class="list-con"></div>
<div class="list-con"></div>
<div class="list-con"></div>
<div class="list-con"></div>
<div class="list-con"></div>
<div class="list-con"></div>
</div>
</div>
</body>
</html>