求用div+css做的网页代码、一个小的网页就行、别太高端的、发给我代码...
求用div+css做的网页代码、一个小的网页就行、别太高端的、发给我代码就行、急！4点之前交！wcxkimi@126.com...
求用div+css做的网页代码、一个小的网页就行、别太高端的、发给我代码就行、急！4点之前交！wcxkimi@126.com
展开
3个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.item {
float:left;
width:250px;
margin:10px;
border:4px solid #CFD3D6;
padding:4px;
text-indent:1em;
}
.topic {
text-align:left;
background:#CCC;
font-size:16px;
font-weight:bold;
color:#444444;
line-height:35px;
text-indent:2em;
}
.text {
line-height:24px;
text-align:left;
text-indent:1em;
font-size:12px;
color:#444444;
padding-left:1em;
}
.img {
text-align:left;
padding:4px;
}
.user {
}
#list1,#list2,#list3,#list4{
float:left;
}
</style>
</head>
<body>
<div style="width:284px;" id="list1">
<div class="item">
<div class="topic">
瀑布流布局
</div>
<div class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</div>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</div>
<span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">所以说，中华文化博大精深。</div><div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
</div>
<div style="width:284px;" id="list2">
<div class="item">
<div class="topic">
TAG
</div>
<div class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</div>
<span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">晒晒单车吧！</div>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">镜面风光！</div>
<span class="text">月落乌啼霜满天，江枫渔火对愁眠，姑苏城外寒山寺，进门得花钱！</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
</div>
<div style="width:284px;" id="list3">
<div class="item">
<div class="topic">TAG</div>
<div class="text">差一点就圆了</div>
<span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">据说若是你喜欢一个人，你会从ta的身上闻到一种特殊的味道，那是你们之间仅有的见证~</div>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
</div>
<div style="width:284px;" id="list4">
<div class="item">
<div class="topic">TAG</div>
<div class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</div>
<span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">美国当地时间5月8日，攀岩名将Daniel Woods在科罗拉多Clear Creek峡谷成功首攀一条新路线，难度疑似高达5.15a（9a+),成为科罗拉多州目前难度系数最高的路线。</div><div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
</div>
</body>
</html>
PS:自己替换 文本 图片
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.item {
float:left;
width:250px;
margin:10px;
border:4px solid #CFD3D6;
padding:4px;
text-indent:1em;
}
.topic {
text-align:left;
background:#CCC;
font-size:16px;
font-weight:bold;
color:#444444;
line-height:35px;
text-indent:2em;
}
.text {
line-height:24px;
text-align:left;
text-indent:1em;
font-size:12px;
color:#444444;
padding-left:1em;
}
.img {
text-align:left;
padding:4px;
}
.user {
}
#list1,#list2,#list3,#list4{
float:left;
}
</style>
</head>
<body>
<div style="width:284px;" id="list1">
<div class="item">
<div class="topic">
瀑布流布局
</div>
<div class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</div>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</div>
<span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">所以说，中华文化博大精深。</div><div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
</div>
<div style="width:284px;" id="list2">
<div class="item">
<div class="topic">
TAG
</div>
<div class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</div>
<span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">晒晒单车吧！</div>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">镜面风光！</div>
<span class="text">月落乌啼霜满天，江枫渔火对愁眠，姑苏城外寒山寺，进门得花钱！</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
</div>
<div style="width:284px;" id="list3">
<div class="item">
<div class="topic">TAG</div>
<div class="text">差一点就圆了</div>
<span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">据说若是你喜欢一个人，你会从ta的身上闻到一种特殊的味道，那是你们之间仅有的见证~</div>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
</div>
<div style="width:284px;" id="list4">
<div class="item">
<div class="topic">TAG</div>
<div class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</div>
<span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span><span class="text">敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开</span>
<div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
<div class="item">
<div class="topic">TAG</div>
<div class="text">美国当地时间5月8日，攀岩名将Daniel Woods在科罗拉多Clear Creek峡谷成功首攀一条新路线，难度疑似高达5.15a（9a+),成为科罗拉多州目前难度系数最高的路线。</div><div class="img"><img src="images/face.png" width="115" height="116"></div>
<div class="user"><img src="images/face.png" width="30" height="30">oTwo</div>
</div>
</div>
</body>
</html>
PS:自己替换 文本 图片
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
