版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhuisaozhang1292/article/details/86105089
作业样式
html程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
.pg-header{
height:104px;
width:100%;
color:blue;
border:1px solid #F00
}
.pg-coloumns{
background-color:pink;
height:40px;
width:100%;
border:1px solid #F00
}
.pg-coloumns a{
display:inline-block;
width:200px;
float:left;
background-color:green;
text-align:center;
}
.pg-end{
height:2000px;
width:100%;
border:1px solid #F00
}
div img {
width:90%;;
height:80%;;
}
</style>
</head>
<body style="margin: 0" >
<div class="pg-header">
<div style="width:1080px;height:30px;line-height:30px; margin:0 auto;">
<div style = "float:left;">收藏本站</div>
<div style = "float:right;">
<a href = "http://baidu.com/" style = " margin-left:10px">登录</a>
<a href = "http://baidu.com/" style = " margin-left:10px">注册</a>
<a href = "http://baidu.com/" style = " margin-left:10px">收藏</a>
</div>
</div>
<div style ="width:980px;height:70px;margin:0 auto;">
<div style = "float:left;">
<img src="1.jpg" style ="width:80px;height:70px;margin-left:160px" >
</div>
<div style = "float:left; margin-left:200px;">
<div>
<input style = "width:200px;height:30px">
</div>
<label> 热门搜索：火龙果</label>
</div>
<div style = "float:right;">
<select name = "city">
<option value = "1">南京</option>
<option value = "2">上杭</option>
<option value = "3">官庄</option>
</select>
<select name ="country">
<optgroup label="China">
<option>南京</option>
<option>上杭</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="pg-coloumns">
<div style="width:1080px;height:40px;line-height:40px; margin:0 auto;">
<div style = "height:40px;line-height:40px; float:left;">
<a >全部商品分类</a>
<a style = "width:50px;">首页</a>
<a style = "width:100px;">网上超市</a>
<a style = "width:100px;">水果超市</a>
<a style = "width:100px;">生活娱乐</a>
<a style = "width:100px;">研究院</a>
</div>
<div style = "height:40px;line-height:40px; float:right;">
<a style = "width:50px;">论坛</a>
<a style = "width:50px;">研究院</a>
</div>
</div>
</div>
<div class="pg-end">
<div style="width:1080px;margin:0 auto;">
<div style = "width:20%;border:1px solid #F00;float:left;">
<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
<span style ="border:1px solid #F00;font-size:16px;"> 火龙果 火龙果 火龙果 </span>
<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
<span style ="border:1px solid #F00;font-size:16px;"> 火龙果 火龙果 火龙果 </span>
<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
<span style ="border:1px solid #F00;font-size:16px;"> 火龙果 火龙果 火龙果 </span>
<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
<span style ="border:1px solid #F00;font-size:16px;"> 火龙果 火龙果 火龙果 </span>
<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
<span style ="border:1px solid #F00;font-size:16px;"> 火龙果 火龙果 火龙果 </span>
<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
<span style ="border:1px solid #F00;font-size:16px;"> 火龙果 火龙果 火龙果 </span>
</div>
<div style = "width:70%;float:right;">
<div style = "height:200px;border:1px solid #F00">
<div style ="margin:10px;border-bottom:5px solid #F00;">福特 > 蒙迪欧 > 2.0T</div>
<div style = "margin-top:10px;margin-left:30px;font-weight:bold;float:left;">您已选择: </div>
<div style = "margin-top:20px;">苹果</div>
<div style = "margin-top:10px;margin-left:60px;font-weight:bold;float:left;">材质: </div>
<div style = "margin-top:10px;">苹果 苹果 苹果 </div>
<div style = "margin-top:10px;margin-left:60px;font-weight:bold;float:left;">品质: </div>
<div style = "margin-top:10px;">苹果 苹果 苹果 </div>
<div style = "margin-top:10px;margin-left:60px;font-weight:bold;float:left;">风格: </div>
<div style = "margin-top:10px;">苹果 苹果 苹果 </div>
<div style ="text-align:center;">更多选项</div>
</div>
<div style = "height:1800px;border:1px solid #F00">
<div style = "width:500px;height:30px;line-height:30px;margin-top:10px;margin-left:30px;float:left;border:1px solid #F00;"> 排序:价格 销量 最新</div>
<div style = "height:30px;line-height:30px;margin-top:10px;margin-right:30px;float:right;border:1px solid #F00;"> 共**件商品</div>
<div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;">
<img alt="" src="1.jpg" style ="margin-left:13px" >
<div style = "text-align:center">商品名称</div>
<div >
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "购买" style = "margin-left:40px">
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入购物车" style = "margin-left:40px">
</div>
</div>
<div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;">
<img alt="" src="1.jpg" style ="margin-left:13px" >
<div style = "text-align:center">商品名称</div>
<div >
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "购买" style = "margin-left:40px">
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入购物车" style = "margin-left:40px">
</div>
</div>
<div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;">
<img alt="" src="1.jpg" style ="margin-left:13px" >
<div style = "text-align:center">商品名称</div>
<div >
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "购买" style = "margin-left:40px">
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入购物车" style = "margin-left:40px">
</div>
</div>
<div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;">
<img alt="" src="1.jpg" style ="margin-left:13px" >
<div style = "text-align:center">商品名称</div>
<div >
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "购买" style = "margin-left:40px">
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入购物车" style = "margin-left:40px">
</div>
</div>
<div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;">
<img alt="" src="1.jpg" style ="margin-left:13px" >
<div style = "text-align:center">商品名称</div>
<div >
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "购买" style = "margin-left:40px">
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入购物车" style = "margin-left:40px">
</div>
</div>
<div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;">
<img alt="" src="1.jpg" style ="margin-left:13px" >
<div style = "text-align:center">商品名称</div>
<div >
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "购买" style = "margin-left:40px">
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入购物车" style = "margin-left:40px">
</div>
</div>
<div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;">
<img alt="" src="1.jpg" style ="margin-left:13px" >
<div style = "text-align:center">商品名称</div>
<div >
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "购买" style = "margin-left:40px">
<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入购物车" style = "margin-left:40px">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>输出样式：
