HTML5 第七章浮动课后作业
制作摄影社区热门小镇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摄影社区热门小镇</title>
<style>
#zhuti{
border: 1px solid gray;
width: 900px;
height: 350px;
margin: 0px auto;
}
.one{
width: 250px;
height: 100px;
display: inline-block;
margin: 20px;
}
li{
list-style: none;
font-size: 15px;
line-height: 4px;
text-indent: 1em;
padding-top: 0px;
}
span{
width: 70px;
height: 70px;
border: 1px solid gray;
border-radius: 8px;
float: left;
margin: 10px;
}
img{
width: 60px;
height: 60px;
margin:5px;
}
a{
text-decoration: none;
color: #2e75bc;
}
.tou{
text-indent: 2em;
color: #4d4d4d;
}
li p{
color: #999999;
line-height: 10px;
}
</style>
</head>
<body>
<div id="zhuti">
<p class="tou">摄影社区热门小镇</p>
<div class="one">
<span><img src="movie/pic_01.jpg"></span>
<ul>
<li><a href="#">风景狙击手</a>
<p>成员:80</p>
<p>作品:276 </p></li>
</ul>
</div>
<div class="one">
<span><img src="movie/pic_02.jpg"></span>
<ul>
<li><a href="#">叙事感</a>
<p>成员:235</p>
<p>作品:116 </p></li>
</ul>
</div>
<div class="one">
<span><img src="movie/pic_03.jpg"></span>
<ul>
<li><a href="#">定焦视界</a>
<p>成员:56 </p>
<p>作品:456</p> </li>
</ul>
</div>
<div class="one">
<span><img src="movie/pic_04.jpg"></span>
<ul>
<li><a href="#">中画幅乐园</a>
<p>成员:1
HTML5 第七章浮动课后作业
最新推荐文章于 2022-05-24 18:33:05 发布
这是一个HTML5网页设计作业,包括两个部分:一是创建一个展示摄影社区热门小镇的页面,使用浮动布局展示各小组的图片、名称和相关信息;二是设计一个名人名言页面,包含导航栏、名言展示区和广告赞助。每个部分都运用了CSS进行样式设计,实现了内容的布局和美化。
摘要由CSDN通过智能技术生成