网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
css吧 关注：63,435贴子：458,677

回复：怎样用div写出这样的网页布局？求各位大神帮忙！小女子感

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="shiyan2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="top">
<div class="logo">logo</div>
<div class="topa">
<div class="topa_a"><p>图片</p><a href="#">登录账号</a></div>
<div class="topa_b"><p>图片</p><a href="#">购物车</a></div>
</div>
<div class="top_link">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">意见建议</a></li>
</ul>
</div>
<div class="title">
<ul>
<li><a href="">网站首页</a></li>
<li><a href="">产品介绍</a></li>
<li><a href="">信息</a></li>
<li><a href="">畅销排行榜</a></li>
</ul>
</div>
</div>
<div class="body">
<div class="body_left">
<div class="left_top">
<h1>今日推荐</h1>
</div>
<div class="left_middle">
<h1>最受欢迎</h1>
</div>
<div class="left_foot">
<h1>分类推荐</h1>
</div>
</div>
<div class="body_right">
<div class="right_top">
<div class="botton">
<input type="text" id="text"/>
<button type="button" id="button">查询商品</button>
</div>
</div>
<div class="right_middle">
<h1>产品分类</h1>
<ul>
<li><a href="#">0-1岁玩具</a></li>
<li><a href="#">2-3岁玩具</a></li>
<li><a href="#">4-6岁玩具</a></li>
<li><a href="#">0-1岁服装</a></li>
<li><a href="#">2-3岁服装</a></li>
<li><a href="#">4-6岁服装</a></li>
</ul>
</div>
<div class="right_foot">
<h1>特别提示</h1>
<p>特别提示特别提示特别提示特别提示特别提示特别提示特别提示特别提示</p>
</div>
</div>
</div>
<div class="footing">
<div class="footing_top">
<ul>
<li>网站首页</li><span></span>
<li>产品介绍</li><span></span>
<li>信息</li><span></span>
<li>畅销排行榜</li>
</ul>
</div>
<div class="footing_foot">
©版权所有
</div>
</div>
</div>
</body>
</html>


css代码：


广告
立即查看
希望楼主以后还有这样的作业也分享给我做



那个登录账号的div我不知道怎么设置


*{
margin: 0px;
padding: 0px;
}
body{
font-size: 12px;
background-color: aliceblue;
}
a:link,a:visited{
text-decoration: none;
}
a:hover,a:active{
text-decoration: none;
}
.container{
width: 1600px;
height: auto;
margin: 0px auto;
}
.topa{
width:184px;
height: 100px;
float: left;
border-radius: 10px;
margin-left: 250px;
}


.topa a:link{
font-size: 18px;
font-weight: bold;
color: #FF66FF;
}
.topa a:visited{
font-size: 18px;
font-weight: bold;
color: #FF66FF;
}
.topa a:hover{
font-size: 18px;
font-weight: bold;
color: #FF3300;
}.topa a:active{
font-size: 18px;
font-weight: bold;
color: #FF3300;
}
.topa p{
font-size: 36px;
font-weight: bold;
margin-bottom: 30px;
text-align: center;
}
.topa_a{
float: left;
width: 90px;
height: 100%;
text-align: center;
border-radius: 10px;
border: solid 1px #666;
background-color: wheat;
text-align: center;
}
.topa_b{
float: left;
width: 90px;
height: 100%;
text-align: center;
border-radius: 10px;
border: solid 1px #666;
background-color: wheat;
}
.top{
width: 100%;
height: 150px;
background-color: #00FFFF;
}
.logo{
float: left;
width: 300px;
height:80px;
margin-left: 100px;
margin-top: 20px;
background-color: #FF66FF;
font-size: 78px;
font-family: "华文彩云";
text-align: center;
}


.right_middle ul{
list-style-type: none;
width: 80%;
margin: 0px auto;
}
.right_middle li{
border-top: solid 2px #fff;
padding-top:5px;
padding-bottom:5px;
font-size: 14px;
}
.right_foot{
width: 80%;
height: 100px;
border-radius: 20px;
border:solid 2px #fff;
margin: 0px auto;
margin-top: 25px;
background-color: #b2e8f9;
text-align: center;
color: #0083ff;
}
.right_foot h1{
color: #0083ff;
}
.right_foot p{
text-indent:2em ;
}
.footing{
width: 80%;
height: 80px;
margin: 0px auto;
}
.footing_top{
width: 100%;
height: 50%;
background-color: #3e7fb4;
text-align: center;
}
.footing_top li{
color: #fff;
line-height: 250%;
list-style-type: none;
display: inline;
}
.footing_top span{
padding-right:5px;
border-right:solid 1px #000;
}
.footing_foot{
width: 100%;
height: 50%;
font-size: 16px;
background-color: #b49d50;
text-align: center;
}


我也是刚学，还有很多东西不懂，比如：她图片上的那个账号登录那个div我就不知道怎样放到那个位置


广告
立即查看
好简单的页面


上中下三栏结构


499809431欢迎加入


楼楼可以跟@开心的山羊8 后面多多学习，做项目是一件很有成就感的事情


首先，你可以用截图工具，然后画框框，从大到小，从外到里，画出盒子模型，搞清楚页面中的div包含关系。然后就可以一点一点写出来啦


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
分享到: