<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>无标题文档</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<header>
<div class="container">
<div class="nav">
<ul>
<li id="dh"><a href="">Fisn</a></li>
<li>
<ul id="droplist_ul">
<li id="n0"><a href="index.html">首页</a></li>
<li id="n1"><a href="profile.html">我们的故事</a></li>
<li id="n2"><a href="gaojizhubao.html">产品展示</a>
<ul>
<li>
<ul>
<li><span>Fisn世界</span></li>
<li onClick="window.location.href='gaojizhubao.html'"><span>高级珠宝</span></li>
<li><span>订婚呢戒指婚戒</span></li>
<li><span>珠宝</span></li>
</ul>
</li>
<li>
<ul>
<li><span>礼物</span></li>
<li><span>包装与配饰</span></li>
<li><span>香水</span></li>
<li><span>腕表</span></li>
</ul>
</li>
<li>
<img src="image/bog.jpg" alt="">
</li>
</ul>
</li>
<li id="n3"><a href="news.html">时尚前沿</a>
<ul>
<li>
<ul>
<li ><span>时尚前沿</span></li>
<li onClick="window.location.href='a-news.html'"><span>时装资讯</span></li>
<li><span>珠宝资讯</span></li>
<li><span>腕表资讯</span></li>
</ul>
</li>
<li>
<ul>
<li><span>最好的Fisn</span></li>
<li><span>秀场最新系列</span></li>
<li><span>最新定制珠宝</span></li>
<li><span>高级定制</span></li>
</ul>
</li>
<li>
<img src="image/biao.jpg" alt="">
</li>
</ul>
</li>
<li id="n4"><a href="contact.html">联系我们</a></li>
</ul>
</li>
<li>
<ul class="droplist_ul">
<li><a href=""><img style="width: 0.25rem" src="image/fdj.png" alt=""></a></li>
<li><a href=""><img style="width: 0.25rem" src="image/ax.png" alt=""></a></li>
<li id="n5"><a href="biaodan.html">My Fisn</a>
</li>
<li><a href=""><img style="width: 0.25rem" src="image/wh.png" alt=""></a></li>
<li><a href="">012 3567 891</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<main>
<section class="crumbs">
<span class="crumbs-1"><a href="#">香水</a></span>
<span class="crumbs-1">
<span class="mainline">|</span>
<a href="#">按系列</a>
</span>
<span class="crumbs-1">
<span class="mainline">|</span>
<a href="#">男生系列</a>
</span>
</section>
<section class="wrapper">
<div class="wrapper-left">
<div class="wrapper-left-box">
<div class="imgbox">
<img id="pic01"
src="https://www.bulgari.cn/media/catalog/product/cache/6e8bf58cd790c423691f019c814cf844/8/3/83110-E-001.png"
alt="">
<img id="pic02"
src="https://www.bulgari.cn/media/catalog/product/cache/6e8bf58cd790c423691f019c814cf844/8/3/83110-E-001_1.png"
alt="">
<img id="pic03"
src="https://www.bulgari.cn/media/catalog/product/cache/6e8bf58cd790c423691f019c814cf844/8/3/83110-E-002.png"
alt="">
</div>
</div>
<div class="btnbox">
<li>
<a href="#pic01">
<img src="https://www.bulgari.cn/media/catalog/product/cache/6e8bf58cd790c423691f019c814cf844/8/3/83110-E-001.png"
alt="">
</a>
</li>
<li>
<a href="#pic02">
<img src="https://www.bulgari.cn/media/catalog/product/cache/6e8bf58cd790c423691f019c814cf844/8/3/83110-E-001_1.png"
alt="">
</a>
</li>
<li>
<a href="#pic03">
<img src="https://www.bulgari.cn/media/catalog/product/cache/6e8bf58cd790c423691f019c814cf844/8/3/83110-E-002.png"
alt="">
</a>
</li>
</div>
</div>
<div class="wrapper-right">
<h1 class="biaoti">Pour Homme 宝格丽男士 淡香水</h1>
<!-- <img class="xinxing" src="http://www.w3.org/2000/svg"> -->
<p class="bianma">83110</p>
<div class="shuliang">
<select>
<option>数量:1</option>
<option>数量:2</option>
<option>数量:3</option>
</select>
</div>
<p class="jiage">¥730</p>
<p class="fenqi">此作品尊享分期</p>
<div class="button-buy">
<div class="button-text">加入购物袋</div>
</div>
<div class="weixin">
<div class="weixin-img"><img src="https://www.bulgari.cn/media/pageBuilder/1.png" width="30px"
height="30px"></div>
<div class="weixin-text">微信快捷支付下单</div>
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
首先确定项目框架,分为四个部分,首先是html,这里是网页的内容,网页的基础;然后是css,这是网页的布局样式,将网页内容按照我们想要的方式进行排版;然后是js,这是网页的动画效果,毕竟网页的灵魂还是在于js,有动画用户才能有很好的体验感;最后是资源文件,网页中用到的图片视频等,都放到了这里。 因为有的页面部分可能会出现在好几个页面上。在这个项目里,页面顶部的导航栏部分出现每个页面中,而且底部也是经常使用的。所以就将这两者都单独写一个html文件,用到的样式也都写到css中,也就是header.css和footer.css。这样可以进行复用,省去很多重复工作。 每个页面的整体布局是最复杂的最花时间的,因为要不停地调整运行,查看再调整。很多标签放一起进行设置,虽然方便,但是问题也比较多。比如段落可以放一起设置内边距padding和外边距margin。列表根据class来设置字体颜色和大小。对于大的标签,设置高度和宽度,以及背景,都使用的百分比布局。进行层次嵌套的设置,这样更加方便具体。 82张图片,10个CSS文件,7个JS文件,11个HTML文件,布局动画丰富,注释详细。
资源推荐
资源详情
资源评论
收起资源包目录
Web实训大作业源码,仿路易斯威登官网,html,js,css,高分课设,小白必看! (111个子文件)
sprite.bmp 11KB
news.css 14KB
contact.css 12KB
index.css 11KB
main.css 8KB
nav.css 7KB
biaodan.css 6KB
profile.css 5KB
zhubaoshow.css 3KB
a-news.css 3KB
footer.css 690B
shixun.html 14KB
xianglian.html 9KB
profile.html 9KB
contact.html 9KB
news.html 8KB
gaojizhubao.html 7KB
index.html 6KB
biaodan.html 6KB
a-news.html 5KB
header.html 2KB
footer.html 800B
zb3.jpeg 90KB
zb1.jpeg 87KB
bog.jpg 561KB
biao.jpg 407KB
xl10.jpg 293KB
profile-4.jpg 165KB
xl1.jpg 160KB
zb2.jpg 151KB
profile-6.jpg 130KB
profile-3.jpg 58KB
profile-2.jpg 57KB
jquery.js 83KB
biaodan.js 3KB
news.js 2KB
contact.js 869B
header.js 546B
showtext.js 445B
nav.js 385B
banner3.png 1.42MB
banner123.png 1.4MB
banner33.png 1.39MB
banner4.png 1.28MB
banner1.png 1.28MB
banner2.png 1.23MB
banner22.png 1.16MB
banner44.png 1.12MB
banner11.png 668KB
banner12345.png 557KB
part1-women3.png 479KB
a-news.png 365KB
part2-women3.png 311KB
news6.png 181KB
news3.png 169KB
sb1.png 164KB
part1-women4.png 137KB
news4.png 134KB
zb1.png 132KB
part1-men1.png 131KB
news7.png 129KB
part2-women2.png 129KB
news1.png 126KB
news2.png 124KB
zb2.png 120KB
book.png 116KB
xl8.png 112KB
xl9.png 102KB
mag.png 101KB
xl7.png 100KB
part2-women4.png 99KB
news5.png 97KB
profile-5.png 90KB
xl6.png 88KB
part1-women2.png 86KB
faxian03.png 81KB
faxian01.png 81KB
xl5.png 81KB
xl2.png 80KB
xl3.png 79KB
cloth1.png 79KB
sb2.png 74KB
part1-women1.png 73KB
cloth2.png 71KB
xl4.png 69KB
part2-women1.png 68KB
cloth3.png 61KB
bear.png 58KB
cloth4.png 56KB
faxian02.png 49KB
man.png 47KB
zhubao3.png 45KB
zhubao4.png 40KB
profile-1.png 39KB
zhubao1.png 10KB
zhubao2.png 7KB
like.png 7KB
sx.png 5KB
bgg.png 5KB
bg.png 3KB
共 111 条
- 1
- 2
资源评论
振华OPPO
- 粉丝: 27w+
- 资源: 533
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功