🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
更多推荐
JavaScript网页设计作业 仿当当书网站 HTML+CSS 学生dreamweaver网页设计作业成品
发布评论