html之页面布局
目的：练习使用html+css模拟一个网站页面
images:自己从网站上随意下载
目录结构：
页面布局之html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<link rel="stylesheet" type="text/css" href="css/page_setting.css">
</head>
<body>
<!--标题部分-->
<div class="top">
<div class="t_left">
<a>
*收藏本站
</a>
</div>
<div class="t_right">
<a>登陆 </a>
<a>注册 </a>
<a>我的订单 </a>
<a>我的收藏 </a>
<a>VIP会员俱乐部 </a>
<select>
<option>
<a>客户服务</a>
</option>
</select>
<a> 关注 </a>
<a>手机版 </a>
</div>
</div>
<!--log部分-->
<div class="logo">
<div class="l_img">
<img src="images/zhongqiu.png" class="l_pic">
</div>
<div class="l_ser">
<input type="text" class="l_text">
<input type="button" value="搜索" class="l_but">
<br>热门搜索：火龙果、瓜子
</div>
<div class="l_buy">
<div class="l_select">
购物车
<span style="color: red">2</span>
件
<select>
<option></option>
</select>
</div>
</div>
</div>
<!--商品分类部分-->
<div class="shop">
<div class="s_1"> </div>
<div class="s_2">
<a>全部商品分类</a>
</div>
<div class="s_3">
<a>首页</a>
</div>
<div class="s_4">
<a>网上超市</a>
<a>网上超市</a>
<a>水果超市</a>
<a>超级订餐</a>
<a>生活娱乐</a>
<a>研究院</a>
</div>
<div class="s_5">
<a>研究院</a>
<a>研究院</a>
<a>论坛</a>
</div>
<div class="s_6"> </div>
</div>
<!--详细信息-->
<div class="detail">
<!--左边-->
<div class="d_left"></div>
<!--中间块-->
<div class="d_middle">
<!--商品分类列表-->
<div class="d_list">
<ul>
<li>
<a class="d_al"> 南方水果</a>
<br><br>
<a>火龙果 火龙果 火龙果</a>
</li>
<li>
<a class="d_al"> 南方水果</a>
<br><br>
<a>火龙果 火龙果 火龙果</a>
</li>
<li>
<a class="d_al"> 南方水果</a>
<br><br>
<a>火龙果 火龙果 火龙果</a>
</li>
<li>
<a class="d_al"> 南方水果</a>
<br><br>
<a>火龙果 火龙果 火龙果</a>
</li>
<li>
<a class="d_al"> 南方水果</a>
<br><br>
<a>火龙果 火龙果 火龙果</a>
</li>
<li>
<a class="d_al"> 南方水果</a>
<br><br>
<a>火龙果 火龙果 火龙果</a>
</li><li>
<a class="d_al"> 南方水果</a>
<br><br>
<a>火龙果 火龙果 火龙果</a>
</li>
</ul>
</div>
<br>
<div class="d_c">热销排行榜
</div>
<ul>
<li>Content</li>
</ul>
</div>
<div class="d_tmp"></div>
<!--右边-->
<div class="d_right">
<div class="r_top">
<p class="r_top_s">福特>蒙迪欧>2.0T</p>
</div>
<div class="r_middle">
<p style="text-indent: 10px"><strong>您已选择：</strong> 苹果</p><hr>
<p><strong>材质：</strong> <a>苹果 苹果 苹果</a></p><hr>
<p><strong>品牌：</strong> <a>苹果 苹果 苹果</a></p><hr>
<p><strong>风格：</strong> <a>苹果 苹果 苹果</a></p>
</div>
<div class="r_more">
更多选项 !
</div>
<div class="r_sort">
<div class="r_left">
<span>
排序：
<a>价格</a>
<a>销量</a>
<a>最新</a>
</span>
<span class="r_left_2">共xx件商品 </span>
</div>
<div class="r_right">
1/675 <input type="button" value="<">
<input type="button" value=">">
</div>
</div>
<!--图片部分-->
<div class="imgs">
<div class="i_part">
<img src="images/beijing.png">
</div>
<div class="i_part">
<img src="images/beijing.png">
</div>
<div class="i_part">
<img src="images/beijing.png">
</div>
<div class="i_part">
<img src="images/beijing.png">
</div>
<div class="i_part">
<img src="images/beijing.png">
</div>
<div class="i_part">
<img src="images/beijing.png">
</div><div class="i_part">
<img src="images/beijing.png">
</div>
<div class="i_part">
<img src="images/beijing.png">
</div>
<div class="i_part">
<img src="images/beijing.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
页面布局之css代码
*{margin: 0;padding: 0}
body{
font-size: 12px;
color: gray;
}
a{
cursor: pointer;
}
.top{
background-color: #E1E1E1;
width: 100%;
height: 30px;
}
.top .t_left{
line-height: 30px;
width: 20%;
text-align: center;
float: left;
}
.top .t_right{
line-height: 30px;
width: 80%;
text-align: right;
float: left;
}
.top .t_right select{
background-color: #E1E1E1;
border-style: none;
font-size: 12px;
color: gray;
}
.logo{
width: 100%;
height: 90px;
}
.logo .l_img{
width: 40%;
height: 90px;
float: left;
}
.logo .l_pic{
width: 90px;
height: 90px;
margin-left: 60%;
}
.logo .l_ser{
width: 40%;
height: 90px;
float: left;
}
.logo .l_ser .l_text{
width: 400px;
height: 30px;
margin-top:20px;
}
.logo .l_ser .l_but{
width: 50px;
height: 35px;
margin-top:20px;
cursor: pointer;
background-color: #E1E1E1;
}
.logo .l_buy{
width: 20%;
height: 90px;
float: left;
}
.logo .l_buy .l_select{
width: 40%;
height: 30px;
font-size: 12px;
color: gray;
margin-top:20px;
text-align: center;
line-height: 30px;
border:solid 1px gray;
background-color: ghostwhite;
}
.logo .l_buy .l_select select{
border-style: none;
background-color:ghostwhite ;
}
.logo .l_buy .l_select option{
padding-right:10px;
}
.shop{
width: 100%;
height: 50px;
font-size: 16px;
color: white;
line-height: 50px;
font-family: "Microsoft YaHei UI";
}
.shop .s_1{
width: 5%;
background-color: brown;
float: left;
}
.shop .s_2{
width: 15%;
background-color: crimson;
float: left;
text-align: center;
}
.shop .s_3{
width: 5%;
background-color: brown;
float: left;
text-align: center;
}
.shop .s_4{
width: 55%;
background-color: crimson;
float: left;
text-align: left;
}
.shop .s_5{
width: 15%;
background-color: brown;
float: left;
text-align: center;
}
@media screen and (max-width: 800px) {
.shop .s_5 {
width: 15%;
background-color: green;
float: left;
text-align: center;
font-size:12px;
line-height: 15px;
}
}
.shop .s_6{
width: 5%;
background-color: crimson;
float: left;
}
.detail{
width: 100%;
height: 800px;
}
.detail .d_left{
width: 5%;
float: left;
height: 800px;
}
.detail .d_middle{
width: 15%;
float: left;
height: 800px;
}
.detail .d_tmp{
width: 2%;
float: left;
height: 800px;
}
.detail .d_right{
width: 78%;
float: left;
height: 800px;
}
.detail .d_middle .d_list{
height: 500px;
width: 100%;
}
.detail .d_middle ul li{
list-style-type: none;
width: 100%;
border-bottom: dashed 1px;
border-left: solid 1px;
border-right: solid 1px;
border-color: beige;
padding-top:10px;
padding-bottom: 10px;
}
.detail .d_middle .d_list .d_al{
font-size:18px;
font-family: "Microsoft YaHei UI";
color:black;
}
.detail .d_middle .d_c{
height: 20px;
width: 100%;
padding-top: 15px;
color: black;
font-size: 14px;
border:solid 1px;
border-color: darkgrey;
background-color: beige;
}
.detail .d_right .r_top{
height: 60px;
width: 100%;
}
.detail .d_right .r_top .r_top_s{
font-size: 12px;
color: black;
padding-top: 40px;
}
.detail .d_right .r_middle{
border: solid 1px gainsboro;
border-top:solid 2px brown;
height: 170px;
width: 90%;
}
.detail .d_right .r_middle p{
line-height: 40px;
text-indent: 30px;
}
.detail .d_right .r_middle p strong{
color:black;
}
.detail .d_right .r_middle hr{
border: dotted 1px;
border-color: darkgrey;
}
.detail .d_right .r_more{
border: solid 1px gainsboro;
border-top-style: none;
height: 30px;
width: 10%;
margin-left: 40%;
color: black;
}
.detail .d_right .r_sort {
width: 90%;
height: 30px;
border: solid 1px gray;
}
.detail .d_right .r_sort .r_left{
width: 89%;
height: 30px;
float: left;
line-height: 30px;
border-right: solid 1px grey;
}
.detail .d_right .r_sort .r_left .r_left_2{
line-height: 30px;
text-align: right;
float: right;
color: red;
}
.detail .d_right .r_sort .r_right{
width: 10%;
height: 30px;
float: left;
line-height: 30px;
text-align: center;
}
.detail .d_right .r_sort .r_right input{
width: 20px;
height: 20px;
}
.detail .d_right .imgs {
width: 90%;
height: 500px;
}
.detail .d_right .i_part {
width: 25%;
height: 200px;
float: left;
}
效果图：
浙公网安备 33010602011771号