首页 > 分享 > 简单宠物网页设计作业静态HTML动物介绍网页作业 DW宠物网站模板下载大学生简单野生动物网页作品代码

简单宠物网页设计作业静态HTML动物介绍网页作业 DW宠物网站模板下载大学生简单野生动物网页作品代码

萌宠菠菠乐园
2024-08-08 17:49

精彩专栏推荐文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
作者主页: 【主页——获取更多优质源码】
web前端期末大作业：【毕设项目精品实战案例 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (110套) 】
超炫酷的Echarts大屏可视化源码：【 Echarts大屏展示大数据平台可视化(150套) 】
HTML+CSS+JS实例代码：【️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程 120G干货分享】
关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。坚持原创，热衷分享，初心未改，继往开来！

文章目录一、‍网站题目二、✍️网站描述三、网站介绍四、网站演示五、⚙️ 网站代码HTML结构代码CSS样式代码六、如何让学习不再盲目七、更多干货

一、‍网站题目

宠物网页设计、保护动物网页、鲸鱼海豚主题、保护大象、等网站的设计与制作。

二、✍️网站描述

️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。

一套优质的网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有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结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link href="css/style.css" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/css/style.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="top"><div id="top_nr"><div id="top_left"><a href="#"><img src="images/logo.png" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/logo.png" /></a></div> <div id="top_right"><ul class="hui8"> <li><a href="index.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/index.html">网站首页</a></li> <li><a href="list.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/list.html">狗狗食品</a></li> <li><a href="mao.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/mao.html">猫猫食品</a></li> <li><a href="chong.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chong.html">小宠食品</a></li> <li><a href="siyang.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/siyang.html">宠物饲养</a></li> <li><a href="dongwu.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/dongwu.html">动物宠物</a></li> </ul> <ul class="cl"></ul> </div> <div class="cl"></div> </div> </div> <div id="banner"><div id="banner_img"><img src="images/banner.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/banner.jpg" /></div> </div> <div id="main"><div class="mainh"><marquee>欢迎来到我的网站</marquee></div> <div class="fenlei"><h1><span class="more2 hui"><a href="list.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/list.html"> 更多>> </a></span></h1><div class="fen_img"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb1.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb1.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb2.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb2.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb3.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb3.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb4.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb4.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="cl"></div> <div class="fen_img"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb5.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb5.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb6.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb6.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb7.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb7.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb8.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb8.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb9.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb9.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="cl"></div> </div><div class="fenlei"><h2><span class="more2 hui"><a href="mao.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/mao.html"> 更多>> </a></span></h2><div class="fen_img"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb1.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb1.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb2.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb2.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb3.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb3.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb4.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb4.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="cl"></div> <div class="fen_img"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb5.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb5.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb6.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb6.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb7.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb7.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb8.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb8.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb9.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb9.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="cl"></div> </div> <div class="fenlei"><h3><span class="more2 hui"><a href="chong.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chong.html"> 更多>> </a></span></h3><div class="fen_img"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb1.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb1.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb2.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb2.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb3.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb3.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb4.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb4.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="cl"></div> <div class="fen_img"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb5.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb5.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb6.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb6.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb7.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb7.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html"><img src="images/thumb8.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb8.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao1.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao1.html" style="color:#900;">$12</a></strong></div> <div class="fen_img ml"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html"><img src="images/thumb9.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/images/thumb9.jpg" width="178" height="200" /></a>宝路鸡肉味犬用妙鲜包100g<br /> <strong class="red"><a href="chanpinjieshao2.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you6/chanpinjieshao2.html" style="color:#900;">$12</a></strong></div> <div class="cl"></div> </div> </div> <div class="footer"><div class="footer_nr"> xxxx<br />制作人：xxx<br /> 学号xxx</div> </div> </body> </html> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123

CSS样式代码

@charset "UTF-8"; /* CSS Document */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; font-family:Arial;} body{ font:12px/1.5 Arial '宋体'; background:url("../images/body.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/you6/images/body.jpg*/;} table{ border-collapse:collapse; border-spacing:0;} fieldset,img{ border:0;} address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;} ol,ul{ list-style:none; line-height:0px;} caption,th{ text-align:left;} h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;} q:before,q:after{ content:'';} abbr,acronym{ border:0;} q:before,q:after,blockquote:before,blockquote:after{content:"";} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input{font-family:inherit; font-size:inherit; *font-size:100%;font-weight:inherit; line-height: 23px; height: 21px; border: 1px solid #dddddd;} *{ margin:0px; padding:0px;list-style-type:none;} textarea{font-family:inherit; font-size:inherit; *font-size:100%; font-weight:inherit; line-height: 23px; border: 1px solid #dddddd; overflow-y:hidden; overflow-x:hidden; padding: 5px;} a,img{border:0;} em{font-style:normal;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-table;} *html .clearfix{height:1%;} .clearfix{display:block;} *+html .clearfix{min-height:1%;} .cl{ clear:both; line-height:0px;} .red,.red a{ color:#C00 text-decoration:none;} .red a:hover{ color:#f60; text-decoration:none;} .hui,.hui a{color:#828181!important;text-decoration:none;} .hui a:hover{color:#F60!important;text-decoration:none;} .hui8,.hui8 a{color:#333!important;text-decoration:none;} .hui8 a:hover{color:#F60!important;text-decoration:none;} .blue3,.blue3 a{color:#043480;text-decoration:none;} .blue3 a:hover{ color:#F60;} .time{ float:right; line-height:26px; font-size:12px; color:#828181;} .more{ width:45px; float:right; height:15px; margin-top:12px;} .more1{ width:44px; float:right; height:15px; margin-top:8px; margin-right:10px;} .more2{ width:108px; float:right; height:51px; font-size:12px; text-align:right; font-weight:100; margin-right:10px;} #top{ width:100%; height:100px; } #top_nr{ width:1000px; margin:0px auto 0px auto;} #top_left{ width:150px; height:88px; margin-top:6px; float:left;} #top_right{ width:700px; padding-right:30px; float:right; height:30px; margin-top:50px;} #top_right ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;} #top_right ul li{ width:100px; float:left; line-height:30px; font-size:14px; text-align:center; font-weight:bold; color:#000;} #banner{ width:100%; height:400px; background:url("../images/banner_bg2.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/you6/images/banner_bg2.jpg*/ repeat-x top left;} #banner_img{ width:1000px; height:400px; margin:0px auto 0px auto;} #main{ width:1000px; margin:0px auto 0px auto;} .mainh{ width:975px; height:51px; background:url("../images/h1.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/you6/images/h1.jpg*/ no-repeat left top; margin-top:10px; line-height:51px; padding-left:25px; font-size:16px; font-weight:bold; color:#29a7d0;} .fenlei{ width:1000px; margin-top:15px;} .fenlei h1{width:1000px; background:url("../images/images1.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/you6/images/images1.jpg*/ no-repeat left top; height:51px; margin-top:15px; line-height:51px;} .fenlei h2{width:1000px; background:url("../images/images2.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/you6/images/images2.jpg*/ no-repeat left top; height:51px; margin-top:15px; line-height:51px;} .fenlei h3{width:1000px; background:url("../images/images3.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/you6/images/images3.jpg*/ no-repeat left top; height:51px; margin-top:15px; line-height:51px;} .fen_img{ width:180px; float:left; font-size:12px; text-align:left; line-height:25px; font-weight:100; margin-top:15px;} .ml{ margin-left:25px;} .fen_img img{ width:178px; height:200px; border:1px solid #CCC; } .footer{ width:100%; margin-top:20px; background:url("../images/foot.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/you6/images/foot.jpg*/ repeat-x top left; padding-top:70px; } .footer_nr{ width:1000px; margin:0px auto 0px auto; line-height:30px; font-size:12px; text-align:center; color:#630;} .list_left{ width:680px; background:url("../images/images4.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/you6/images/images4.jpg*/ repeat-y top right; float:left; padding-right:20px; margin-top:20px} .list_left h1{ border-bottom:1px dashed #47bebf; height:40px; font-size:20px; line-height:40px; font-weight:bold; color:#47bebf;} .list_leftimg{ width:680px; font-size:12px; text-align:left; line-height:25px; font-weight:100; margin-top:15px;} .ml1{ margin-left:70px;} .leftimg{ width:180px; float:left; font-size:12px; text-align:left; line-height:25px; font-weight:100; margin-top:15px;} .leftimg img{ width:178px; height:200px; border:1px solid #CCC; } .list_right{ width:280px; float:right; margin-top:20px;} .list_right h1{ border-bottom:1px dashed #47bebf; height:40px; font-size:20px; line-height:40px; font-weight:bold; color:#47bebf;} .list_right dl{ width:280px; padding:10px 0px 10px 0px;} .list_right dl dt{ width:270px; padding-left:10px; font-size:16px; font-weight:bold; text-align:left; line-height:35px; color:#806064;} .list_right dl dd{ width:260px; padding-left:20px; font-size:14px; font-weight:bold; text-align:left; line-height:30px; color:#806064;} .intro{ width:680px; font-size:12px; text-align:left; line-height:25px; font-weight:100; margin-top:15px;} .intro h2{ font-size:14px; font-weight:bold; text-align:center; color:#806064; line-height:45px;} .intro p{ padding:15px; font-size:12px; text-align:left; line-height:25px; font-weight:100; margin-top:15px;} 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384

六、如何让学习不再盲目

21年程序员总结给编程菜鸟的16条忠告

入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。没积累足够知识和经验前，你是开发不出一个完整项目的。把最新技术挂在嘴边，还不如把过时技术牢记心中。活到老学到老，只有一招半式是闯不了江湖的。看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。书读百遍其义自见，别指望读一遍就能掌握。请把教程里的例子亲手实践下，即使案例中有完整源码。把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。不要漏掉教程中任何一个习题——请全部做完并做好笔记。水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。做好保存源文件的习惯，这些都是你的知识积累。遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。