🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱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.视频演示
C137 小米官网首页 1页不含js 侧拉菜单
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小米商城 - 小米CC9、小米MIX 3、Redmi K20,小米电视官方网站</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<nav>
<div class="nav-middle">
<div>
<a href="#">小米商城</a>
<a href="#">MIUI</a>
<a href="">IoT</a>
<a href="#">云服务</a>
<a href="#">金融</a>
<a href="#">有品</a>
<a href="">小爱开放平台</a>
<a href="javascript:;">企业团购</a>
<a href="#">资质证照</a>
<a href="#">协议规则</a>
<a href="#">
下载app
<span class="hint">
<span class="triangle"></span>
<span class="download">
<img src="picture/01.png" alt="">
<p>小米商城APP</p>
</span>
</span>
</a>
<a href="#">Select Location</a>
</div>
<div>
<a href="javascript:;">登录</a>
<a href="#">注册</a>
<a href="#">消息通知</a>
<a href="#" class="special">
购物车(0)
<span class="shops">购物车中还没有商品,赶紧选购吧!</span>
</a>
</div>
<div>
</div></div></nav>
<div class="head">
<div class="head-middle">
<a href="#" class="mi-home" title="小米官网"></a>
<ul class="title">
<li>
<a>小米手机</a>
<div class="title-goods">
<ul>
<li>
<img src="picture/011.png" alt="">
<div class="titile-goods-price">
<span>小米CC9</span>
<p>1799元</p>
</div>
</li>
<li>
<img src="picture/02.png" alt="">
<div class="titile-goods-price">
<span>小米CC9e</span>
<p>1299元</p>
</div>
</li>
<li>
<img src="picture/03.png" alt="">
<div class="titile-goods-price">
<span>小米CC9 美图定制版</span>
<p>2599元</p>
</div>
</li>
<li>
<img src="picture/04.png" alt="">
<div class="titile-goods-price">
<span>小米9</span>
<p>2599元</p>
</div>
</li>
<li>
<img src="picture/05.png" alt="">
<div class="titile-goods-price">
<span>小米MIX 3</span>
<p>2599元</p>
</div>
</li>
<li>
<img src="picture/06.webp" alt="">
<div class="titile-goods-price">
<span>小米MIX 2S</span>
<p>1799元</p>
</div>
</li>
</ul>
</div>
</li>
<li class="copy"><a>Redmi 红米</a></li>
<li class="copy"><a>电视</a></li>
<li class="copy"><a>笔记本</a></li>
<li class="copy"><a>家电</a></li>
<li class="copy"><a>路由器</a></li>
<li class="copy"><a>智能硬件</a></li>
<li><a>服务</a></li>
<li><a>社区</a></li>
</ul>
<span class="text-placeholder">
<span>小米9</span>
<span>小米9 SE</span>
</span>
<div class="search"></div>
<div>
<img src="picture/80.jpg" alt="">
<a href="#">料理机</a>
</div>
<div>
<img src="picture/81.jpg" alt="">
<a href="#">电煮壶</a>
</div>
</li>
</ul>
</li>
<li>
<a href="#">出行 穿戴</a>
<span>></span>
<ul class="details">
<li>
<div>
<img src="picture/11.png" alt="">
<div class="bottom-right">
<ul>
<li><a href="#">小米商城 </a></li>
<li><a href="#">| 米家 </a></li>
<li><a href="#">| 米聊 </a></li>
<li><a href="#">| 多看 </a></li>
<li><a href="#">| 游戏 </a></li>
<li><a href="#">|路由器 </a></li>
<li><a href="#">| 米粉卡 </a></li>
<li><a href="#">| 政企服务 </a></li>
<li><a href="#">| 小米天猫店 </a></li>
<li><a href="#">| 隐私政策 </a></li>
<li><a href="#">| 商城用户协议 </a></li>
<li><a href="#">| 账号协议 </a></li>
<li><a href="#">| 问题反馈 </a></li>
<li><a href="#">| 廉正举报 </a></li>
<li><a href="#">| 诚信合规 </a></li>
<li><a href="#">| Select Location</a></li>
<li><a href="#">| MIUI </a></li>
</ul>
<p>©mi 京ICP证110507号 京ICP备10046444号 <a>京公网安备11010802020134号</a> 京网文[2017]1530-131号 </p>
<p>(京)网械平台备字(2018)第00005号 互联网药品信息服务资格证 (京) -非经营性-2014-0090 营业执照 医疗器械公告 </p>
<p>增值电信业务许可证 网络食品经营备案(京)【2018】WLSPJYBAHF-12 食品经营许可证 </p>
<p>违法和不良信息举报电话:185-0130-1238 知识产权侵权投诉 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
<img src="picture/21.png" alt="">
<img src="picture/31.png" alt="">
<img src="picture/41.png" alt="">
<img src="picture/52.png" alt="">
<img src="picture/61.png" alt="">
</div>
</div>
</div>
</footer>
<div class="assist-bar">
<ul>
<li>
<span class="iconfont icon-shouji"></span>
<div class="assistBar-message assPicture-box">
<img src="picture/01.png" alt="">
<p>手机扫一扫</p>
<p>一分赢好礼</p>
<div class="assist-triangle">
</div>
</div>
</li>
<li>
<span class="iconfont icon-rengongkefu">
<a></a>
</span>
<div class="assistBar-message">
<p>个人中心</p>
<div class="assist-triangle">
</div>
</div>
</li>
<li>
<span class="iconfont icon-weixiu">
<a></a>
</span>
<div class="assistBar-message">
<p>售后服务</p>
<div class="assist-triangle">
</div>
</div>
</li>
<li>
<span class="iconfont icon-ue600zaixiankefu">
<a></a>
</span>
<div class="assistBar-message">
<p>人工客服</p>
<div class="assist-triangle">
</div>
</div>
</li>
<li>
<span class="iconfont icon-gouwuche">
<a></a>
</span>
<div class="assistBar-message">
<p>购物车</p>
<div class="assist-triangle">
</div>
</div>
</li>
<li id="assist-returnTop">
<span class="iconfont icon-top">
<a></a>
</span>
<div class="assistBar-message">
<p>回顶部</p>
<div class="assist-triangle">
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
更多推荐
基于web在线购物商城网站的设计与实现(学生网页设计作业源码)
发布评论