<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商网页制作</title>
<link href="index.css"type="text/css" rel="stylesheet"/>
</head>
<body>
<!-- videobox begin -->
<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 loop ></video>
<audio src="audio/home.ogg" autoplay="ture" loop></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 begin -->
<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 begin -->
<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 begin -->
<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>
Html+css静态网页制作
需积分: 44 180 浏览量
2018-01-09
18:34:52
上传
评论 8
收藏 7.18MB ZIP 举报
html+css网站制作.zip （57个子文件） 
html+css网站制作 项目效果图 
项目效果图.jpg 960KB
项目效果图.psd 11.22MB images logo1.jpg 32KB
th7.png 21KB sanjiao.png 3KB cp6.jpg 30KB th2.png 23KB but.jpg 26KB cp1.jpg 26KB th5.png 18KB th3.png 18KB cp8.jpg 28KB cp4.jpg 31KB liebiao.png 3KB try6.jpg 51KB anniu.png 4KB pic3.jpg 60KB pic1.jpg 72KB shizhuang.jpg 49KB pic2.jpg 48KB cp3.jpg 28KB search.png 3KB sanxian.png 3KB but.png 4KB th6.png 20KB try2.jpg 121KB try1.jpg 71KB try4.jpg 48KB try3.jpg 81KB try5.jpg 49KB cp.jpg 43KB new.jpg 42KB jiantou.png 3KB cp2.jpg 30KB wenzi.png 26KB th4.png 18KB cp7.jpg 30KB th1.png 18KB th8.png 19KB logo.png 4KB tu1.jpg 48KB cp5.jpg 29KB 字体库 iconfont ux_1446629159_9522004 iconfont.eot 7KB iconfont.ttf 7KB
iconfont.svg 5KB iconfont.woff 5KB
demo.html 3KB demo.css 3KB iconfont.css 888B fonts iconfont.eot 7KB iconfont.ttf 7KB iconfont.svg 5KB iconfont.woff 5KB index.html 5KB video 
home_loop_720p.mp4 923KB audio home.ogg 223KB index.css 10KB资源评论
