学习目标：
一周内掌握html各种标签的运用与实际代码的写入
学习内容：
1，学会构建HTML基本格式；
2，学会正确使用HTML标签；
3，学会如何快速有效的完成HTML网页的编写；
学习时间：
周一，周二，周三，周四，周五：早上8点~11点，下午3点到晚上10点。
周六：早上8点~10点，下午4点到10点。
周日：早上8点以后开始总结前面学习的成果与学习后的感悟。
学习产出：
1，使用各种基础标签制作的简单页面不含css代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<header><img src="img/faq01.jpg" ></header>
<h2><img src="img/faq03.jpg" >客服温馨提示</h2>
<article>为了减少您可能的等待时间，您不妨先仔细阅读下面的常见问题。
查询物流状态，退货，退余额等操作均可以登录聚美优品网站后自助进行，无需联系客服。
如果仍无法解决。
请您在本页页底联系在线客服，或拨打聚美客服电话。小美谢谢您的理解！</article>
<hr >
<b><section style="font-size: 20px;">每订单什么时候发货？大概多长时间可以收到货？</section></b>
<article>正常情况下您的订单将在6小时内发出（最晚不超过1个工作日）。8月1日的订单，将在3日内全部发出。发货之后，您可以在我的订单中可以查看发货状态。
由于快递公司可能无法实时更新信息，因此您看到的发货情况可能有一定延迟。</article>
<hr >
<b> <section style="font-size: 20px;">为什么后下的订单，先收到了，之前下的订单还没有收到？你们是按什么顺序发货的？</section> </b>
<article>为了单位时间内以最快速度处理尽量多订单，聚美会适当综合按订单里货品配货的情况安排发货顺序，因此可能会出现订单发货和下单顺序不完全一致的情况。
我们会尽一切努力为您尽快发货。</article>
<hr >
<b> <section style="font-size: 20px;">订单显示发货了，但快递信息为什么还没有更新？</section> </b>
<article>您在聚美订单页面看到的物流查询信息由快递公司传递提供。由于快递公司信息更新会有一定延迟，请您多多谅解。
（延迟时间可能从1天到3天不等，EMS快递的物流配送信息可能最多可能有1周左右延迟）</article>
<hr >
<b> <section style="font-size: 20px;">名品折扣产品显示发货了，但是为什么没有快递信息？为什么有时联系快递，快递称没有这个订单？</section> </b>
<article>由于名品折扣产品由品牌商负责发货，品牌商选择的部分快递公司不能及时提供快递物流信息，请您耐心等候。除非地域偏远，最晚七日内您应该可以收到货品。</article>
<hr >
<b> <section style="font-size: 20px;">名品折扣产品收到后，发现漏发了或者错发，应该怎么办？</section></b>
<article> 请您先准备好漏发，错发的相关图片（拍摄图片），再通过在线客服核实，我们需要和品牌商方面进行确认，待客服确认后会进行补发或退款。</article>
<hr >
<b> <section style="font-size: 20px;">如果使用了现金券或红包的订单想退货，怎么办？</section> </b>
<article>对没有付款的订单或者货到付款订单，您可以选择取消订单再重新下单。
如果订单已经付款（或货到付款订单已被系统确认），请您自助登陆聚美优品网站提交退货申请，待聚美工作人员审批通过后订单就会进入退货状态，同时订单对应红包会变为“未使用”状态。
此时您可以选择在我的订单页面将红包订单进行退款退货。</article>
<hr >
</div>
<img src="img/faq02.jpg" >
</body>
</html>
2，使用<a>标签制作的简易页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<h1>帮助中心</h1>
<body>
<h4><a href="#">使用帮助</a></h4>
<h4><a href="#">账户相关</a></h4>
<h4><a href="#">支付相关</a></h4>
<h4><a href="#">配送相关</a></h4>
<h4><a href="#">售后服务</a></h4>
<h4><a href="#">聚美手机版</a></h4>
</body>
</html>
3，使用<ul>,<li>制作的简易页面代码：
css代码；
.syk{
font-size: 30px;
font-weight: 700;
}
.syk2{
font-size: 25px;
font-weight: 500;
}
.syk2 img{
width: 40px;
height: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../css/2.css" />
</head>
<body>
<img src="../img/iknowshouye.jpg" />
<p class="syk">品牌全知道</p>
<ul>
<li class="syk2">
<img src="../img/icon-1.jpg" /> 理肤泉敏感全知道
</li>
<li class="syk2">
<img src="../img/icon-2.jpg" /> 微资健康肌肤全知道
</li>
<li class="syk2">
<img src="../img/icon-3.jpg" />中信银行全知道
</li>
<li class="syk2">
<img src="../img/icon-4.gif" />Windows7全知道
</li>
<li class="syk2">
<img src="../img/icon-5.jpg" />海信电视全知道
</li>
<li class="syk2">
<img src="../img/icon-6.jpg" />多美滋全知道
</li>
<li class="syk2">
<img src="../img/icon-7.jpg" />三星手机全知道
</li>
</ul>
</body>
</html>
4，nth-child的运用案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li:nth-child(odd){
background-color: red;
}
li:nth-child(even){
background-color: #00FFFF;
}
</style>
</head>
<body>
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
