🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻

💂 作者主页: 【进入主页—🚀获取更多源码】

🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】

🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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.视频演示

R41JP 当当书网 5页 无js

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<!-- 顶部 --><div id="top"><div class="top_setmid"><div class="setmid"><div class="top_left"><a href="###">送至:北京 <span class="iconfont icon-down"></span></a><div class="place"><span class="beijing"><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a></span><br><span class="beijing"><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a></span><br><span class="beijing"><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a></span><br><span class="beijing"><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a><a href="###">北京</a></span></div></div><ul class="top_ul"><li><a href="###" class="vip">成为会员</a></li><li><a href="###" class="vip">我的云书房</a></li><li class="top_ul_vip"><a href="###" class="vip">我的当当<span class="iconfont icon-down"></span></a><ul class="top_li_ul"><li class="top_li_li"><a href="###">我的订单</a></li><li class="top_li_li"><a href="###">购物车</a></li><li class="top_li_li"><a href="###">银铃铛抵现</a></li><li class="top_li_li"><a href="###">我的收藏</a></li><li class="top_li_li"><a href="###">我的余额</a></li><li class="top_li_li"><a href="###">我的评论</a></li><li class="top_li_li"><a href="###">礼券/礼品卡</a></li></ul></li><li class="top_ul_vip"><a href="###" class="vip">当当拼团<span class="iconfont icon-down"></span></a><ul class="top_li_ul"><li class="top_li_li"><a href="###">当当拼团</a></li></ul></li><li><a href="###" class="vip">小说投稿</a></li><li><a href="###" class="vip">我要出书</a></li><li class="top_ul_vip"><a href="###" class="vip">企业采购<span class="iconfont icon-down"></span></a><ul class="top_li_ul"><li class="top_li_li"><a href="###">大宗采购</a></li><li class="top_li_li"><a href="###">礼品卡采购</a></li><li class="top_li_li"><a href="###">礼品卡激活</a></li><li class="top_li_li"><a href="###">礼品卡使用</a></li><li class="top_li_li"><a href="###">分销/荐购</a></li><li class="top_li_li"><a href="###">礼品卡专区</a></li></ul></li><li class="top_ul_vip"><a href="###" class="vip">客户服务<span class="iconfont icon-down"></span></a><ul class="top_li_ul"><li class="top_li_li"><a href="###">帮助中心</a></li><li class="top_li_li"><a href="###">自助退换货</a></li><li class="top_li_li"><a href="###">自助发票</a></li><li class="top_li_li"><a href="###">联系客服</a></li><li class="top_li_li"><a href="###">我要投诉</a></li></ul></li></ul><div class="top_right">欢迎光临当当,请<a href="login.html" style="color: #ff2832!important;">登录 </a></div></div></div><div class="top_mid"><div class="topmid"><div class="logo"><img src="picture/DDlogo.gif" alt=""></div><div class="search"><input type="text" id="search_txt" placeholder="大象的旅程"><div class="search_down">全部分类 <span class="iconfont icon-down"></span><div class="searchselect"><select size="12" multiple="multiple"><option value="1"><a href="###">全部分类</a></option><option value="1"><a href="###">尾品会</a></option><option value="1"><a href="###">图书</a></option><option value="1"><a href="###">电子书</a></option><option value="1"><a href="###">音像</a></option><option value="1"><a href="###">影视</a></option><option value="1"><a href="###">时尚美妆</a></option><option value="1"><a href="###">母婴用品</a></option><option value="1"><a href="###">玩具</a></option><option value="1"><a href="###">孕婴服饰</a></option><option value="1"><a href="###">童装童鞋</a></option><option value="1"><a href="###">家居日用</a></option><option value="1"><a href="###">全部分类</a></option><option value="1"><a href="###">尾品会</a></option><option value="1"><a href="###">图书</a></option><option value="1"><a href="###">电子书</a></option><option value="1"><a href="###">音像</a></option><option value="1"><a href="###">影视</a></option><option value="1"><a href="###">时尚美妆</a></option><option value="1"><a href="###">母婴用品</a></option><option value="1"><a href="###">玩具</a></option><option value="1"><a href="###">孕婴服饰</a></option><option value="1"><a href="###">童装童鞋</a></option><option value="1"><a href="###">家居日用</a></option><option value="1"><a href="###">家用电器</a></option></select></div></div>

🏠CSS样式代码

.footbottom-top{color: #8c8c8c;font-size: 12px;text-decoration: none;}.sep{margin: 0 17px 0 19px;color: #8c8c8c;}.hotsearch{display: inline-block;width: 50px;position: relative;}.inhotsearch{position: absolute;left: -251px;top: 22px;background-color: #f48570;width: 300px;border-radius: 8px;text-align: center;height: 14px;line-height: 14px;display: none;}.inhotsearch a{padding: 0 2px;color: #fff;text-decoration: none;}i{display: block;width: 0;height: 0;line-height: 0;font-size: 0;border-width: 0 4px 4px;border-style: solid;border-color: #fff #fff #f48570 #fff;position: absolute;right: 20px;top: -4px;}.footbottom-top a:hover{color: #ff2832;text-decoration: underline;}.inhotsearch a:hover{text-decoration: none;color: white;}.hotsearch:hover .inhotsearch{display: block;}.footbottom-bottom{line-height: 20px;text-align: center;width: 960px;margin: 0 auto;padding: 10px 0 0 0;color: #8c8c8c;}.bottomleft{display: inline-block;float: none;}.Chineseright:hover a{color: #ff2832;text-decoration: underline;}.bottomright{display: inline-block;float: none;}/* 固定广告 */.right1{position: fixed;top: 180px;right: 50px;z-index: 100;width: 100px;}.right2{position: fixed;top: 345px;right: 80px;z-index: 100;display: none;}.right3{position: fixed;top: 345px;right: 80px;z-index: 100;}.right4{position: fixed;top: 345px;right: 153px;z-index: 100;display: none;}.right5{position: fixed;top: 415px;right: 80px;z-index: 100;}.right6{position: fixed;top: 415px;right: 80px;z-index: 100;display: none;}.right7{background: #ececec;position: fixed;top: 485px;right: 80px;z-index: 100;width: 68px;height: 67px;}.right7 .icon-shangjiantou{font-weight: bolder;text-align: center;color: #7e7e7e;position: relative;}.icon-shangjiantou:before {content: "\e604";font-size: 48px;font-weight: bolder;color: #7e7e7e;position: relative;left: 10px;top:0px;}.right7 p{line-height: 22px;height: 22px;font-size: 12px;text-align: center;color: #7e7e7e;margin-top: -10px;}.right7:hover .icon-shangjiantou:before{color: white;}.right7:hover{background: #14b496;}.right7:hover p{color:white;}.pic1{display: inline-block;margin: 0 auto;width: 180px;height: 70px;line-height: 52px;background: url(../image/foot_top.png) -35px -15px no-repeat;margin-right: 70px;}.pic2{display: inline-block;margin: 0 auto;width: 180px;height: 70px;line-height: 52px;background: url(../image/foot_top.png) -320px -15px no-repeat;margin-right: 70px;}.pic3{display: inline-block;margin: 0 auto;width: 180px;height: 70px;line-height: 52px;background: url(../image/foot_top.png) -610px -15px no-repeat;margin-right: 60px;}.pic4{display: inline-block;margin: 0 auto;width: 180px;height: 70px;line-height: 52px;background: url(../image/foot_top.png) -910px -15px no-repeat;}.rightout{max-width: 1920px;}

五、🎁更多源码

1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻