1.清除浮动的方法有那几种？分别如何实现？
浮动元素后面加空div，设置父元素的高度，父级元素添加overflow属性，父级添加伪类
2.使用dish-play：inline-block或float布局网页有什么区别？需要注意什么？
（1）display：inline-bloak可以让元素排在一行，并且支持宽度和高度，代码实现起来方便。添加该属性的原素在标准文档流中，不需要清除浮动。
（2）floak可以人元素排在一行并且支持宽度和高度，可以决定排列方向。
（3）display：inline-block位置方向不可控制，会解析空格。
（4）float浮动以后元素脱离文档流，会对周围元素产生影响，必须在他父级上添加清除浮动的样式。
3制作热门小镇页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摄影社区热门小镇</title>
<link rel="stylesheet" href="sdsd.css" type="text/css">
</head>
<body>
<div>
<h1>摄影社区热门小镇</h1>
<ul>
<li class="uu">
<a href="#"><img src="pic_01.jpg"></a>
<h2>风景狙击手</h2>
<ul>
<li>成员：80</li>
<li>作品：276</li>
</ul>
</li>
<li class="uu">
<a href="#"><img src="pic_02.jpg"></a>
<h2>叙事感</h2>
<ul>
<li>成员：235</li>
<li>作品：116</li>
</ul>
</li>
<li class="uu">
<a href="#"><img src="pic_03.jpg"></a>
<h2>定焦视界</h2>
<ul>
<li>成员：56</li>
<li>作品：456</li>
</ul>
</li>
<li class="uu">
<a href="#"><img src="pic_04.jpg"></a>
<h2>中画幅乐园</h2>
<ul>
<li>成员：130</li>
<li>作品：239</li>
</ul>
</li>
<li class="uu">
<a href="#"><img src="pic_05.jpg"></a>
<h2>《卡啪》先锋...</h2>
<ul>
<li>成员：78</li>
<li>作品：125</li>
</ul>
</li>
<li class="uu">
<a href="#"><img src="pic_06.jpg"></a>
<h2>植物的无声世界</h2>
<ul>
<li>成员：235</li>
<li>作品：1258</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
样式
body,div,h3,ul,li{
margin: 0px;
padding: 0px;
}
div{
width:660px;
border: 1px solid #d8d8d8;
box-sizing: border-box;
overflow:hidden;
margin: 50px auto;
}
h1{
font-size: 14px;
color: #999999;
padding-left: 10px;
line-height: 35px;
}
h3{
font-size: 14px;
color: #2e75bc;
line-height: 30px;
margin-top: 3px;
}
li{
list-style:none;
color: #999999;
line-height: 20px;
}
.uu{
float: left;
width:216px;
height:99px;
overflow: hidden;
}
.uu img{
margin:10px 15px 0 10px;
float:left;
padding:3px;
border:1px solid #ccc;
border-radius: 6px;
}
4.制作名人名言页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>名人名言</title>
<link rel="stylesheet" href="DJ7word4.css" type="text/css">
</head>
<body>
<div class="whole">
<!--头部-->
<div class="one">
<h1>名人名言</h1>
<h2>分享名人名言，开始一段触动心灵的智慧之旅跳到内容</h2>
<ul>
<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><a href="#">发表</a></li>
</ul>
<p><hr/></p>
</div>
<!--主体左-->
<div class="left">
<div class="two">
<h1>心理学经典名言的智慧</h1>
<h2>洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</h2>
</div>
<div class="three">
<h1>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。 </h1>
<h2>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。 </h2>
<h2>发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</h2>
</div>
<div class="four">
<h1>作者简介</h1>
</div>
<div class="three">
<h1>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</h1>
<h2>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</h2>
<h2>发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论</h2>
</div>
<div class="five">
<h1>赞助广告</h1>
<img src="ad_2.jpg">
</div>
</div>
<!--主体右-->
<div class="six">
<ul>
<li>赞助广告</li>
<li><img src="ad.jpg"></li>
<li>搜索</li>
<li><input type="search" placeholder="点击搜索" "></li>
<li>标签</li>
<li>60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录</li>
</ul>
</div>
</div>
</body>
</html>
样式
body,div,ul,li{
margin: 0px;
padding: 0px;
}
/*设置整体*/
.whole{
height: 1000px;
width: 1000px;
border: 1px #999999 solid;
margin: auto;
padding: 10px 50px;
clear: right;
}
.left{
width: 550px;
float: left;
}
/*设置头部*/
.one{
margin-left: 30px;
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.one h1{
font-size: 30px;
color: #000;
}
.one h2{
color: #999999;
font-size: 14px;
}
.one li{
list-style:none;
}
.one a{
font-size: 14px;
padding: 8px;
float: left;
color: #999999;
text-decoration: none;
border: 1px #999999 solid;
}
.one a:hover{
color: #999999;
text-decoration: underline;
}
.one p{
padding-top: 15px;
float: bottom;
}
.two{
border: 1px #999999 solid;
float: left;
width: 520px;
}
.two h1{
font-size: 20px;
color: #000;
}
.two h2{
font-size: 14px;
color: #999999;
}
.three{
margin-top: 10px;
float: left;
width: 520px;
}
.three h1{
font-size: 14px;
color: #000;
}
.three h2{
font-size: 14px;
color: #999999;
}
.four{
border: 1px #999999 solid;
width: 520px;
float: left;
}
.four h1{
font-size: 20px;
color: black;
}
.five{
width: 520px;
float: left;
border: 1px #999999 solid;
}
.five h1{
font-size: 14px;
color: black;
}
.six{
float: right;
border: 1px #999999 solid;
width: 400px;
padding: 5px 10px;
}
.six li{
list-style:none;
color: #999999;
font-size: 14px;
font-style: oblique;
padding-top: 10px;
}
5.制作彩妆热卖产品列表页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>彩妆热卖产品列表</title>
<link href="../Semester1book3DJ7/DJ7word5.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="whole">
<p class="p">大家都喜欢的彩妆</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-1.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜"/>
<p>￥89.00 最近13610人购买</p>
</div>
</a></li>
<li><a href="#"><span>3</span>菲奥娜水漾CC霜 40g
<div><img src="icon-1.jpg" alt="菲奥娜水漾CC霜"/>
<p>￥59.90 最近13403人购买</p>
</div>
</a></li>
<li><a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml
<div><img src="icon-1.jpg" alt="DHC 蝶翠诗橄榄卸妆油"/>
<p>￥169.00 最近16757人购买</p>
</div>
</a></li>
</ul>
</div>
</body>
</html>
body,div,p,ul,li{
padding: 0px;
margin: 0px;
}
ul,li{
list-style-type: none;
}
body{
background-color: #eee7e1;
font-size: 12px;
}
img{
border: 0px;
}
.whole{
width: 255px;
background-color: #fff;
}
.p{
background-color: #e9185a;
font-size: 14px;
color: #fff;
height: 35px;
line-height: 35px;
padding-left: 10px;
font-weight: bold;
}
.whole li{
border-bottom: 1px #999 dashed;
line-height: 30px;
padding-left: 2px;
}
.whole li div{
display: none;
text-align: center;
}
.whole li a{
text-decoration: none;
color: #999;
}
.whole li a:hover{
color: #e9185a;
}
.whole li a:hover div{
display: block;
}
.whole 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;
}
.whole li a:hover span{
color: #fff;
background-color: #e9185a;
}
扫一扫
1540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
