2018.11.17（5，6，7）章，及第八章练习作业
第五章
1.使用font-family属性，同时设置英文字体和中文字体需要注意什么问题？
首先设置英文字体 再设置中文字体
2.在css中，常用的背景属性有哪几个？他们的作用是什么？
color image 背景颜色和背景图像
3.制作所示课程介绍页面，要求如下：
使用div，p，span等标签编辑页面，页面整体背景颜色使用线性渐变（#ECECEC，#FFFFED）。
课程特色字体颜色为绿色（#5C9815）,设计理念字体颜色为橙色（#F26522）。
课程特色和课程理念每行开头带背景颜色的字体为白色，使用结构伪类选择器元素。
使用外部样式表创建页面样式。
北大青鸟课程介绍页面
逆向课程设计：以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致
模拟学员学习路线：强调难点和复杂技能点的反复训练，力求学习效果和学习体验
互联网作为教学环境：学员的日常教学和训练均在互联网线上进行
学习挡板监控网上学习效果：每个学习阶段设置线上线下测试，严密监控学习效果
真实开发项目经验积累：采用专业互联网企业提供的真实项目作为模拟开发
【实用性】—— 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术
【权威性】—— 与来自百度等知名企业的专家联合开发
【专业性】—— 引进业内资深人才和典型行业开发项目
【真实性】—— 在互联网真实环境下进行教学和训练
【易学性】—— 在线培训模式，24小时专家在线解答疑难问题
【完整性】—— 利用SNS虚拟社区：学习、人脉双丰收
body>div{
width: 600px;
background: linear-gradient(to top,#ECECEC,#FFFFED);
background: -webkit-linear-gradient(to top,#ECECEC,#FFFFED);
}
div div:nth-child(1)>p{
color: #5C9815;
}
div div:nth-child(1)>p>span{
color: #FFFFFF;
}
#one{
background-color:#66ccff;
}
#two{
background-color:blueviolet;
}
#san{
background-color:red;
}
#si{
background-color:brown;
}
#wu{
background-color:blue;
}
div div:nth-child(2)>p{
color: #F26522;
}
div div:nth-child(2)>p>span{
color: #FFFFFF;
}
#a1{
background-color:#66ccff;
}
#a2{
background-color:blueviolet;
}
#a3{
background-color:red;
}
#a4{
background-color:brown;
}
#a5{
background-color:coral;
}
#a6{
background-color:blue;
}
4.制作图所示的席慕蓉的诗《初相遇》要求如下：
页面总宽度400px，整体背景颜色线性渐变（#CAEFFE，#FFFFED）
使用h1标签排版文本标题，字体大小为18px，黑色文字阴影。
使用p标签排版文本正文，首行缩进2em，行高为22px。
首行第一个“美”字，字体大小为18px，加粗显示，黑色和白色文字阴影，第二段中的“胸怀中……在我眼前”字体风格为倾斜，颜色为蓝色，字体大小为16px。正文其他文字大小为12px。
最后一段文字带下划线。
使用外部样式表创建页面样式。
初相遇--席慕容
初相遇 文/席慕容
美丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。
我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。胸怀中满溢着幸福，只因你就在我眼前，对我微笑，一如当年。
我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。
h1{
color: rgba(70, 74, 71, 0.8);
font-size: 18px;
text-shadow: black 1px 1px 1px;
text-align: center;
}
h1>span{
font-size:28px;
font-weight: bolder;
color: blue;
}
div{
width: 400px;
background: linear-gradient(to top,#CAEFFE,#FFFFED);
background:-webkit-linear-gradient(to top,#CAEFFE,#FFFFED);
}
div p{
font-size: 12px;
line-height: 22px;
text-indent: 2em;
}
p:last-child{
text-decoration: underline ;
color:green;
}
.mei{
font-size: 18px;
font-weight: bold;
color: #5c5aff;
text-shadow: black 2px 1px 2px;
}
.xio{
color: blue;
font-size: 16px;
font-style: italic;
}
5.制作图所示的淘宝女装分类页面，要求如下：
使用无序列表等HTML标签有语义化的编辑页面
女装内容字体大小为12px，超链接文本字体颜色为黑色，无下划线，当鼠标移到超链接文本上时字体颜色变为橙色(#F60),并且显示下划线。
使用外部样式表创建页面样式。
body>div{
width: 350px;
}
h3{
line-height: 40px;
font-size: 18px;
font-weight: bold;
text-indent: 40px;
}
li{
list-style-type: none;
}
li>div{
font-size: 12px;
}
a{
text-decoration:none;
color: black;
}
a:hover{
text-decoration: underline;
color: #F60;
}
第六章
1.什么是盒子模型？盒子模型的属性有哪几个？它们的作用分别是什么？
网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物–盒子作一个比喻来理解，所以叫它盒子模式。
margin-bottom, margin-top, margin-left, margin-right 设置外边距上下左右
padding-top,padding-bottom, padding-left, padding-right 设置内边距上下左右
2.盒子模型有哪几种解析方式？它们有什么不同？
当我们在样式表输入box-sizing时，会显示border-box和content-box，第一种是边框盒子尺寸，第二种是内容尺寸
当我们给一个元素设置尺寸时，默认设置的是元素内容的尺寸，也就是content-box，这种在后期布局时会有很多不便
而当我们用border-box时，我们设置的尺寸实际等于：内容尺寸+两边的内边距+两边的边框宽度
3.制作图所示的网站的中心开班信息模块。要求如下：
页面总宽度为250px，整体居中显示，背景使用线性渐变及1px灰色圆角边框
标题左侧的小图标以背景图像的方式实现，标题颜色为白色
使用无序列表实现开班信息列表，列表前的小三角形箭头和下方虚线均使用背景图片的方式实现
列表超链接文本颜色为灰色，无下划线，当鼠标悬浮在超链接文本上时，字体颜色发生变化，无下划线
页面中涉及盒子模型解析方式都使用border-box
中心开班信息
body>div{
width: 250px;
margin: 0px auto;
border:solid;
border-color: gray;
border-width: 1px;
border-radius: 15px;
background:linear-gradient(to top,#FFFFFF,#66ccff);
background:-webkit-linear-gradient(to top,#FFFFFF,#66ccff);
}
hr{
height: 2px;
background-color: #FFFFFF;
border: none;
}
li{
list-style-type: none;
margin-left: -25px;
}
a{
color: gray;
text-decoration: none;
}
a:hover{
color: coral;
text-decoration: none;
}
4.制作图所示的商品分类列表页面，要求如下：
商品列表在一个div中，div的四个边框均为2px的橙色实线圆角边框
用结构伪类选择器选择每个列表并为其加上背景图，每个列表下方为1px的灰色虚线边框，最后一个列表没有
文本超链接为黑色粗体，当鼠标悬停在超链接文本上时文本变色，并且无下划线
商品分类列表类
body>div{
width: 180px;
border: 2px;
border: solid;
border-color: coral;
border-radius: 15px;
}
li{
list-style-type: none;
height: 50px;
margin-left: -40px;
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: gray;
}
p{
padding-top: 10px;
font-weight: bold;
}
a{
color: black;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: coral;
}
5.制作图所示的权威课程免费体验登入页面，要求如下：
页面文本颜色为白色，*的字体颜色为红色
使用无序列表排版表单元素
无序列表内容在页面中居中显示
“免费体验”按钮使用背景图像方式实现
按语义化使用表单元素，且是圆角边框
免费体验登入页面
第七章
1.清除浮动的方法有哪几种？分别如何实现？
4种
1.浮动元素后面加空div
2.设置父元素的高度
3.父级添加overflow属性 overflow-hidden
4.父级添加伪类after content:’’; display:block; clear:both;
2.使用display：inline-block或float布局网页有什么区别？需要注意什么？
display:inline-block 有缝隙 float没有
注意使用场景
3.制作图所示的摄影社区热门小区页面，要求如下：
使用div和无序列表相结合的方法布局HTML文档
使用float属性创建横向多列布局排版网页元素
摄影社区热门小镇
摄影社区热门小镇
- 风景狙击手
- 成员：80
- 作品：276
- 叙事感
- 成员：235
- 作品：116
- 定焦视界
- 成员：56
- 作品：456
- 中画幅乐园
- 成员：130
- 作品：239
- 《卡啪》先锋...
- 成员：78
- 作品：125
- 植物的无声世界
- 成员：235
- 作品：1258
div>div{
margin-left: 8px;
}
.a1{
margin: 50px auto;
width: 730px;
border: 1px;
border-color: gray;
border-style: solid;
}
.a1:after{
content: '';
display: block;
clear: both;
}
li{
list-style-type: none;
}
.a2{
color: #555555;
font-weight:bolder;
margin-left: 15px;
float: left;
}
.a3{
float: left;
clear: left;
}
.a31,.a32{
display: inline-block;
}
.a32{
margin-left: -30px;
}
.a321{
font-size: 18px;
color:blue;
margin-bottom: 2px;
}
.a322{
color: #888888;
}
.a31{
padding: 3px;
padding-bottom: 0px;
border-radius: 5px;
border: 1px;
border-color: gray;
border-style: solid;
}
.a4{
margin-left: 60px;
float: left;
}
.a5{
margin-left: 80px;
float: left;
}
.a6{
float: left;
clear: left;
}
.a7{
margin-left: 60px;
float: left;
}
.a8{
margin-left: 36px;
float: left;
}
4.制作图所示的名人名言页面，要求如下：
使用header，article，section，nav，footer等结构元素布局
使用float属性创建横向多列布局
使用无序列表制作导航菜单，并使盒子属性美化菜单，当鼠标移至导航菜单上时显示下划线
使用标题标签排版网页中的各级标签
页面的完整效果及页面中字体样式、颜色等参照素材
名人名言
名人名言
分享名人名言，开始一段触动心灵的智慧之旅跳到内容
心理学经典名言的智慧
洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论
作者简介
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。
发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论
赞助广告
.kkk{
content: '';
display: block;
clear: both;
width: 950px;
margin: 0px auto;
font-size: 14px;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
header a{
color: gray;
}
header li{
float: left;
padding: 10px;
border: 1px solid gray;
border-bottom: none;
border-left: none;
}
.a1{
border-left: 1px solid gray;
margin-left: 10px;
}
header ul{
margin-top: 40px;
overflow:hidden;
border-bottom: 1px solid gray;
}
header p,.a6 p, .no2 li{
color: gray;
font-style:oblique;
}
.a2{
border: 1px solid gray;
overflow: hidden;
}
.no1{
margin-top: 30px;
width: 60%;
float: left;
}
.a2 h3{
margin-left: 10px;
margin-top: 5px;
}
.a2 p{
margin-left: 10px;
color: gray;
}
.a3 p:nth-of-type(1)~p,.a5 p:nth-of-type(1)~p{
color: gray;
margin-top: -15px;
}
.a4{
margin-top: -12px;
border: 1px solid gray;
height: 37px;
}
.a4 h3{
margin-top: 5px;
margin-left: 10px;
}
.a6{
border: 1px solid gray;
}
.a6 img{
width: 95%;
margin-left: 10px;
}
.a6 p{
margin-left: 10px;
}
.no2{
margin-top: 30px;
width: 35%;
float: right;
border: 1px solid gray;
}
.no2 li{
margin-top: 15px;
margin-left: -20px;
margin-right: 20px;
}
.no2 ul{
margin-top: 40px;
}
.no2 li a{
color: gray;
}
footer{
width: 100%;
margin-top: 30px;
border-top: 1px solid gray;
float: left;
}
footer p{
text-align: center;
color: gray;
}
5.制作彩妆热卖产品页面，要求如下：
页面背景颜色为浅黄色，彩妆热卖产品列表背景颜色为白色
标题放在段落标签中，标题背景颜色为桃红色，字体颜色为白色
使用无序列表制作彩妆热卖产品列表，两个产品列表之间使用虚线隔开
超链接字体颜色为灰色，无下划线，数字颜色为白色，数字背景为灰色圆圈
当鼠标移到超链接上时，超链接字体颜色为桃红色，无下划线，数字颜色为白色，数字背景为桃红色圆圈，并显示产品对应图片、价格和当前已购买人数
彩妆热卖产品列表
.top{
width: 320px;
}
li{
padding-bottom: 15px;
margin-top: 20px;
list-style-type: none;
border-bottom: 2px dashed gray;
}
div div{
display: none;
}
div a:hover div{
display: block;
color: red;
}
a:hover{
color: red;
}
div a:hover span{
border:1px solid #fb4e4c;
background-color: #fb4e4c;
}
span{
color: #FFFFFF;
text-align: center;
display: inline-block;
width: 20px;
height:20px;
border:1px solid gray;
border-radius: 50%;
background-color: gray;
}
a{
color: gray;
text-decoration: none;
}
.top>p{
background-color: #fb4e4c;
height: 34px;
width: 300px;
font-weight: bold;
color: #FFFFFF;
padding-top: 10px;
padding-left: 20px;
}
ul{
margin-left: -38px;
}
第八章练习
当当图书馆
- 偷影子的人
- 作者:[法]马克·李维(Marc Levy) 著,段韵灵 译
- 出版社：湖南文艺出版社
- 当当价：￥ 17.90
- 不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，
一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，
因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他
- 看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘
- 作 者：柴静 著
- 出版社：广西师范大学出版社
- ￥ 29.40 7.4折
- 改变孩子先改变自己
- 作 者：贾容韬 贾毅 著
- 出版社：作家出版社
- ￥ 22.20 7.4折
尾品汇