html5css3选择题,HTML5+CSS3_20180603_第六次作业

题目1(简答题)： HTML5是什么？有哪些新增标签(请举例说明)？

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容： [1] )。 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

header-----页面的头部

main----页面主体内容部分(每个页面只可以出现一次)

section------划分区域

(section里面可以放多个article)

article------划分文章每章节(article里面可以放多个aside)

nav----导航区域

ul>li

footer----底部导航区域

figure----里面可以放入图片和文字

p img h3

hgroup----标题与子标题的组合

题目2(简答题)： input 有哪些新增类型(请举例说明)？

email电子邮箱文本框

tel电话号码

url网页URL地址

search搜索引擎

date日期类型

time时间

range特定范围内的数值选择器

number只包含数字的输入框

placeholder输入框提示信息

autocomplete是否保存用户输入值

autocomplete是否保存用户输入值，默认为on，关闭提示选择off

autofocus指定表单获取输入焦点

required此项必填，不为空

Name:

disabled表单禁用状态

Last name:

datalist选项列表与input元素配合使用，来定义input可能的值

从列表中选择这个浏览器` `` `` `` `` `` `` ` ` `` `` `

题目3(编程题)：用html5标签做一个简单的页面布局(如下图所示)

html代码

主页 咖啡及文化 饮品及美食 星享俱乐部 在线订阅

开启您的星享之旅

星享卡会员光顾星巴克时可积累星星，兑换好礼！

每积累消费50元可获赠一颗星星。星星越多，好礼
越多哦！点击这里开启您的星享惊喜之旅！

星巴克饮品

美式咖啡卡布奇诺

拿铁魔卡

css代码

*{

text-decoration:none;

list-style:none;

margin:0;

padding:0;

}

header{

width:1100px;

height:150px;

margin:0px auto;

}

header img{

margin:35px 40px;

}

header li{

float:left;

background-color:rgb(236, 228, 208);

margin:0px 10px;

width:92px;

text-align:center;

}

nav .l1{

width:60px;

background-color:rgb(200, 185, 156);

}

header a{

color:rgb(25, 112, 73);

font-weight: bolder;

}

nav{

width:700px;

height:150px;

float:left;

margin-left:70px;

}

article{

width:130px;

height:150px;

float:left;

}

main{

width:1100px;

height:630px;

margin:0px auto;

}

section{

width:35%;

height:180px;

background-color: rgb(239, 229, 208);

float:left;

}

h3{

color:rgb(25, 112, 73);

margin-left:20px;

line-height:70px;

}

section p{

margin-left:20px;

font-size:14px;

}

section p a{

color:rgb(25, 112, 73);

font-weight: bolder;

}

main article{

width:35%;

height:480px;

float:left;

background-color: rgb(239, 229, 208);

margin:10px 0px;

}

aside{

width:63%;

height:75%;

float:right;

background-image: url(../img/main.png);

background-repeat: no-repeat;

margin-right:10px;

}

.img1{

width:350px;

height:163px;

}

.img1 .i1{

float:left;

margin-left:25px;

}

.img1 .i2{

float:right;

}

article .a2{

font-size:14px;

margin-left:73px;

}

article .s2{

font-size:14px;

margin-left:115px;

}

.img2{

width:350px;

height:163px;

margin:10px 0px;

}

.img2 .i3{

float:left;

margin-left:25px;

}

.img2 .i4{

float:right;

}

article .a3{

font-size:14px;

margin-left:86px;

}

article .s3{

font-size:14px;

margin-left:150px;

}

第二道大题：

html代码

阴影和圆角的实现

圆角

圆形

阴影

css代码

*{

margin:0;

padding: 0;

}

.all{

width:100%;

height:695px;

background-image: url(../img/coffee1.png);

float:left;

}

.f1{

float:left;

width:98%;

height:230px;

background-color: rgba(255,255,255,0.7);

margin:0px 15px;

border-radius:30px;

}

.f1 .fang{

width: 90px;

height: 90px;

background-color: rgb(37,195,183);

border-radius:10px;

margin:60px 570px;

float:left;

text-align: center;

line-height: 90px;

}

.f1 .yuan{

width: 90px;

height: 90px;

background-color: rgb(37,195,183);

border-radius:45px;

margin:60px -390px;

float:left;

text-align: center;

line-height: 90px;

}

footer{

float:left;

width:98%;

height:230px;

background-color: rgba(255,255,255,0.7);

margin:235px 15px;

border-radius:30px;

}

.f2{

float:left;

width:98%;

height:230px;

background-color: rgba(255,255,255,0.7);

margin:0px auto;

border-radius:30px;

}

.zheng{

width:200px;

height:200px;

background-color: rgb(131,128,231);

text-align: center;

line-height: 200px;

margin:15px auto;

box-shadow: 10px 10px 5px rgb(219,43,173);

}