课本教程素材电商网页制作
HTML代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商网页制作</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- videobox bigan -->
<div class="videobox">
<header>
<div class="con">
<section class="left"></section>
<section class="right">
<a href="#">登录</a>
<a href="#">注册</a>
</section>
</div>
</header>
<nav>
<ul>
<li class="left">
<a class="one" href="#">
<img src="images/sanxian.png" alt="">
<span>选项</span>
<img src="images/sanjiao.png" alt="">
</a>
<aside>
<span></span>
<ol class="zuo">
<li class="con">护肤</li>
<li>>洁面</li>
<li>>爽肤水</li>
<li>>精华</li>
<li>>乳液</li>
<li class="con">彩妆</li>
<li>>BB霜</li>
<li>>卸妆</li>
<li>>粉底液</li>
<li class="con">香氛</li>
<li>>女士香水</li>
<li>>男士香水</li>
<li>>中性香水</li>
</ol>
<ol class="you">
<li class="con">男士专区</li>
<li>>爽肤水</li>
<li>>洁面</li>
<li>>面霜</li>
<li>>精华</li>
<li class="con">热门搜索</li>
<li>>洗面奶</li>
<li>>去黑头</li>
<li>>隔离</li>
<li>>面膜</li>
</ol>
<img src="images/tu1.jpg" alt="">
</aside>
</li>
<li class="center">
<form>
<input type="text" value="请输入商品名称、品牌或编号">
</form>
</li>
<li class="right">
<a href="#"></a>
<a href="#"></a>
<a href="#">󰄪</a>
<a href="#"></a>
</li>
</ul>
</nav>
<video src="video/home_loop_720p.mp4" autoplay="ture" loop="ture" ></video>
<audio src="audio/home.ogg" autoplay="ture" loop="ture"></audio>
<div class="pic">
<p>Select the right resolution for your PC and dive in! （请为您的电脑选择正确的分辨率）</p>
<ul>
<li class="one"><span></span>STANDARD标准</li>
<li class="two"><span></span>HD高清</li>
</ul>
</div>
</div>
<!-- videobox end -->
<!-- new bigan -->
<div class="new">
<header>
<img src="images/new.jpg" alt="">
</header>
<p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p>
<ul>
<li>
<hgroup>
<h2>fresh skin 薏仁水</h2>
<h2>化妆水/爽肤水单品</h2>
<h2></h2>
<h2></h2>
</hgroup>
</li>
<li>
<hgroup>
<h2>蜂蜜原液天然滋养</h2>
<h2>美白护肤套装</h2>
<h2></h2>
<h2></h2>
</hgroup>
</li>
<li>
<hgroup>
<h2>纯情诱惑一抹惊艳</h2>
<h2>告别暗淡唇</h2>
<h2></h2>
<h2></h2>
</hgroup>
</li>
</ul>
</div>
<!-- new end -->
<!-- try bigan -->
<div class="try">
<header>
<img src="images/shizhuang.jpg" alt="">
</header>
<p>美化容貌 增添自信 突出个性 </p>
<ul>
<li>
<img class="zheng" src="images/try1.jpg" alt="">
<img class="fan" src="images/try4.jpg" alt="">
</li>
<li>
<img class="zheng" src="images/try2.jpg" alt="">
<img class="fan" src="images/try5.jpg" alt="">
</li>
<li>
<img class="zheng" src="images/try3.jpg" alt="">
<img class="fan" src="images/try6.jpg" alt="">
</li>
</ul>
</div>
<!-- try end -->
<!-- text bigan -->
<div class="text">
<header>
<img src="images/cp.jpg" alt="">
</header>
<p>评测 我们更专业 用户更放心</p>
<ul>
<li>
<img class="tu" src="images/cp1.jpg" alt="">
<img class="tihuan" src="images/th1.png" alt="">
</li>
<li>
<img class="tu" src="images/cp2.jpg" alt="">
<img class="tihuan" src="images/th2.png" alt="">
</li>
<li>
<img class="tu" src="images/cp3.jpg" alt="">
<img class="tihuan" src="images/th3.png" alt="">
</li>
<li>
<img class="tu" src="images/cp4.jpg" alt="">
<img class="tihuan" src="images/th4.png" alt="">
</li>
<li>
<img class="tu" src="images/cp5.jpg" alt="">
<img class="tihuan" src="images/th5.png" alt="">
</li>
<li>
<img class="tu" src="images/cp6.jpg" alt="">
<img class="tihuan" src="images/th6.png" alt="">
</li>
<li>
<img class="tu" src="images/cp7.jpg" alt="">
<img class="tihuan" src="images/th7.png" alt="">
</li>
<li>
<img class="tu" src="images/cp8.jpg" alt="">
<img class="tihuan" src="images/th8.png" alt="">
</li>
</ul>
</div>
<!-- text end -->
<footer>
<div class="logo"></div>
<div class="message">
<form>
<ul class="left">
<li>
<p><label for="">姓名：</label></p>
<input type="text">
</li>
<li>
<p>邮箱：</p>
<input type="email">
</li>
<li>
<p>电话：</p>
<input type="tel" pattern="^\d{11}$" title="请输入11位数字">
</li>
<li>
<p>密码：</p>
<input type="password">
</li>
<li>
<input class="but" type="submit" value="">
</li>
</ul>
<div class="right">
<p>留言：</p>
<textarea></textarea>
</div>
</form>
</div>
</footer>
<div class="banquan">
<a href="#">fresh skin 美肤科技有限公司</a>
</div>
</body>
</html>效果图
①本站所有成品淘宝购买需确认收货并好评后发货；
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » 课本教程素材电商网页制作
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » 课本教程素材电商网页制作
