一：清除浮动的方法有哪几种？分别如何实现？
1.给父元素div定义高度height
2. 结尾处加空div标签 clear:both
3. 父级div定义 伪类:after 和 zoom
4. 给div加上overflow：hidden-属性
二：使用display:inline-block或float布局页面有什么区别？需要注意什么？
display是设置这一个元素的显示方式，但是这不同的显示方式会有不同的排列方式
而float是设置元素的排列方式，这就需要看相邻的元素使用的样式优先权限
三：制作摄影社区热门小镇页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
margin-left: 20px;
font-weight: bolder;
}
body{
border: 1px gray solid;
width: 700px;
height: 300px;
}
ul li{
list-style: none;
color: gray;
padding-top:- 5px;
}
span{
color: deepskyblue;
font-size: 18px;
}
.a,.b,.c,.d,.f,.e{
display: inline-block;
margin-top: 20px;
margin-left: -10px;
}
img{
border: 1px solid gray;
width: 60px;
height: 60px;
padding: 5px;
border-radius:5px ;
}
img:nth-of-type(1){
margin-left: 20px;
}
ul:nth-of-type(1){
margin-left: 70px;
margin-top: -80px;
}
.c{
margin-left: 5%;
}
.e,.f,.g{
padding-top:25px ;
}
</style>
</head>
<body>
<p>摄影社区热门小镇</p>
<div class="a">
<img src="pic_01.jpg" />
<ul>
<span>风景狙击手</span>
<li>成员：80</li>
<li>作品：276</li>
</ul>
</div>
<div class="b">
<img src="pic_02.jpg" />
<ul>
<span>叙事感</span>
<li>成员：235</li>
<li>作品：116</li>
</ul>
</div>
<div class="c">
<img src="pic_03.jpg" />
<ul>
<span>定焦视界</span>
<li>成员：56</li>
<li>作品：456</li>
</ul>
</div>
<div class="d">
<img src="pic_04.jpg" />
<ul>
<span>中画幅乐园</span>
<li>成员：130</li>
<li>作品：239</li>
</ul>
</div>
<div class="e">
<img src="pic_05.jpg" />
<ul>
<span>《卡啪》先锋...</span>
<li>成员：78</li>
<li>作品：125</li>
</ul>
</div>
<div class="f">
<img src="pic_06.jpg" />
<ul>
<span>植物的无声世界</span>
<li>成员：235</li>
<li>作品：1258</li>
</ul>
</div>
</body>
</html>
四：.制作名人名言页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h3{
color: gray;
}
h2,h3{
margin-left: 400px;
margin-top: 20px;
}
h2{
font-size: 25px;
}
li{
display: inline-block;
list-style: none;
border: 1px solid gray;
margin-right: -5px;
padding: 5px;
}
ul{
margin-left: 360px;
}
hr{
display: none;
width: 1000px;
margin-top: -10px;
}
header:hover hr{
display: block;
}
.b{
border: 1px gray solid;
width: 550px;
margin-left: 380px;
}
.c{
font-size: 18px;
}
.d{
color: gray;
font-size: 12px;
margin-top: -10px;
}
.e{
margin-left: 380px;
margin-right: 582px;
font-size: 18px;
line-height: 28px;
}
.f,.g,.a4{
margin-left: 380px;
margin-right: 582px;
font-size: 14px;
color: gray;
margin-top: -10px;
}
.a1{
font-size: 18px;
border: 1px gray solid;
width: 550px;
margin-left: 380px;
margin-top: -10px;
}
.a2{
margin-left: 380px;
margin-right: 585px;
line-height: 28px;
}
.a3{
margin-left: 380px;
margin-right: 585px;
color: gray;
}
.a5{
border: 1px gray solid;
width: 520px;
margin-left: 380px;
height: 100px;
color: gray;
font-size: 14px;
padding-left: 12px;
padding-top: 12px;
margin-top: -10PX;
}
.a6{
margin-top: 8px;
}
footer{
margin-left: 1000px;
border: 1px gray solid;
width: 300px;
height: 550px;
margin-top: -828px;
padding-left: 20px;
font-size: 15px;
}
</style>
</head>
<body>
<div>
<header>
<h2>名人名言</h2>
<h3>分享名人名言，开始一段触动心灵的智慧之旅跳到内容 </h3>
<ul>
<li>登录</li>
<li>关于</li>
<li>名人名言 </li>
<li>英文名言(English)</li>
<li>心理杂志</li>
<li>心理书籍 </li>
<li>专题活动 </li>
<li>发表</li>
</ul><hr/>
</header>
<article>
<div class="b">
<p class="c">心理学经典名言的智慧</p>
<p class="d">洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</p>
</div>
<div class="b1">
<p class="e">创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，
创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</p>
<p class="f">创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，
创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</p>
<p class="g">发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</p>
<p class="a1">作者简介</p>
<p class="a2">如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。
这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，
那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。
看看周围的人，你可以在与下一个人交流时证实这一点。
</p>
<p class="a3">如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。
这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，
那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。
看看周围的人，你可以在与下一个人交流时证实这一点。
</p>
<p class="a4">发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论</p>
<p class="a5">赞助广告<img class="a6" src="ad_2.jpg"/></p>
</div>
</article>
<footer>
<div>
<p>赞助广告</p>
<p><img src="ad.jpg" /> </p>
<p>搜索</p>
<p><input class="a7" type="text" placeholder="点击搜索"/></p>
<p>标签</p>
<p>60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录
</p>
</div>
</footer>
</div>
</body>
</html>
五：制作彩妆热卖产品列表页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
}
body{
background: #EEE7E1;
}
ul li div {
text-align: center;
display: none;
}
ul li a:hover div {
display: block;
}
.title {
background: red;
color: white;
font-size: 15px;
line-height: 40px;
height: 40px;
text-indent: 1em;
}
ul{list-style-type: none;}
li{margin-left: -40px;font-size: 14px;border-bottom:1px dashed gray ;
line-height: 25px;}
a {
text-decoration: none;
color: gray;
}
span {
background: gray;
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
text-align: center;
}
a:hover {
color: red;
text-decoration: none;
}
a:hover span {
background: red;
}
ul p {
color: red;
}
#cosmetics {
background: white;
width: 300px;
}
</style>
</head>
<body>
<div id="cosmetics">
<p class="title">大家都喜欢的彩妆</p>
<ul>
<li>
<a href="#"><span>1</span> Za姬芮新能真皙美白隔离霜 35g
<div>
<img src="icon-1.jpg" alt="Za姬芮新能真皙美白隔离霜 " />
<p>￥62.00 最近69122人购买</p>
</div>
</a>
</li>
<li>
<a href="#"><span>2</span> 美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
<div>
<img src="icon-2.jpg" alt="宝莲精纯矿物奇妙新颜乳霜BB霜 " />
<p>￥89.00 最近13610人购买</p>
</div>
</a>
</li>
<li>
<a href="#"><span>3</span> 菲奥娜水漾CC霜40g
<div>
<img src="icon-3.jpg" alt="菲奥娜水漾CC霜 " />
<p> ￥59.90 最近13403人购买</p>
</div>
</a>
</li>
<li>
<a href="#"><span>4</span> DHC 蝶翠诗橄榄卸妆油 200ml
<div>
<img src="icon-4.jpg" alt="DHC 蝶翠诗橄榄卸妆油 " />
<p>￥169.00 最近16757人购买</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
扫一扫
6947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
