web前端期末大作业 html+css+javascript网页设计实例 时尚服装企业网站制作
原创
©著作权归作者所有:来自51CTO博客作者html网页设计的原创作品,请联系作者获取转载授权,否则将追究法律责任
📂文章目录
二、📚网站介绍
📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。
📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。
📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。
三、🔗网站效果
▶️1.视频演示
C122JP 时尚服装6页 无js 带下拉
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>High Fashion Website Template</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css">
<![endif]-->
</head>
<body>
<div class="header">
<div>
<a href="index.html" id="logo"><img src="images/logo.png" alt="logo"></a>
<ul>
<li class="selected">
<a href="index.html">首页</a>
</li>
<li><a href="about.html">简介</a></li>
<li>
<a href="collections.html">详情介绍</a>
<ul>
<li>
<a href="collections.html">Women's</a>
</li>
<li>
<a href="collections.html">Men's</a>
</li>
</ul>
</li>
<li>
<a href="deng.html">用户登录</a>
</li>
<li>
<a href="zhu.html">用户注册</a>
</li>
</ul>
</div>
<div class="featured">
<img src="images/bg-absolute.png" alt="">
<div>
<h3>时尚... <br>
fashion...</h3>
<a href="collections.html">2014 Spring Collection</a>
</div>
</div>
</div>
<div class="body">
<div>
<h2> 欢 迎 来 到 2 0 1 4 年 Saverio Salermo 个 人 春 季 时 装 秀</h2>
<p>
Saverio Salermo时装创立于1995年,自2000年开始有了属于自己的时装秀。 Saverio Salermo时装秀分为春秋两季,分别在每年的2、3月和9、10月各开一次。 Saverio Salermo时装秀引领者潮流,一直被认为是世界时装设计和消费的“晴雨表”。</p>
<p>一场完美的秀,更多的是坚定、l准确的传递出品牌形象。 </p>
<ul>
<li>
<a href="collections.html"><img src="images/figure2.jpg" alt=""></a> <a href="collections.html">春秋系列</a>
</li>
<li>
<a href="collections.html"><img src="images/figure3.jpg" alt=""></a> <a href="collections.html">夏季时装</a>
</li>
<li>
<a href="collections.html"><img src="images/figure4.jpg" alt=""></a> <a href="collections.html">设计师</a>
</li>
<li>
<a href="collections.html"><img src="images/figure5.jpg" alt=""></a> <a href="collections.html">Salermo 用户登录</a>
</li>
</ul>
</div>
</div>
<div class="footer">
<div>
<p>
© Saverio Salermo
</p>
<ul>
<li>
<a href="#">隐私权益</a>
</li>
<li>
<a href="#">条款 </a></li>
<li><a href="#">条件</a>
</li>
</ul>
<div class="connect">
<a href="http://freewebsitetemplates.com/go/twitter/" id="twitter">Twitter</a> <a href="https://passport.weibo.com/visitor/visitor?entry=miniblog&a=enter&url=http%3A%2F%2Fd.weibo.com%2F100803%3Frefer%3Dindex_hot_new%3Fc%3Dspr_web_mthz_sogou_weibo_t205&domain=.weibo.com&ua=php-sso_sdk_client-0.6.23&_rand=1481514271.3239" id="facebook">新浪微博</a> <a href="http://freewebsitetemplates.com/go/googleplus/" id="googleplus">Google+</a>
</div>
</div>
</div>
</body>
</html>
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!