HTML期末⼤作业-仿⼩⽶商城官⽹⾸页模板(HTML+CSS+JavaScript)HTML期末作业作业-仿⼩⽶商城官⽹⾸页模板(HTML+CSS+JavaScript)
效果演⽰
⼩⽶商城官⽹⾸页模板基于HTML+CSS+JavaScript制作,包括导航栏,商品分类菜单等。
⽂件⽬录
代码实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet"href="css/xiaomi.css"/>
<script type="text/javascript"src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.animate-colors-min.js"></script>
</head>
<body>
<div class="head_box">
<div id="head_wrap">
<div id="head_nav">
<a class="head_nav_a">⼤⽶⽹</a>
<span>|</span>html网页设计期末大作业
<a class="head_nav_a">MIUI</a>
<span>|</span>
<a class="head_nav_a">⽶聊</a>
<span>|</span>
<a class="head_nav_a">游戏</a>
<span>|</span>
<a class="head_nav_a">多看阅读</a>
<span>|</span>
<a class="head_nav_a">云服务</a>
<span>|</span>
<a class="head_nav_a">⼤⽶移动版</a>
<span>|</span>
<a class="head_nav_a">问题反馈</a>
<span>|</span>
<a class="head_nav_a"id="Select_Region_but">Select Region</a>
</div>
<div id="head_right">
<div id="head_landing">
<a class="head_nav_a">登陆</a>
<span>|</span>
<a class="head_nav_a">注册</a>
</div>
<div id="head_car">
<a class="head_car_text">购物车(0)</a>
<div id="car_content">
<a class="car_text"></a>
</div>
</div>
</div>
</div>
</div>
<div id="foot_box">
<div id="foot_wrap">
<div class="foot_top">
<ul>
<li>1⼩时快修服务</li>
<li class="font_top_i">|</li>
<li>7天⽆理由退货</li>
<li>7天⽆理由退货</li>
<li class="font_top_i">|</li>
<li>15天免费换货</li>
<li class="font_top_i">|</li>
<li>满150元包邮</li>
<li class="font_top_i">|</li>
<li>520余家售后⽹点</li>
</ul>
</div>
<div class="foot_bottom">
<div class="foot_bottom_l">
<dl>
<dt>帮助中⼼</dt>
<dd>购物指南</dd>
<dd>⽀付⽅式</dd>
<dd>配送⽅式</dd>
</dl>
<dl>
<dt>服务⽀持</dt>
<dd>售后政策</dd>
<dd>⾃助服务</dd>
<dd>相关下载</dd>
</dl>
<dl>
<dt>⼤⽶之家</dt>
<dd>⼤⽶之家</dd>
<dd>服务⽹点</dd>
<dd>预约亲临到店服务</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>⼤⽶部落</dd>
<dd>官⽅</dd>
</dl>
</div>
<div class="foot_bottom_r">
<a>400-100-5678</a>
<a>周⼀⾄周⽇ 8:00-18:00</a>
<a>(仅收市话费)</a>
<span> 24⼩时</span>
</div>
</div>
</div>
<div class="foot_note_box">
<div class="foot_note_wrap">
<div class="foot_note_con">
<span class="foot_logo"><img src="img/mi-logo.png"width="38px"height="38px"></span>
<span class="foot_note_txt">
<a>⼤⽶⽹</a><h>|</h><a>MIUI</a><h>|</h><a>⽶聊</a><h>|</h><a>多看书城</a><h>|</h><a>⼤⽶路由器</a><h>|</h><a>⼤⽶后院</a><h>|</h><a >⼤⽶天猫店</a><h>|</h><a>⼤⽶淘宝直营店</a><h>|</h><a>⼤⽶⽹盟</a><h>|</h><a>问题反馈</a><h>|</h><a>Select Region</a>
<a> 5555555号</a>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript"src="js/xiaomi.js"></script>
</body>
</html>
做好的⽹页效果,如何通过发链接给别⼈看?
1.1解决部署上线~> 部署上线⼯具(永久免费使⽤)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这⾥给⼤家推荐⼀个程序员必备神器~
插件集成了超级多好⽤的插件,免费下载安装,简单易懂, 简直神器 ~ 需要可在⽂章 ↓ 下⽅公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别⼈, 就可以让对⽅通过你的连接点击进去, 就能看到你的⽹页效果啦, 电脑端和⼿机端都可以噢! (不然别⼈看你的⽹页都要发⽂件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页⾯部署上线后, 全世界的⼈都可以通过链接访问到你的⽹页了(永久免费使⽤哦)~
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论