??精彩专栏推荐 ??文末获取联系 ?? 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 ?? 作者爱游戏官网登录入口主页: 【爱游戏官网登录入口主页——??获取更多优质源码】 ?? web前端期末大作业： 【??毕设项目精品实战案例 (1000套) 】 ?? 程序员有趣的告白方式：【??html七夕情人节表白网页制作 (110套) 】 ??超炫酷的echarts大屏可视化源码：【?? echarts大屏展示大数据平台可视化(150套) 】 ?? html css js实例代码： 【???html css js实例代码 (炫酷特效网页代码) 继续更新中…】 ?? 免费且实用的web前端学习指南： 【??web前端零基础到高级学习视频教程 120g干货分享】 ?? 关于作者: ??历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获csdn年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 ??坚持原创，热衷分享，初心未改，继往开来！
??文章目录
一、?????网站题目二、??网站描述三、??网站介绍四、??网站演示五、?? 网站代码??html结构代码??css样式代码
六、?? 如何让学习不再盲目七、??更多干货
一、?????网站题目
?? 校园网页设计 、学校班级网页制作、学校爱游戏平台官网、小说书籍、等网站的设计与制作。
二、??网站描述
???html静态网页设计作业使用dreamweaver制作，采用div css布局，共有多个页面，爱游戏平台首页使用css排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度
?? 一套优质的??网页设计应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有5-10个页面组成。页面样式风格统一布局显示正常，不错乱，使用div css技术。菜单美观、醒目，二级菜单可正常弹出与跳转。要有js特效，如定时切换和手动切换图片轮播。页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。页面清爽、美观、大方，不雷同。 。不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、??网站介绍
??网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
??网站程序方面：计划采用最新的网页编程语言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代码）。
四、??网站演示
五、?? 网站代码
??html结构代码
??css样式代码
#footer{
border-top: 2px solid #ff2832;
margin-top: 15px;
background-color: #fff;
}
.foottop{
background-color: #fafafa;
border-bottom: 1px solid #ebebeb;
width: 100%;
}
.footin{
width: 940px;
margin: 0 auto;
height: 68px;
padding: 5px 0 5px 30px;
}
.footmid{
width: 920px;
height: 140px;
margin: 0 auto;
padding-top: 30px;
}
.footmiddiv{
width: 154px;
float: left;
text-align: center;
}
.footmidtitle{
display: block;
padding-left: 30px;
font-size: 14px;
font-family: "microsoft yahei";
color: #323232;
height: 36px;
line-height: 36px;
}
.footmiddivul{
padding-left: 30px;
list-style: none;
margin: 0;
}
.footmiddivli{
line-height: 20px;
height: 20px;
}
.footmiddivli:hover a{
color: #ff2832;
text-decoration: underline;
}
.footbottom{
color: #8c8c8c;
font-size: 12px;
text-decoration: none;
border-top: 1px solid #ebebeb;
width: 100%;
padding: 17px 0 50px;
}
.footbottom-top{
text-align: center;
line-height: 20px;
padding-bottom: 17px;
color: #8c8c8c;
font-size: 12px;
text-decoration: none;
}
.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;
}
.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: -35px -15px no-repeat;
margin-right: 70px;
}
.pic2{
display: inline-block;
margin: 0 auto;
width: 180px;
height: 70px;
line-height: 52px;
background: -320px -15px no-repeat;
margin-right: 70px;
}
.pic3{
display: inline-block;
margin: 0 auto;
width: 180px;
height: 70px;
line-height: 52px;
background: -610px -15px no-repeat;
margin-right: 60px;
}
.pic4{
display: inline-block;
margin: 0 auto;
width: 180px;
height: 70px;
line-height: 52px;
background: -910px -15px no-repeat;
}
.rightout{
max-width: 1920px;
}
六、?? 如何让学习不再盲目
第一、带着目标去学习，无论看书报课还是各种爱游戏平台的线下活动。 首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。
第二、学习要建立个人知识体系 知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识
第三、学到了就要用到
有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。
七、??更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “??点赞” “??评论” “??收藏” 一键三连哦！
2.??【????????????关注我| ??获取更多源码 | 优质文章】 带您学习各种前端插件、3d炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业html模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 node 知识，互相学习」！
3.
以上内容技术相关问题??欢迎一起交流学习??????????????
?源码：
- 欢迎光临当当，请
- |
- |
-
- |
-
- |
- |
- |
-
- |
-
- 热搜:
css：
.hd {
width: 100%;
}
.rightfixed{
position:fixed;
width:108px;
height:170px;
top:485px;
right:230px;
}
.bottomfixed{
position:fixed;
width:100%;
height:140px;
bottom:0px;
background-color:rgba(0,0,0,0.6);
z-index:10000;
}
.bottomfixed>.container>a:nth-child(1){
display:block;
float:left;
z-index:-1;
margin-left:15px;
cursor:default;
}
.bottomfixed>.container{
width:1236px;
}
.bottomfixed>.container>div{
width:36px;
height:36px;
border-radius:100%;
float:right;
margin-right:15px;
margin-left:-100px;
margin-top:10px;
background-image:;
background-size:36px 36px;
cursor:pointer;
}
.top {
width: 100%;
height: 34px;
color: #646464;
font-size: 12px;
background-color: #f9f9f9;
border-top: 1px solid #ccc;
border-bottom: 1px solid #f2f2f2;
}
.top a {
color: #646464;
}
.top-left {
width: 90px;
height: 25px;
float: left;
margin-top: 3px;
position: relative;
}
.top-left>a {
position: absolute;
line-height: 34px;
display: block;
width: 90px;
height: 26px;
text-align: center;
background-color: #f9f9f9;
z-index: 100;
}
.top-left-ul {
position: absolute;
width: 298px;
border: 1px solid #e6e6e6;
top: 25px;
left: -1px;
display: none;
background-color: #fff;
padding-top: 20px;
padding-bottom: 10px;
}
.top-left-ul>li {
width: 59px;
height: 26px;
float: left;
text-align: center;
}
.top-left-ul a:hover {
color: #ff2832;
}
.top-left:hover>a {
top: -1px;
left: -1px;
border: 1px #e6e6e6 solid;
border-bottom: 0;
background-color: #fff;
}
.top-left:hover .top-left-ul {
display: block;
z-index:99;
}
.top-right {
height: 100%;
float: right;
}
.top-right-ul {
height: 100%;
}
.top-right-ul>li {
position: relative;
height: 100%;
float: left;
line-height: 34px;
}
.top-right-ul>li:nth-child(odd) {
width: 82px;
text-align: center;
}
.top-right-ul>li:nth-child(even){
color:#dcdcdc;
}
.top-right-ul>li:nth-child(1) {
width: 180px;
}
.top-right-ul>li>.top-right-ul-a {
position: absolute;
display: block;
left: -3px;
width: 87px;
height: 32px;
z-index: 100;
text-align: center;
border: 1px rgba(0,0,0,0) solid;
margin-top: 2px;
line-height: 30px;
}
.top-right-ul>li:nth-child(1)>a {
display: inline;
}
.top-right-ul>li:nth-child(1)>a:nth-child(1) {
color: #ff2832;
}
.top-right-ul>li:hover>a {
color: #ff2832;
}
.top-right-ul>li:hover>.top-right-ul-a {
background-color: #fff;
border: 1px #e6e6e6 solid;
border-bottom: 0;
}
.top-right-ul>li:hover .top-right-ul-ul {
display: block;
z-index:101;
}
.top-right-ul-ul {
position: absolute;
border: 1px #e6e6e6 solid;
border-top: 0;
top: 30px;
left: -3px;
display: none;
background-color: #fff;
z-index:-1;
}
.top-right-ul-ul>li {
width: 87px;
height: 25px;
line-height: 25px;
text-align: center;
}
.top-right-ul-ul>li:hover {
background-color: #f2f2f2;
}
.logo{
width:100%;
height:100px;
}
.logo-img{
width:342px;
height:100%;
float:left;
}
.logo-search{
width:585px;
height:100%;
float:left;
}
.logo-search-top{
width:560px;
height:36px;
border:2px solid #ff2832;
margin-top:20px;
}
.logo-search-top input:nth-child(1){
width:400px;
height:35px;
border:0;
background-color:rgba(0,0,0,0);
padding-left:10px;
float:left;
}
.logo-search-top span:nth-child(2){
position:relative;
width:102px;
height:36px;
float:left;
outline:none;
border:0;
font-weight:bold;
background-color:#f6f6f6;
z-index:100;
}
.logo-search-top span:nth-child(2)>a{
display:block;
width:102px;
height:36px;
color:#969696;
line-height:36px;
text-align:center;
}
.logo-search-top span:nth-child(2):hover>ul{
height:288px;
display:block;
}
.logo-search-top-ul{
position:absolute;
width:100px;
height:0;
overflow:scroll;
border:1px #e6e6e6 solid;
background-color:#fff;
top:35px;
display:none;
}
.logo-search-top-ul>li{
width:82px;
height:25px;
text-align:center;
line-height:25px;
}
.logo-search-top-ul>li:hover{
background-color:#c8c8c8;
}
.logo-search-top-ul>li:hover>a{
color:#fff;
}
.logo-search-top-ul>li>a{
color: #646464;
font-size:12px;
}
.logo-search-top div{
width:46px;
height:36px;
background-color:#ff2832;
float:right;
color:#fff;
}
.logo-search-top div>img{
margin-left:10px;
margin-top:5px;
}
.logo-search-bottom{
width:100%;
height:20px;
margin-top:10px;
}
.logo-search-bottom>ul{
width:100%;
height:100%;
font-size:12px;
}
.logo-search-bottom>ul>li{
float:left;
color:#969696;
margin-right:15px;
}
.logo-search-bottom>ul>li:nth-last-child(1){
float:right;
margin-right:20px;
}
.logo-search-bottom>ul>li>a{
color:#969696;
font-size:12px;
}
.logo-search-bottom>ul>li>a:hover{
color:#ff2832;
}
.logo-shopcar{
width:200px;
height:36px;
float:right;
margin-top:20px;
}
.logo-shopcar>a:nth-child(1){
border:2px #ff2832 solid;
border-right:0;
display:block;
width:108px;
height:32px;
float:left;
background-color:#ff2832;
color:#fff;
font-size:13px;
text-align:center;
line-height:36px;
font-family:arial;
}
.logo-shopcar>a:nth-child(1)>img{
float:left;
margin-top:4px;
margin-left:10px;
}
.logo-shopcar>a:nth-child(1)>p{
float:left;
margin-top:0px;
margin-left:10px;
}
.logo-shopcar>a:nth-child(2){
display:block;
width:86px;
height:32px;
float:left;
border:2px #dcdcdc solid;
font-family:arial;
font-size:13px;
text-align:center;
line-height:32px;
color:#000;
background-color:#f6f6f6;
}
.logo-shopcar>a:nth-child(1):hover{
border:2px #dcdcdc solid;
color:#ff2832;
background-color:#fff;
border-right:0;
background-color:#f6f6f6;
}
.menu-one{
height:40px;
width:100%;
border-bottom:4px #ff2832 solid;
}
.menu-one-left{
position:relative;
width:200px;
height:100%;
background-color:#ff2832;
float:left;
}
.menu-one-left-ul-span{
position:absolute;
width:996px;
height:520px;
background-color:#fff;
position:absolute;
top:0;
left:200px;
border:2px #ff2832 solid;
border-top:0;
display:none;
}
.menu-one-left-ul>li:hover>span{
display:block;
}
.menu-one-left>a{
display:block;
width:100%;
height:100%;
color:#fff;
text-align:center;
line-height:40px;
font-weight:bold;
font-family:arial;
font-size:12px;
}
.menu-one-left>a>div:nth-child(1){
float:left;
margin-left:20px;
}
.menu-one-left>a>div:nth-child(2){
float:left;
margin-left:20px;
float:right;
margin-top:12px;
margin-right:30px;
}
.line{
width:8px;
height:8px;
border-bottom:2px solid #fff;
border-right:2px solid #fff;
transform:rotate(45deg);
}
.menu-one-left-ul{
position:absolute;
display:none;
top:40px;
width:100%;
background-color: #f9f9f9;
border-top:4px #ff2832 solid;
z-index:1000;
}
.menu-one-left-ul>li{
height:32px;
background-color:#f6f6f6;
}
.menu-one-left-ul>li>a{
position:absolute;
z-index:100;
width:178px;
height:28px;
display:block;
padding-left:20px;
line-height:32px;
color:#000;
font-family:arial;
font-size:13px;
border:2px #f9f9f9 solid;
border-right:0;
}
.menu-one-right{
float:left;
height:40px;
}
.menu-one-right-ul{
height:100%;
}
.menu-one-right-ul>li{
width:72px;
height:100%;
float:left;
}
.menu-one-right-ul>li:nth-child(1){
margin-left:30px;
}
.menu-one-right-ul>li>a{
width:72px;
height:100%;
color:#000;
font-weight:bold;
display:block;
text-align:center;
line-height:40px;
font-size:14px;
font-family:arial;
}
.menu-one-right-ul>li>a:hover{
color:#ff2832;
}
.menu-two{
width:100%;
height:31px;
background-color:#f5f5f5;
}
.menu-two-ul>li{
height:31px;
float:left;
margin-left:12px;
line-height:31px;
}
.menu-two-ul a:hover{
color:#ff2832;
text-decoration:underline;
}
.menu-two-ul>li>a{
font-size:12px;
color: #646464;
}
.menu-two-ul>li:nth-child(even){
color:#dcdcdc;
}
/**内容**/
.nav{
width:100%;
}
.nav-banana-one{
width:100%;
height:80px;
}
.nav-banana-one img{
margin-top:15px;
}
.nav-lunbo{
width:100%;
height:916px;
margin-top:10px;
}
.nav-lunbo-left{
width:190px;
height:916px;
float:left;
border-radius:5px 5px 0 0;
border:1px #487a6f solid;
}
.nav-lunbo-left>div:nth-child(1){
width:100%;
height:35px;
border-radius:4px 4px 0 0;
background-color:#487a6f;
color:#fff;
line-height:35px;
text-align:center;
font-weight:bold;
}
.nav-lunbo-left>hr{
border:1px #487a6f dashed;
margin-top:0px;
margin-bottom:0px;
}
.margin{
margin:0 auto;
}
.nav-lunbo-left-two{
position:relative;
background-color:#fff;
color:#487a6f;
line-height:32px;
font-weight:bold;
border-top:1px #487a6f dotted;
}
.nav-lunbo-left-samll{
width:190px;
}
.nav-lunbo-left-big{
width:190px;
clear:both;
}
.nav-lunbo-left-samll>a{
width:180px;
height:100%;
display:block;
border-top:1px rgba(0,0,0,0) solid;
border-bottom:1px rgba(0,0,0,0) solid;
border-right:1px rgba(0,0,0,0) solid;
margin-top:-1px;
padding-left:10px;
color:#487a6f;
font-size:14px;
font-family:microsoft yahei;
}
.nav-lunbo-left-big>div{
width:180px;
display:block;
border-top:1px rgba(0,0,0,0) solid;
border-bottom:1px rgba(0,0,0,0) solid;
border-right:1px rgba(0,0,0,0) solid;
margin-top:-1px;
padding-left:10px;
color:#487a6f;
font-size:14px;
font-family:microsoft yahei;
clear:both;
}
.clearf:before, .clearf:after{
content:"";
display:block;
clear: both;
}
.clearf{
zoom:1;
}
.g{
clear:both;
padding-top:8px;
}
.nav-lunbo-left-samll:hover>a{
background-color:#fff;
border-top:1px #487a6f solid;
border-bottom:1px #487a6f solid;
border-right:1px #fff solid;
position:relative;
width:180px;
z-index:1001;
}
.nav-lunbo-left-two:hover>span{
display:block;
z-index:1000;
}
.nav-lunbo-left-two:hover div{
border-top:1px rgba(0,0,0,0) solid;
}
.nav-lunbo-left-big:hover>div{
border-top:1px #487a6f solid;
border-bottom:1px #487a6f solid;
border-right:1px #fff solid;
position:relative;
background-color:#fff;
z-index:1001;
}
.nav-lunbo-left-big>div>div:nth-child(2){
margin-top: -10px;
clear:both;
}
.clearfix:after{
content:"|";
display:block;
color:#929292;
visibility:hidden;
}
.nav-lunbo-left-big>div>div:nth-child(2)>a{
color:#487a6f;
font-size:12px;
color:#929292;
display:block;
float:left;
padding-right:5px;
font-family:arial;
line-height:23px;
}
.nav-lunbo-left-big>div>div:nth-child(2)>a:hover{
color:rgb(236,120,20);
text-decoration: underline;
}
.nav-lunbo-left-two-span{
position:absolute;
left:190px;
top:-1px;
width:590px;
height:500px;
border:1px #487a6f solid;
display:none;
background-color:#fff;
box-shadow:-1px 1px 8px #bbb;
}
.nav-lunbo-zhong{
float:left;
margin-left:9px;
width:750px;
height:916px;
}
.nav-lunbo-zhong-top{
width:100%;
height:315px;
position:relative;
}
.nav-lunbo-zhong-ula>li{
position:absolute;
top:0;
left:0;
}
.nav-lunbo-zhong-ulb{
position:absolute;
bottom:10px;
right:0;
z-index:100;
}
.nav-lunbo-zhong-ulb>li{
width:21px;
height:21px;
background-color:#fff;
float:left;
border-radius:100%;
margin-right:10px;
}
.nav-lunbo-zhong-ulb>li>a{
width:100%;
height:100%;
line-height:22px;
display:block;
text-align:center;
font-family:arial;
border-radius:100%;
color:#000;
}
.nav-lunbo-zhong-ulb>li:hover>a{
background-color:#ff2832;
color:#fff;
}
.nav-lunbo-zhong-bottom{
width:100%;
height:601px;
overflow:hidden;
}
.nav-lunbo-zhong-bottom-img{
width:750px;
height:43px;
background-image:;
background-size:750px 43px;
margin-top:11px;
}
.nav-lunbo-zhong-bottom-lunbo{
position:relative;
margin-top:25px;
width:100%;
height:523px;
}
.nav-lunbo-zhong-long{
position:absolute;
width:8888px;
height:535px;
}
.nav-lunbo-zhong-bottom-lunbo-ul{
width:800px;
height:535px;
top:0;
left:0;
float:left;
}
.nav-lunbo-zhong-bottom-lunbo-ul>li{
width:150px;
height:250px;
background-color:#fff;
float:left;
margin-right:50px;
margin-bottom:16px;
}
.bookimg{
width:150px;
height:150px;
display:block;
}
.bookname{
display:block;
width:130px;
height:15px;
padding-left:20px;
color:#000;
font-size:12px;
font-family:arial;
margin-top:5px;
}
.bookname:hover{
color:rgb(230,120,20);
text-decoration:underline;
}
.bookren{
display:block;
width:130px;
height:15px;
padding-left:20px;
color: #bbbbbb;
font-size:12px;
font-family:arial;
margin-top:5px;
}
.bookqian{
display:block;
width:130px;
height:15px;
padding-left:20px;
font-size:14px;
font-family:arial;
margin-top:5px;
}
.bookqian>span:nth-child(1){
float:left;
color:rgb(204,51,0);
font-weight:bold;
font-family:arial;
}
.bookqian>span:nth-child(2){
float:right;
color: #bbbbbb;
margin-right:30px;
font-family:arial;
}
.bookimga{
display:block;
float:left;
}
.booknamea{
display:block;
color:#000;
font-size:12px;
font-family:arial;
margin-top:5px;
}
.booknamea:hover{
color:rgb(230,120,20);
text-decoration:underline;
}
.bookrena{
display:block;
color: #bbbbbb;
font-size:12px;
font-family:arial;
margin-top:5px;
}
.bookqiana{
display:block;
font-size:14px;
font-family:arial;
margin-top:5px;
}
.bookqiana>span:nth-child(1){
display:block;
color:rgb(204,51,0);
font-weight:bold;
font-family:arial;
margin-bottom:3px;
}
.bookqiana>span:nth-child(2){
display:block;
color: #bbbbbb;
margin-right:30px;
font-family:arial;
margin-bottom:3px;
}
.button-left{
position:absolute;
top:41%;
left:0;
width:25px;
height:50px;
background-color:#c8c8c8;
text-align:center;
line-height:50px;
color:#fff;
font-weight:bold;
font-size:22px;
cursor:pointer;
}
.button-right{
position:absolute;
top:41%;
right:0;
width:25px;
height:50px;
background-color:#c8c8c8;
text-align:center;
line-height:50px;
color:#fff;
font-weight:bold;
font-size:22px;
cursor:pointer;
}
.button-ul{
position:absolute;
top:95%;
left:45%;
}
.button-ul>li{
width:10px;
height:10px;
border-radius:100%;
background-color:#c8c8c8;
float:left;
margin-right:10px;
cursor:pointer;
}
.button-ul>li:hover{
background-color:#487a6f;
}
.nav-lunbo-right{
width:240px;
height:916px;
float:left;
margin-left:9px;
}
.nav-lunbo-right-top{
width:100%;
height:108px;
border:1px #eaeaea solid;
}
.nav-lunbo-right-top>div:nth-child(1)>h2{
font-size:16px;
margin:5px 10px;
font-family:arial;
}
.nav-lunbo-right-top>ul:nth-child(2){
margin-left:10px;
}
.nav-lunbo-right-top>ul:nth-child(2)>li{
margin-bottom:5px;
}
.nav-lunbo-right-top>ul:nth-child(2)>li:hover>a{
color:rgb(236,120,20);
text-decoration:underline;
}
.nav-lunbo-right-top>ul:nth-child(2) a{
font-family:arial;
font-size:12px;
color:#000;
}
.nav-lunbo-right-zhong{
width:100%;
height:193px;
border:1px #eaeaea solid;
margin-top:10px;
}
.nav-lunbo-right-zhong h2{
margin:0;
font-family:arial;
font-size:16px;
}
.nav-lunbo-right-zhong>div:nth-child(1){
margin-top:5px;
width:100%;
height:25px;
}
.nav-lunbo-right-zhong>div:nth-child(1)>span:nth-child(1){
float:left;
margin-left:10px;
}
.nav-lunbo-right-zhong>div:nth-child(1)>span:nth-child(2){
float:right;
margin-right:10px;
margin-top:2px;
}
.nav-lunbo-right-zhong>div:nth-child(1)>span:nth-child(2)>a{
font-size:12px;
color:rgb(80,151,188);
font-family:arial;
font-weight:bold;
}
.nav-lunbo-right-zhong>div:nth-child(1)>span:nth-child(2)>a:hover{
text-decoration:underline;
}
.nav-lunbo-right-lunbo{
position:relative;
width:240px;
height:155px;
overflow:hidden;
}
.nav-lunbo-right-lunbo-ul{
width:8888px;
position:absolute;
height:100%;
top:10px;
}
.nav-lunbo-right-lunbo-ul>li{
width:240px;
float:left;
}
.nav-lunbo-right-lunbo-ul>li>span{
float:left;
display:block;
margin-left:10px;
margin-top: 15px;
width:90px;
height:120px;
}
.nav-lunbo-right-bottom{
width:100%;
height:592px;
margin-top:10px;
margin-left:1px;
}
.nav-lunbo-right-bottom>div:nth-child(1){
width:100%;
height:40px;
background-image:;
background-position:5px 0;
background-repeat:no-repeat;
}
.nav-lunbo-right-bottom>div:nth-child(1)>a{
text-align:center;
line-height:38px;
color:rgb(215,40,50);
font-family:arial;
font-weight:bold;
padding-left:35px;
}
.nav-lunbo-right-bottom-ul{
border:1px #eaeaea solid;
width:100%;
height:552px;
}
.nav-lunbo-right-bottom-ul>li{
border:1px #eaeaea solid;
border-left:0;
border-top:0;
float:left;
font-size:12px;
width:47px;
height:25px;
color:#000;
}
.nav-lunbo-right-bottom-ul>li>span{
display:block;
text-align:center;
line-height:25px;
margin-top:-1px;
border-top:2px #487a6f00 solid;
font-family:arial;
cursor:pointer;
}
.nav-lunbo-right-bottom-ul>li:nth-child(1)>span{
border-top:2px #487a6f solid;
font-weight:bold;
height:27px;
background-color:#fff;
color:#487a6f;
}
.nav-lunbo-right-bottom-ul>li:hover>span{
border-top:2px #487a6f solid;
font-weight:bold;
height:27px;
background-color:#fff;
color:#487a6f;
}
.nav-lunbo-right-bottom-ul>li:nth-last-child(1){
border-right:0;
width:48px;
}
.nav-lunbo-right-bottom-ul-ul{
width:240px;
height:527px;
margin-top:35px;
}
.nav-lunbo-right-bottom-ul-ul>li{
position:relative;
width:220px;
height:35px;
border-bottom:1px #eaeaea dotted;
margin-left:10px;
}
.nav-lunbo-right-bottom-ul-ul>li:nth-child(1){
height:150px;
}
.xuhao{
position:absolute;
font-family:arial;
top:10px;
left:10px;
}
.nav-lunbo-right-bottom-ul-ul>li:nth-child(-n 3) .xuhao{
color:red;
}
.qianggo{
position:absolute;
left:80px;
top:10px;
}
.miaoshu{
display:block;
height:35px;
font-family:arial;
font-size:12px;
line-height:35px;
padding-left:37px;
}
.nav-dujia{
width:100%;
height:603px;
padding-top:15px;
}
.nav-dujia-left{
width:950px;
height:582px;
float:left;
}
.nav-dujia-right{
width:240px;
height:535px;
float:right;
}
.background-top{
position:relative;
width:950px;
height:50px;
background-image:;
background-repeat:no-repeat;
border-bottom:1px #487a6f solid;
}
.nav-dujia-top-ul{
position:absolute;
width:800px;
height:35px;
bottom:-1px;
right:18px;
}
.nav-dujia-top-ul>li{
float:left;
width:68px;
height:32px;
line-height:35px;
border:2px #fff solid;
border-bottom:0;
border-radius:5px 5px 0 0;
background-color:#fff;
}
.nav-dujia-top-ul>li>span{
display:block;
width:68px;
height:32px;
font-size:14px;
color:#666;
font-family:arial;
font-weight:bold;
text-align:center;
cursor:pointer;
}
.nav-dujia-top-ul>li:hover{
border:2px #487a6f solid;
border-bottom:0;
height:33px;
}
.nav-dujia-top-ul>li:nth-child(1){
border:2px #487a6f solid;
border-bottom:0;
height:33px;
}
.nav-dujia-bottom{
width:1000px;
height:513px;
padding-top:20px;
}
.nav-dujia-bottom>li{
float:left;
width:150px;
height:270px;
margin-right:47px;
}
.bookrenb{
display:block;
width:100px;
height:20px;
padding-left:44px;
color:#487a6f;
font-size:12px;
font-family:arial;
background-image:;
background-repeat:no-repeat;
background-position:20px -90px;
margin-top:5px;
}
.bookxing{
display:block;
width:70px;
height:14px;
margin-left:20px;
color:#487a6f;
font-size:12px;
font-family:arial;
background-image:;
background-position:0px 0px;
margin-top:5px;
}
.nav-banana-two{
width:100%;
height:200px;
padding-top:30px;
padding-bottom:10px;
}
.nav-banana-two>.container{
border-top:1px #eaeaea solid;
border-bottom:1px #eaeaea solid;
}
.nav-banana-two ul{
width:1227px;
height:140px;
margin-top:30px;
}
.nav-banana-two ul>li{
float:left;
margin-right:27px;
}
.nav-zuozhe{
width:100%;
height:510px;
}
.nav-zuozhe-left{
width:950px;
height:510px;
border:1px #eaeaea solid;
float:left;
}
.nav-zuozhe-right{
width:240px;
height:510px;
float:right;
}
.nav-zuozhe-left-ul{
width:100%;
height:39px;
border-bottom:1px #eaeaea solid;
}
.nav-zuozhe-left-ul>li{
float:left;
width:122px;
height:37px;
}
.nav-zuozhe-left-ul>li>span{
display:block;
width:122px;
height:38px;
line-height:37px;
text-align:center;
cursor:pointer;
font-family:microsoft yahei;
border:1px rgba(0,0,0,0) solid;
border-top:2px rgba(0,0,0,0) solid;
margin:-2px 0 0 -1px;
}
.nav-zuozhe-left-ul>li:hover>span{
border:1px #eaeaea solid;
border-bottom:0;
border-top:2px #487a6f solid;
height:40px;
background-color:#ffffff;
}
.nav-zuozhe-left-ul>li:nth-child(1)>span{
border:1px #eaeaea solid;
border-bottom:0;
border-top:2px #487a6f solid;
height:40px;
background-color:#ffffff;
}
.nav-zuozhe-left-bottom{
position:relative;
width:938px;
height:471px;
padding-left:10px;
overflow:hidden;
}
.nav-zuozhe-left-bottom-div{
width:750px;
height:196px;
}
.nav-zuozhe-left-bottom-div>span:nth-child(1){
display:block;
float:left;
width:33px;
height:46px;
color:rgb(255,79,75);
font-family:microsoft yahei;
}
.nav-zuozhe-left-bottom-div>span:nth-child(1)>span{
font-size:30px;
font-family:microsoft yahei;
font-weight:bold;
color:rgb(255,79,75);
}
.nav-zuozhe-left-bottom-div>a:nth-child(2){
display:block;
float:left;
width:143px;
height:143px;
margin:20px 0 0 10px;
}
.nav-zuozhe-left-bottom-div>p:nth-child(3){
display:block;
font-family:arial;
float:left;
cursor:pointer;
font-size:18px;
font-weight:bold;
margin:40px 0 0 20px;
}
.nav-zuozhe-left-bottom-div>p:nth-child(3):hover{
color:rgb(236,120,20);
text-decoration:underline;
}
.nav-zuozhe-left-bottom-div>p:nth-child(4){
display:block;
font-size:12px;
font-family:arial;
margin:5px 0 0 20px;
float:left;
width:544px;
color:rgb(102,102,102);
line-height:25px;
}
.nav-zuozhe-left-bottom-ula{
position:absolute;
width:140px;
height:450px;
float:right;
background-color:rgb(248,248,248);
border:1px rgb(225,225,225) solid;
top:10px;
right:10px;
}
.nav-zuozhe-left-bottom-ula>li{
width:130px;
height:44px;
border-bottom:1px rgb(225,225,225) solid;
margin-left:5px;
}
.nav-zuozhe-left-bottom-ula>li:nth-last-child(1){
border:0;
}
.nav-zuozhe-left-bottom-ula>li>span{
display:block;
padding:15px 0 0 10px;
color:rgb(72,122,111);
font-family:arial;
font-size:14px;
float:left;
}
.nav-zuozhe-left-bottom-ula>li>a{
display:block;
float:left;
margin:13px 0 0 15px;
font-size:14px;
font-family:arial;
color:rgb(64,64,64);
}
.nav-zuozhe-left-bottom-ula>li:nth-last-child(1)>a{
margin-left:8px;
}
.nav-zuozhe-left-bottom-ula>li:hover>span{
color:rgb(255,79,75);
}
.nav-zuozhe-left-bottom-ula>li:hover>a{
color:rgb(255,79,75);
}
.nav-zuozhe-left-bottom-line{
width:750px;
height:24px;
margin-top:-10px;
}
.nav-zuozhe-left-bottom-line>span:nth-child(1){
display:block;
width:66px;
height:24px;
background-color:rgb(248,248,248);
font-size:14px;
font-family:arial;
line-height:24px;
text-align:center;
border-radius:5px;
float:left;
}
.nav-zuozhe-left-bottom-line>span:nth-child(2){
display:block;
width:660px;
border-top:1px #eaeaea dotted;
margin:12px 0 0 20px;
float:left;
}
.nav-zuozhe-right>ul{
width:240px;
height:510px;
}
.nav-zuozhe-right>ul>li{
width:100%;
height:120px;
margin-bottom:10px;
}
.nav-lunbo-right-bottom-ul-ul>li:nth-last-child(1){
border:0;
}
.nav-like{
width:100%;
height:550px;
}
.nav-like-top{
width:1050px;
padding-left:150px;
padding-top:1px;
}
.nav-like-top>span{
display:block;
width:50px;
height:25px;
padding-left:25px;
background-image:;
background-repeat:no-repeat;
background-position:0 -52px;
margin-top:13px;
color:rgb(34, 139, 193);
font-size:14px;
cursor:pointer;
font-family:arial;
}
.nav-like-top>span:hover{
text-decoration:underline;
}
.nav-like-bottom{
width:100%;
height:470px;
}
.nav-like-bottom-left{
width:960px;
height:470px;
overflow:hidden;
float:left;
}
.nav-like-bottom-right{
width:240px;
height:470px;
float:right;
background-color:rgb(247, 247, 247);
}
.nav-like-bottom-right>h1{
font-size:16px;
color:#487a6f;
font-family:microsoft yahei;
padding:10px 0 0 20px;
}
.nav-like-bottom-right>ul{
width:191px;
height:150px;
padding-left:20px;
}
.nav-like-bottom-right>ul>li{
width:95px;
height:30px;
float:left;
}
.nav-like-bottom-right>ul>li>a{
font-size:12px;
font-family:arial;
color:#000;
}
.nav-like-bottom-right>ul>li>a:hover{
color:rgb(236,120,20);
text-decoration:underline;
}
.nav-duzhe{
width:100%;
height:590px;
}
.nav-duzhe-left{
width:950px;
height:100%;
float:left;
}
.nav-like-bottom-left>ul>li{
margin-bottom:-40px;
}
.nav-duzhe-left>.nav-dujia-top>ul>li{
float:right;
width:100px;
}
.nav-duzhe-left>.nav-dujia-top>ul>li>span{
width:100px;
}
.nav-duzhe-left-bottom{
width:100%;
height:550px;
}
.nav-duzhe-left-bottom-top{
width:100%;
height:200px;
padding:10px 0 10px 0;
}
.nav-duzhe-left-bottom-top>a:nth-child(1){
display:block;
width:200px;
height:200px;
float:left;
}
.nav-duzhe-left-bottom-top>span:nth-child(2){
display:block;
width:730px;
float:right;
}
.nav-duzhe-left-bottom-top>span:nth-child(2)>a:nth-child(1){
width:100%;
height:28px;
display:block;
font-family:arial;
font-size:14px;
color:#000;
font-weight:bold;
padding-top:10px;
margin:0;
}
.nav-duzhe-left-bottom-top>span:nth-child(2)>a:nth-child(1):hover{
color:rgb(236,120,20);
text-decoration:underline;
}
.nav-duzhe-left-bottom-top>span:nth-child(2)>span:nth-child(2){
margin:0;
}
.nav-duzhe-left-bottom-top>span:nth-child(2)>p{
display:block;
width:730px;
margin-top:5px;
font-size:12px;
line-height:25px;
color:rgb(102, 102, 102);
font-family:arial;
}
.nav-duzhe-left-bottom-zhong{
width:940px;
border-top:1px #cccccc dotted;
margin:10px 0 0 10px;
}
.nav-duzhe-left-bottom-bottom{
position:relative;
overflow:hidden;
width:960px;
height:260px;
}
.nav-duzhe-left-bottom-bottom-ul{
position:absolute;
top:0;
left:0;
width:8888px;
height:260px;
}
.nav-duzhe-left-bottom-bottom-ul>ul{
height:260px;
float:left;
}
.nav-duzhe-right{
width:240px;
height:580px;
float:right;
}
.nav-duzhe-right>div:nth-child(1){
width:240px;
height:84px;
}
.nav-duzhe-right>div:nth-child(2){
width:238px;
height:500px;
border:1px #cccccc solid;
margin-top:-38px;
padding-top:35px;
margin-left:-1px;
}
.nav-duzhe-right>div:nth-child(2)>h3{
color:#487a6f;
font-size:18px;
font-family:microsoft yahei;
font-weight:500;
margin-bottom:0;
margin-left:20px;
}
.nav-duzhe-right>div:nth-child(2)>a:nth-child(2){
display:block;
margin:5px 0 0 20px;
color:#000;
font-family:arial;
font-weight:bold;
font-size:14px;
}
.nav-duzhe-right>div:nth-child(2)>a:nth-child(2):hover{
color:rgb(236,120,20);
text-decoration:underline;
}
.nav-duzhe-right>div:nth-child(2)>a:nth-child(3){
width:100%;
display:block;
margin:40px 0 0 0px;
text-align:center;
}
.nav-duzhe-right>div:nth-child(2)>a:nth-child(4){
width:220px;
display:block;
margin:20px 0 0 10px;
color:#000;
font-family:arial;
font-size:12px;
line-height:24px;
}
.nav-duzhe-right>div:nth-child(2)>a:nth-child(4):hover{
color:rgb(236,120,20);
text-decoration:underline;
}
.nav-duzhe-right>div:nth-child(2)>div:nth-child(5){
width:100%;
height:28px;
margin-top:50px;
}
.nav-duzhe-right>div:nth-child(2)>div:nth-child(5)>a:nth-child(1){
width:98px;
height:28px;
display:block;
text-align:center;
line-height:28px;
color:#fff;
font-family:arial;
background-color:rgb(255,93,93);
margin-left:10px;
float:left;
}
.nav-duzhe-right>div:nth-child(2)>div:nth-child(5)>a:nth-child(2){
width:98px;
height:28px;
display:block;
text-align:center;
line-height:28px;
color:#fff;
font-family:arial;
background-color:rgb(72,122,111);
margin-right:10px;
float:right;
}
.nav-tejia{
width:100%;
height:589;
}
.nav-tejia>.container{
border-top:1px #cccccc solid;
border-bottom:1px #cccccc solid;
padding-top:30px;
padding-bottom:10px;
}
.nav-tejia-ul{
width:100%;
height:559px;
}
.nav-tejia-ul>li{
float:left;
width:199px;
height:178px;
border:1px #ccc solid;
margin:0 -1px -1px 0;
}
.tejia{
width:100%;
height:138px;
display:block;
text-align:center;
padding-top:10px;
}
.tejia-span{
color:rgb(218,36,93);
font-family:microsoft yahei;
font-size:20px;
padding-left:10px;
}
.tejia-a{
color:rgb(102,102,102);
font-family:arial;
font-size:12px;
}
.tejia-div{
margin-top:-3px;
}
.footer{
width:100%;
}
.footer-yi{
width:100%;
height:78px;
border-top:2px #ff2832 solid;
border-bottom:1px rgb(235,235,235) solid;
background-color:rgb(250,250,250);
margin-top:20px;
}
.footer-yi-ul{
width:890px;
height:68px;
margin-left:210px;
}
.footer-yi-ul>li{
width:187px;
height:52px;
margin:15px 30px 0px 0;
float:left;
}
.footer-yi-ul>li>a{
width:187px;
height:52px;
display:block;
background-image:;
background-repeat:no-repeat;
}
.footer-yi-ul>li:nth-child(2)>a{
background-position:0 -52px;
}
.footer-yi-ul>li:nth-child(3)>a{
background-position:0 -104px;
}
.footer-yi-ul>li:nth-child(4)>a{
background-position:0 -156px;
}
.footer-er{
width:100%;
height:140px;
padding-top:30px;
border-bottom:1px #ccc solid;
}
.footer-er table{
margin-left:190px;
}
.footer-er table td{
width:135px;
height:20px;
line-height:20px;
text-align:center;
}
.footer-er table thead td{
font-family:"microsoft yahei";
font-size:14px;
}
.footer-er table td>a{
color:#929292;
font-size:12px;
}
.footer-er table td>a:hover{
color:rgb(236,120,20);
text-decoration:underline;
}
.footer-san{
width:100%;
height:100px;
padding:17px 0 30px 0;
}
.footer-san-ul{
margin:5px 0 0 250px;
height:20px;
}
.footer-san-ul>li{
color:#929292;
float:left;
font-size:12px;
margin-right:20px;
}
.footer-san-ul>li>a{
color:#929292;
font-size:12px;
}
.footer-san-ul>li>a:hover{
color:rgb(236,120,20);
text-decoration:underline;
}
.footer-san-span{
display:block;
width:960px;
height:53px;
padding-top:10px;
color:#929292;
font-size:12px;
text-align:center;
margin:10px 0 0 135px;
}
.erjia{
font-size:12px;
color:#666666;
font-weight:500;
}
.erjia:hover{
color:rgb(236,120,20);
text-decoration:underline;
}
2018.04
1 概述
主题网络爬虫, 根据一定的网页分析算法过滤与主
题无关的链接保留主题相关的链接井将其放入待抓取的
url队列； 然后根据一定的搜索策略从队列中选择下一
步要抓取的 url, 并重复上述过程, 直到达到某一条件
时停止[1]。 如果采取手动从互联网中获取多网页信息,
耗费人力和精力过大, 而网络爬虫就能很好地弥补这个
缺陷。 同时利用网络爬虫可以过滤掉很多手动采集时遇
到的无关数据, 采集数据更加便捷。 伴随着爬虫技术也
产生了众多反爬技术, 在爬取时候应注意 “礼貌” 爬
行[3], 否则会被对方限制爬行。
python 语言代码简洁, 易学, 并且拥有多种发送
http请求和解析 html源码的库, 故该语言十分适合
用来编写爬虫程序。 基于 python3.5爬取当当网最新上
架图书, 获取图书的基本信息并将获取的信息以 word
文档的形式展现。 并且在二次爬取图书信息时可以对比
前一次爬取记录, 将更新的图书信息存储而不重复存储
已经爬取过的图书信息, 方便购书者直观地了解最新上
架的图书信息。
2 爬虫的设计
2.1 编程环境
window10操作系统, python3.5, ide:pycharm。
2.2 爬取的起始页面
爬取的新书上架包括小说、 文学、 烹饪、 经济、 管
理等分类栏目, 小说栏目的起始采集页面为 http://book.
dangdang.com/list/newrelease_c01.03_p1.html, 观察各栏
目起始页面 url规律, 可构造 urlstart='http://book.dang-
dang.com/list/newrelease_c01. {} _p1.html'.format (v), 每
个分类栏目对应相应的变量 v值。
2.3 模拟浏览器访问
一些站点不喜欢非人为访问, 因此应该尽量让爬虫
模拟人真实访问的样子, 网站是通过浏览器发送请求头
中的 user-agent的值来判断浏览器身份, 把 user-agent
修改成对应的浏览器。 当把模拟的访问方式改成移动设
备中的浏览器时, 则会得到一个没有广告以及其他干扰
的简化的更易爬虫采集的网站版本[2]。 利用 requests库发
送 get请求, 返回网页信息, 若无法得到页面信息利
用 try-except则会显示 “页面获取出错”。
def getresponsecontent(self, urls):
try:
headers = {"user-agent":"
mozilla/5.0 (windows nt10.0;wow64)applewebkit/
537.36 (khtml,like gecko) chrome/61.0.3163.91 sa-
fari/537.36"}
html = requests.get(urls, headers=headers)
return html.text
except:
print("页面获取出错")
2.4 获取总页面数
新书上架栏目的需要翻页爬取, 利用 beautiful-
soup库来解析返回的网页信息, 用 chrome 的开发者
工具找到最后一个页面对应的标签 find ( 'div', { "
class" :" fanye_bottom"}) 中的 ‘a’ 标签。 观察翻页后
的页面 url比较可得第一页为 p1, 第二页为 p2, 以
此类推。 可构造出每一页 的 url, 遍历每个页面即可
爬取信息。
基于 python3爬虫获取
还没有评论，来说两句吧...