《》《》《》《》《》《》《》《》《》《》《》《》《》《》
刘老师辛苦了，这周事太多，作业交晚了：）
手动比心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/Coffee.css">
</head>
<body>
<header>
<article>
<img src="img/图标.png" alt=""width="100px"height="100px">
</article>
<nav><ul>
<li class="l_1"><a href="#">主页</a>
<li><a href="#">咖啡及文化</a>
<li><a href="#">饮品及美食</a>
<li><a href="#">星享俱乐部</a>
<li><a href="#">在线订阅</a>
</ul>
</nav>
</header>
<main>
<section>
<h2>开启您的星享之旅</h2>
<p>
星享卡会员光顾星巴克时可积累星星，兑换好礼！
每积累消费50元可获赠一颗星星。星星越多，好礼越多哦！
<a>点击这里</a>开启您的星享惊喜之旅！
</p>
</section>
<aside>
</aside>
<article>
<h2>星巴克饮品</h2>
<div class="img_1">
<img src="img/coffee1.png" alt=""class="i_1">
<img src="img/coffee2.png" alt=""class="i_2">
</div>
<a class="a_2">美式咖啡</a><div class="s_2">卡布奇诺</div>
<div class="img_2">
<img src="img/coffee3.png" alt=""class="i_3">
<img src="img/coffee4.png" alt=""class="i_4">
</div>
<a class="a_3">拿铁</a><div class="s_3">摩卡</div>
</article>
</main>
</body>
</html>
*{
text-decoration:none;
list-style:none;
margin:0;
padding:0;
}
header{
width:1000px;
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 .l_1{
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;
}
h2{
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;
}
.img_1{
width:350px;
height:163px;
}
.img_1 .i_1{
float:left;
margin-left:25px;
}
.img_1 .i_2{
float:right;
}
article .a_2{
font-size:14px;
margin-left:73px;
}
article .s_2{
font-size:14px;
margin-left:115px;
}
.img_2{
width:350px;
height:163px;
margin:10px 0px;
}
.img_2 .i_3{
float:left;
margin-left:25px;
}
.img_2 .i_4{
float:right;
}
article .a_3{
font-size:14px;
margin-left:86px;
}
article .s_3{
font-size:14px;
margin-left:150px;
}
---------------手动分界线》》》》》》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css3.css">
<title>阴影、圆角</title>
</head>
<body>
<div class="all">
<div class="f_1">
<div class="F">圆角</div>
<div class="Y">圆形</div>
</div>
<footer>
<div class="f_2">
<div class="Z">
阴影
</div>
</div>
</footer>
</div>
</body>
</html>
*{
margin:0;
padding: 0;
}
.all{
width:100%;
height:695px;
background-image: url(../img/coffee1.png);
float:left;
}
.f_1{
float:left;
width:98%;
height:230px;
background-color: rgba(255,255,255,0.7);
margin:0px 15px;
border-radius:30px;
}
.f_1 .F{
width: 90px;
height: 90px;
background-color: rgb(37,195,183);
border-radius:10px;
margin:60px 570px;
float:left;
text-align: center;
line-height: 90px;
}
.f_1 .Y{
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;
}
.f_2{
float:left;
width:98%;
height:230px;
background-color: rgba(255,255,255,0.7);
margin:0px auto;
border-radius:30px;
}
.Z{
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);
}
_________>>>>>>>>>>>>
什么是 HTML5？
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
为 HTML5 建立的一些规则：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
----->>>>>>>>
