第六次作业

作者: 呼吼嚯哈噗噗噗 | 来源:发表于2018-06-09 12:00 被阅读0次

赵浚皓思维导图
绘画英
2018-02-09
2019思维导图寒假班
理想中的房子
第六次作业
NJUPT《JAVA程序设计》
第六次作业——水彩人物
关键词阅读提取法
端银×八正道|21天百万实操信用卡特训营011+馨允第️六次作业

Q1： HTML5是什么？有哪些新增标签(请举例说明)？
A：HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。
新增的标签有：
header:页面头部
main：页面主体内容部分
section:划分区域
article：划分文章每章节
nav:导航区域
footer:底部导航区域
figure:独立的单元，例如图片和文字
hgroup:标题与子标题的组合
aside:标签内容之外与标签内容相关的辅助信息

Q2： input 有哪些新增类型(请举例说明)？
email:只能输入邮箱
<input type="email" name="" id="">
tel：在手机端会弹出数字键盘
<input type="tel" name="" id="">
url:只能输入网址
<input type="url" name="" id="">
search:搜索常规的文本域
<input type="search" name="" id="">
range:特定范围内的数值选择器
<input type="range" name="" id="">
date:输入的内容为日期
<input type="date" name="" id="">
numer:只包含数字的输入框
<input type="number" name="" id="">
time:输入时间
<input type="time" name="" id="">
placeholder:输入框提示信息
<input type="text" name="" id="" placeholder="请输入用户名">
autofocus:获得表单的默认输入焦点（光标默认位置）
<input type="text" name="" autofocus>
autocomplete:是否保存用户的输入值,默认为on，关闭提示选择off
required:选项必填，不能为空
<input type="text" name="usr_name" required="required">
disabled:表单禁用状态
input(list)、datalist(id)、option
<label for="myBrowser">从列表中选择这个浏览器</label>
<input list="browsers" id="myBrowser" name="myBrowser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
<input type="submit" value="提交">

Q3:用html5标签做一个简单的页面布局（如下图所示）

image
实现效果：

效果图.jpg

HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>第六次作业</title>
<link rel="stylesheet" href="css/the_sixth_homework.css">
</head>
<body>
<div class="top"></div>
<header>
<nav>
<ul class="clearfix">
<li>主页</li>
<li>咖啡及文化</li>
<li>饮品及美食</li>
<li>星享俱乐部</li>
<li>在线订阅</li>
</ul>
</nav>
</header>
<main>
<section class="sec1">
<article class="art1">
<h3>开启您的星享之旅</h3>
<p>星享卡会员光顾星巴克时可积累星星，兑换好礼！每积累消费50元可赠一颗星星。星星越多，好礼越多哦？<a href="#">点击这里</a>开启您的星享惊喜之旅！</p>
</article>

            <article class="art2">
                <h3>星巴克饮品</h3>
                <figure>
                    <img src="image/meishi.jpg" height="192" width="174" alt=""></img>
                    <div>美式咖啡</div>
                </figure>
                <figure>
                    <img src="image/kabu.jpg" height="193" width="173" alt=""></img>
                    <div>卡布奇诺</div>
                </figure>
                <figure>
                    <img src="image/natie.jpg" height="194" width="173" alt=""></img>
                    <div>拿铁</div>
                </figure>
                <figure>
                    <img src="image/moka.jpg" height="194" width="173" alt=""></img>
                    <div>摩卡</div>
                </figure>
            </article>
        </section>
        <aside>
            
              家庭咖啡作坊帮助孩子们上大学
          <br>
              2015年6月30日
          <br>
              坎得利亚.塔拉兹是哥斯达黎加的一所家庭合作社，由哥斯达黎加最早成立的“微型作
          <br>
              坊”发展而来，其目的是为了控制其出产的咖啡豆品质。
          <br>
              他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯一家的生活质量，而且
          <br>
              他们现在已经有能力为让子女上大学，接受更好的教育。
          <br>
              该地出产的咖啡:星巴克家常咖啡豆，浓缩烘培，优肯综合咖啡豆
          <br>
              阅读(100)评论(2)
     
              部落与商业文化的有机融合有助社区发展
          <br>
              2015年5月20日
          <br>
              2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方，如今却已
          <br>
              经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。
          <br>
              在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会。
          <br>
              该地出产的咖啡:浓缩烘焙，祥龙咖啡豆阅读
          <br>
              (100)评论(2)
         
              咖啡为这个新国家的种植户带来发展的希望
          <br>
              2015年3月29日
          <br>
              东帝汶，既是世界上最晚建立国家之一，亦是最贫穷的国家之一。然而其出产独特咖啡为
          <br>
              成千上万依靠单一经济作物生活的农户带来了新希望。一个拥有17,000名成员的农户协作
          <br>
              社正在和星巴克合作，为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的
          <br>
              医疗服务。
          <br>
              该地出产的咖啡: TimorLorosa'e (核心咖啡只在澳大利亚销售)
          <br>
              阅读(100)评论(2)
        </aside>
    </main>
    <footer> @2015 &nbsp;Starbucks&nbsp;Corporation.&nbsp;All&nbsp;rights&nbsp;reserved.</footer>
    
</body>

</html>
CSS:
*{
padding:0;
margin: 0;
font-family: "微软雅黑";
}
body{
width:1393px;
}
.clearfix:after{
content: '';
display:block;
clear: both;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
header{
width: 1393px;
height: 140px;
background: url(../image/starbucks.jpg)80px 17px no-repeat;
background-size:143px 123px;
overflow: hidden;
}
.top{
height:9px;
width:100%;
background: #006747;
}
nav ul{
padding:105px 0 0 335px;
}
nav ul li{
margin-left:17px;
float:left;
background:#EFE5D0;
color:#016F48;
font-weight:800;
padding:8px 11px;
}
nav ul li:first-child{
background:#C8B99C;
}
.sec1{
display: inline-block;
}
.art1{
margin:22px 0 13px 121px;
width:370px;
height:110px;
background:#EFE5D0;
padding:24px;

}
.art1 h3{
color:#016F48;
font-size: 18px;
margin-bottom: 20px;
}
.art1 p{
font-size: 16px;
}
.art2{
margin-left:121px;
width:370px;
height:500px;
background:#EFE5D0;
padding:24px;
}
.art2 figure{
float:left;
}
.art2 figure:nth-child(2n+1){
margin-left:24px;
}
.art2 figure img{
width:164px;
height:183px;
}
.art2 h3{
margin-bottom:15px;
color:#016F48;
font-size: 18px;
}
.art2 figure div{
text-align: center;
margin-bottom: 15px;
}
aside{
width:639px;
height:475px;
background:#EFE5D0;
float:right;
margin-right:129px;
margin-top:22px;
padding:20px;
line-height: 22px;
}
footer{
height:36px;
background: #675C47;
text-align: center;
line-height: 36px;
color:#EFEFEF;
margin-top:10px;
}
Q4:
利用本次课所学的CSS3相关知识实现如下图所示的简单效果

image

实现效果：

image.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.square{
width:100px;
height:100px;
border-radius:25px;
background:#25c3b7;
line-height:100px;
text-align:center;
margin-left:50px;
display:inline-block;
}
.round{
width:100px;
height:100px;
border-radius:50px;
background:#25c3b7;
line-height:100px;
text-align:center;
margin-left:50px;
display:inline-block;
}
.shadow{
width:100px;
height:100px;
background:#8380E7;
line-height:100px;
text-align:center;
margin:50px;
box-shadow:15px 15px 5px #db2BAD;
display:inline-block;
}
</style>
</head>
<body>
<div class="square">圆角</div>
<div class="round">圆形</div>
<div class="shadow">阴影</div>
</body>
</html>