浮动 第七章
第一题：制作摄影社区热门小镇页面。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{padding: 0px;margin: 0px}
p{
margin: 10px 10px;
font-size: 15px;
color: #4F5153;
}
div:after{
content: "";
display: block;
clear: both;
}
img{
border: 3px solid #E0E0E8;
}
a b{
margin: 10px 50px 20px 10px;
float: left;
}
b ul{
margin-left: 15px;
font-size: 12px;
color: gray;
}
ul li{
list-style-type: none;
}
ul li:first-of-type{
font-size: 14px;
color: #4987C5;
margin-bottom: 6px;
}
a b:nth-of-type(3){
margin-left: 48px;
}
style>
head>
<body>
<div>
<div style=" width: 750px;margin: 50px auto;">
<div style="border: 1px solid gray">
<p>摄影社区热门小镇p>
< a class="info" >
<b style="">
<img src="../picture/pic_01.jpg" style="float: left">
<ul style="display: inline-block">
<li>风景狙击手li>
<li>成员：80li>
<li>作品：276li>
ul>
b>
<b >
<img src="../picture/pic_02.jp" style="float: left">
<ul style="display: inline-block">
<li>叙事感li>
<li>成员：235li>
<li>作品：116li>
ul>
b>
<b >
<img src="../picture/pic_03.jp" style="float: left">
<ul style="display: inline-block">
<li>定焦视界li>
<li>成员：56li>
<li>作品：456li>
ul>
b>
<b >
<img src="../picture/pic_04.jpg" style="float: left">
<ul style="display: inline-block">
<li>中画幅乐园li>
<li>成员：130li>
<li>作品：239li>
ul>
b>
<b>
<img src="../picture/pic_05.jp" style="float: left">
<ul style="display: inline-block">
<li>《卡啪》先锋...li>
<li>成员：78li>
<li>作品：125li>
ul>
b>
<b>
<img src="../picture/pic_06.jp" style="float: left">
<ul style="display: inline-block">
<li>植物的无声世界li>
<li>成员：235li>
<li>作品：1258li>
ul>
b>
a>
div>
div>
div>
body>
html>
第二题：制作名人名言页面。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{font-size: 14px}
ul li{
float: left;
border-left: gray solid 1.0px;
border-top: gray solid 1.0px;
list-style-type: none;
padding: 5px;
}
h1{
font-size: 24px;
}
em{
font-size: 14px;
}
a{
text-decoration: none;color: gray
}
#b{
width: 1200px;margin: 0px auto;
}
#c{
width: 1200px;height: 130px
}
style>
head >
<body id="b">
<header id="c">
<h1>名人名言h1>
<p><em>分享名人名言，开始一段触动心灵的智慧之旅跳到内容em>p>
<ul style="height: 20px;padding-left: 0px">
<li><a href="#">登录a>li>
<li><a href="#">关于a>li>
<li><a href="#">名人名言a>li>
<li><a href="#">英文名言(English)a>li>
<li><a href="#">心理杂志a>li>
<li><a href="#">心理书籍a>li>
<li><a href="#">专题活动a>li>
<li style="border-right:1px solid gray "><a href="#">发表a>li>
ul>
<div style="width: 1300px;margin: -5px -50px;border-top:1px solid gray ">div>
header>
<section style="width: 1200px;height: 735px">
<div style="width: 560px;display: inline-block">
<p style="width: 550px;border: 1px solid gray;padding:5px 5px">
<span>心理学经典名言的智慧span><br/>
洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。
p>
<p style="line-height: 25px;font-weight: bold;width: 550px">
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创
造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
p>
<p style="line-height: 25px;width: 550px;margin-bottom: 0px">
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创
造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。<br>
发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论
p>
<div style="width: 550px;border: 1px solid gray;padding: 5px">
<span style="font-size:16px;font-weight: bold ">作者简介span>
div>
<p style="line-height: 25px;font-weight: bold;width: 550px">
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到
不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张
起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个
人交流时证实这一点。
p>
<p style="line-height: 25px;width: 550px;margin-bottom: 0px">
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到
不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张
起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个
人交流时证实这一点。<br>
发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论
p>
<div style="border: 1px solid gray">
<p>赞助广告p>
<img src="../images/ad_2.jpg" >
div>
div>
<div style="width:350px;height: 500px;float: right;margin-right:150px ">
<div style="border: 1px solid gray;font-size: 16px;margin:0px 0px 0px 20px;padding: 20px">
<p><em>赞助广告em>p>
<div><img src="../images/ad.jpg">div>
<p><em>搜索em>p>
<div><input type="search" placeholder="点击搜索">div>
<p><em>标签em>p>
<p style="color: gray;width: 300px"><em>60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录
历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录 em>p>
div>
div>
section>
<footer style="text-align: center;margin-top: 20px">
<div style="border-bottom: 1px gray solid;width: 1300px;margin: -5px -50px;">div>
<p>
©All Rignts Reserved by Psytopic.来自Psytopic.com的礼物
p>
footer>
body>
html>
第三题：制作彩妆热卖产品列表页面。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div,h1,ul {
padding: 0px;
margin: 0px;
}
h1{
font-size: 16px;
font-weight: bold;
color: #e4f1fa;
background-color: #FF1493;
text-indent: 1em;
line-height: 30px;
}
div{
width:350px;
border:1px #f3f4df solid;
padding:0px 0px 10px 0px;
background-color:white;
}
ul li{
font-size: 15px;
list-style: none;
border-bottom: 1px #666666 dashed;
padding: 8px;
}
ul li a{
color: black;
text-decoration: none;
}
ul li a:hover{
color: #FF1493;
}
ul li a span{
color:#FFF;
font-weight:bold;
margin-right:10px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #373b3c;
line-height: 20px;
text-align: center;
}
style>
head>
<body>
<div>
<div>
<h1>大家都喜欢的彩妆h1>
<ul>
<li><a href="#"><span>1span> Za姬芮新能真皙美白隔离霜 35g a>li>
<div><img src="../images/icon-1.jpg" alt="Za姬芮新能真皙美白隔离霜 35g">
<p>￥62.00 最近69122人购买p>
div>
<li><a href="#"><span>2span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml a>li>
<div><img src="../images/icon-2.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml">
<p>￥89.00 最近13610人购买p>
div>
<li><a href="#"><span>3span> 菲奥娜水漾CC霜40g a>li>
<div><img src="../images/icon-3.jpg" alt="菲奥娜水漾CC霜40g">
<p>￥59.90 最近13403人购买p>
div>
<li><a href="#"><span>4span> DHC 蝶翠诗橄榄卸妆油 200ml a>li>
<div><img src="../images/icon-4.jpg" alt=" DHC 蝶翠诗橄榄卸妆油 200ml ">
<p> ￥169.00 最近16757人购买p>
div>
ul>
div>
div>
body>
html>