作业一学期三书七章
1.清除浮动的方法有哪几种？分别如何实现？
（1）浮动元素后面加空div
（2）设置父元素的高度
（3）父级添加overflow属性
（4）父级添加伪类
2.使用display：inlink-block或float布局页面有什么区别？需要注意什么？
（1）display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格，IE 6、IE 7上不支持
（2）float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
3.制作摄影社区热门小镇页面（页面效果及页面中的图片、字体颜色等参见提供的作业素材），要求如下。
- 使用
- 使用float属性创建横向多列排版网页元素。
摄影社区热门小镇
摄影社区热门小镇
-
风景狙击手
- 成员：80
- 作品：276
-
叙事感
- 成员：235
- 作品：116
-
定焦视界
- 成员：56
- 作品：456
-
中画幅乐园
- 成员：130
- 作品：239
-
《卡啪》先锋...
- 成员：78
- 作品：125
-
植物的无声世界
- 成员：235
- 作品：1258
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;
line-height: 35px;
padding-left: 10px;
}
h2{
font-size: 14px;
color: #2e75bc;
line-height: 30px;
margin-top: 3px;
}
li{
list-style:none;
color: #999999;
line-height: 20px;
}
.one{
float: left;
width:216px;
height:99px;
overflow: hidden;
}
.one img{
margin:10px 15px 0 10px;
float:left;
padding:3px;
border:1px solid #ccc;
border-radius: 6px;
}
4.制作名人名言页面（完整的页面效果图参见提供的作业素材）。要求如下。
- 使用headder、article、section、nav、footer等结构元素布局。
- 使用float属性创建横向多列布局。
- 使用无序列表制作导航菜单，并使用盒子属性美化菜单，当鼠标移至导航菜单上时显示下划线。
- 使用标题标签排版网页中的各级标题。
- 页面的完整效果及页面中字体样式。颜色等参见提供的作业素材。
名人名言
心理学经典名言的智慧
洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论
作者简介
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。
发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论
赞助广告
- 赞助广告
- 搜索
- 标签
- 60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录
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.制作彩妆热卖产品列表页面（页面效果、背景图片、分割线颜色样式、背景颜色、字体颜色等页面样式参见提供的上机练习素材），要求如下。
- 页面背景颜色为浅黄色，彩妆热卖产品列表背景颜色为白色。
- 标题放在段落标签中，标题背景颜色为桃红色，字体颜色为白色。
- 使用无序列表
- 超链接字体颜色为灰色，无下划线，数字颜色为白色，数字背景为灰色背景。
- 当鼠标移至超链接上时，超链接字体颜色为桃红色，无下划线，数字颜色为白色，数字背景为桃红色圆圈，并且显示产品对应的图片、价格和当前已购买人数。
彩妆热卖产品列表
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;
}