1200字范文 > 【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册（9页）

【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册（9页）

时间：2018-12-10 06:05:36

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码：【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于、两度荣获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结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>新新闻网</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div class="top"><div class="top-ner"><div class="t-left"><ul><li><span class="kfspan"></span><a href="liuyan.html">在线客服</a></li><li><span class="wxspan"></span><a href="liuyan.html">关注我们</a></li></ul></div><div class="t-right"><ul><li><a href="denglu.html">欢迎登陆</a></li><li><a href="zhuce.html">免费注册</a></li><li><a href="liuyan.html">在线留言</a></li></ul></div></div></div><div class="top2"><div class="top2-ner"><div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div><div class="sousuo"><form id="form1" name="form1" method="POST" action="/Search/companyname.html" onsubmit="return myCheck()"><input type="text" id="companyName" name="companyName" placeholder="大家都在搜：潜水员被鲸鱼吞入" class="myCheckMainName fl"><button type="submit" class="btnCheck" >搜索</button></form></div><div class="tel">400-888-8888</div></div></div><div class="daohang"><div id="nav"><div class="box first"><ul><li class="first"><a href="list.html"><strong>新闻</strong></a></li><li><a href="list2.html" >军事</a></li><li><a href="list2.html" >专题</a></li></ul><ul><li><a href="list.html" ><strong>财经</strong></a></li><li><a href="list2.html" >宏观</a></li><li><a href="list2.html" >理财</a></li></ul></div><div class="box"><ul><li><a href="list.html" ><strong>体育</strong></a></li><li><a href="list2.html" >NBA</a></li><li><a href="list2.html" >CBA</a></li></ul><ul><li><a href="list.html" ><strong>房产</strong></a></li><li><a href="list4.html" >二手房</a></li><li><a href="list4.html" >家居</a></li></ul></div><div class="box"><ul><li><a href="list.html" ><strong>娱乐</strong></a></li><li class="first"><a href="list3.html" >视频</a></li><li><a href="list3.html" >电视剧</a></li></ul><ul><li><a href="list.html" ><strong>汽车</strong></a></li><li><a href="list3.html" >买车</a></li><li><a href="list3.html" >新能源</a></li></ul></div><div class="box"><ul><li><a href="list.html" ><strong>时尚</strong></a></li><li><a href="list3.html" >旅游</a></li><li><a href="list3.html" >母婴</a></li></ul><ul><li><a href="list.html" ><strong>科技</strong></a></li><li><a href="list4.html" >教育</a></li><li><a href="list4.html" >健康</a></li></ul></div><div class="box"><ul><li><a href="list.html" ><strong>美食</strong></a></li><li><a href="list4.html" >文化</a></li><li><a href="list4.html" >历史</a></li></ul><ul><li><a href="list.html" ><strong>星座</strong></a></li><li><a href="list3.html" >动漫</a></li><li><a href="list3.html" >游戏</a></li></ul></div><div class="box"><ul><li><a href="list.html" ><strong>千帆</strong></a></li><li><a href="list2.html" >微门户</a></li><li class="wd"><a href="list2.html" >公益</a></li></ul><ul><li><a href="list.html" ><strong>畅游</strong></a></li><li><a href="list2.html" >17173</a></li><li class="wd"><a href="list2.html" >政务</a></li></ul></div></div></div></div><div class="mian"><div class="ad"><img src="images/ad01.jpg" /></div><div class="box1"><div class="boxL"><div class="boxL-ad"><img src="images/ad02.jpg" /></div><div class="mod-hd"><div class="topics"> <a href="nei.html" ><em></em><div class="tj_img"><img src="images/box101.jpg" ></div><span class="tj_title">360首款全面屏手机</span><span class="tj_intro">作为360手机第四季度推出的年度旗舰作品，N6 Pro是采用了一块5.99英寸的18：9全面屏，骁龙...</span><b>hot</b></a> </div><div class="topics"> <a href="nei.html"><em></em><div class="tj_img"><img src="images/box102.jpg" ></div><span class="tj_title">斐讯智能体脂秤</span><span class="tj_intro">如何健康合理的减肥？是现在人们所追逐的健康理念，越来越多的人也意识到，体脂含量的合...</span><b>hot</b></a> </div><div class="topics"><a href="nei.html" ><em></em><div class="tj_img"><img src="images/box103.jpg" ></div><span class="tj_title">有了会聊天的水杯</span><span class="tj_intro">最近，我新交了个很会聊天的朋友一个神奇而又酷炫的水杯，它是妈妈对我近来优良表现的奖...</span><b>hot</b></a> </div></div></div><div class="boxC"><div class="recNews-title"><div class="tab"><span class="fb">今日推荐</span></div><div class="new">最近更新</div></div><div class="rec-top"><h2><a href="nei.html">安卓8.1终极预览版推送：正式版12月上</a></h2><p>尽管很多机型还在等着升级到Android 8.0 Oreo，部分Pixel以及Nexus机型却已经先人一步，升到了8....</p></div><div class="rec-light"> <a href="nei.html">决战成都!京东游戏妹子杯巅峰对决即</a> </div><ul class="rec-txtul"><li><i>[ 科技 ]</i><a href="nei.html">ThinkPad 25周年典藏机型 12999元今日开卖</a></li><li><i>[ 科技 ]</i><a href="nei.html">黑色星期五看灵越7000轻薄本限时优惠</a></li><li><i>[ 科技 ]</i><a href="nei.html">OUCITEL MIX 2亮相：联发科P25/全面屏</a></li></ul><div class="rec-light"> <a href="nei.html">促进高效物流为消费者打造愉悦的退</a> </div><ul class="rec-txtul"><li><i>[ 科技 ]</i><a href="nei.html">安卓8.1终极预览版推送：正式版12月上</a></li><li><i>[ 科技 ]</i><a href="nei.html">极致4K视界三星量子点U28UH750显示器体</a></li><li><i>[ 科技 ]</i><a href="nei.html">女子给饿了么外卖小哥差评结果悲剧</a></li></ul><div class="rec-light"> <a href="nei.html">百年历史新经典尼康D850单反相机评测</a> </div><ul class="rec-txtul"><li><i>[ 科技 ]</i><a href="nei.html">SmartX超融合挺进期货金融领域再下两</a></li><li><i>[ 科技 ]</i><a href="nei.html">可手持的400mm大炮松下200mm F2.8发布</a></li><li><i>[ 科技 ]</i><a href="nei.html">袖里乾坤佳能Powershot SX730体验评测</a></li></ul></div><div class="boxR"><div class="mod-hd"><div class="boxTitA"><h5>热门话题</h5></div><ul class="hot-news"><li><a href="nei.html" ><img src="images/r01.jpg" width="90" height="60"><h3>8种毁照片的相机设置如何正确设置相</h3></a></li><li><a href="nei.html"><img src="images/r02.jpg" width="90" height="60"><h3>图集：智慧生活享你所想斐讯之</h3></a></li><li><a href="nei.html"><img src="images/r03.jpg" width="90" height="60"><h3>IBM面向AIX用户推高性价比Power服务器</h3></a></li><li><a href="nei.html"><img src="images/r04.jpg" width="90" height="60"><h3>神机升级松下GH5s或在未来1-2月内发布</h3></a></li><li><a href="nei.html"><img src="images/r05.jpg" width="90" height="60"><h3>斐讯大能联手发布扫地机器人继续</h3></a></li><li><a href="nei.html"><img src="images/r06.jpg" width="90" height="60"><h3>重新定义随身相机索尼黑卡迷你RX0评</h3></a></li></ul></div></div></div><div class="ad"><img src="images/ad03.jpg" /></div><div class="box2"><div class="column-title"><h2><a href="list.html">教程</a></h2><div class="sub-class"><a href="list4.html">电脑常识</a><a href="list4.html">电脑安全</a><a href="list4.html">网络应用</a><a href="list4.html">办公教程</a></div><span class="more"><a href="list.html">+更多</a></span> </div></div><div class="box2-ner"><div class="boxL"><ul class="study-picul"><li><a href="nei.html"><img src="images/box201.jpg" ><p>最新百度SEO算法解密</p></a></li><li><a href="nei.html"><img src="images/box202.jpg"><p>百度排名规则及算法(百度内部资料</p></a></li></ul><ul class="news-txtul"><li><i>[ 电脑安全 ]</i><a href="nei.html">理解正确与否决定seo优化效果</a></li><li><i>[ 电脑安全 ]</i><a href="nei.html">百度会给哪些网站留一个好位置</a></li><li><i>[ 电脑安全 ]</i><a href="nei.html">提高网站用户的粘度和品牌</a></li><li><i>[ 办公教程 ]</i><a href="nei.html">网站排名100之外后，如何处理</a></li><li><i>[ 办公教程 ]</i><a href="nei.html">之前受惩罚过的域名，会有影响吗</a></li><li><i>[ 网络应用 ]</i><a href="nei.html">新手如何做好seo优化？</a></li></ul></div><div class="boxC"> <div class="firtxt"><a href="nei.html" class="tout"><img src="images/box204.jpg"></a><div class=""> <a href="nei.html" class="tit">网站关键词排名被K恢复方法</a><p class="auto">互联网是由很多个网站共同组成的，用户如果想要从网上查询到自己有用的信息，那么就会在...<a ="nei.html"><详情></a></p></div></div><ul class="news-txtul clearfix"><li><i>[ 电脑安全 ]</i><a href="nei.html" >如何设置友情链接欺骗对手</a></li><li><i>[ 电脑安全 ]</i><a href="nei.html" >借助第三方网站实现[霸屏]覆盖搜索结</a></li><li><i>[ 电脑常识 ]</i><a href="nei.html" >robots.txt不泄露后台等安全秘密</a></li><li><i>[ 电脑常识 ]</i><a href="nei.html" >哪些网站必须启用 HTTPS 加密?</a></li><li><i>[ 电脑常识 ]</i><a href="nei.html" >HTTPS和HTTP它们有什么不同？</a></li><li><i>[ 电脑常识 ]</i><a href="nei.html" >https使用百度分享的方法</a></li></ul></div><div class="boxR"><ul class="study-recul"><li class="clearfix"><a href="nei.html" class="pic"><img src="images/box205.jpg" width="100" height="67"></a><h3><a href="nei.html">个人网站导航模块设计极为重模块设计极为重要</a></h3><p class="info">-12-01</p></li><li class="clearfix"><a href="nei.html" class="pic"><img src="images/box205.jpg" width="100" height="67"></a><h3><a href="nei.html">个人网站导航模块设计极为重模块设计极为重要</a></h3><p class="info">-12-01</p></li><li class="clearfix"><a href="nei.html" class="pic"><img src="images/box205.jpg" width="100" height="67"></a><h3><a href="nei.html">个人网站导航模块设计极为重模块设计极为重要</a></h3><p class="info">-12-01</p></li><li class="clearfix"><a href="nei.html" class="pic"><img src="images/box205.jpg" width="100" height="67"></a><h3><a href="nei.html">个人网站导航模块设计极为重模块设计极为重要</a></h3><p class="info">-12-01</p></li></ul></div> </div></div><div class="footer"><div class="footer-ner2"><div class="bx"><dl><dt>关于我们</dt><dd><a href="denglu.html" rel="nofollow">新新闻网简介</a></dd><dd><a href="denglu.html" rel="nofollow">新新闻网团队</a></dd><dd><a href="denglu.html" rel="nofollow">联系我们</a></dd></dl></div><div class="bx"><dl><dt>广告服务</dt><dd><a href="denglu.html">在线营销</a></dd><dd><a href="denglu.html">代理商专区</a></dd><dd><a href="denglu.html">新闻网营销</a></dd><dd><a href="denglu.html" target="_blank">营销宣传</a></dd></dl></div><div class="bx"><dl><dt>帮助中心</dt><dd><a href="denglu.html" rel="nofollow">支付方式</a></dd><dd><a href="denglu.html" rel="nofollow">一对一服务</a></dd><dd><a href="denglu.html">创业孵化</a></dd></dl></div><div class="weixi"><dl class="ewm"><dd><ul><li><img src="images/footer-qrcode.jpg" class="img-rounded" width="90" height="90"><div>关注微信</div></li></ul></dd></dl></div><div class="dh"><div class="dh-ner"><h2 ><span class="glyphicon glyphicon-phone-alt"></span> <strong>400-888-8888</strong></h2><span class="text-muted">7X24小时客服热线</span><br><a href="liuyan.html" class="kef">在线客服</a></div></div><hr><div class="banq"><div class="beian">违法和不良信息举报热线：400-999-9999<br>Copyright © 新新闻网 All Rights Reserved. 版权所有</div></div></div></div></body></html>

💒CSS样式代码

@charset "utf-8";/* CSS Document */body{margin:0 auto; font-size:12px; font-family: "微软雅黑",arial; line-height:22px; }div,p,input,ul,li,p,h1,h2{height:auto;list-style:none; margin:0;; padding:0; vertical-align:middle;}img{border:0; margin:0; padding:0;}a{color:#333;text-decoration:none;}a:link{color:#333;}a:hover {color:#69F;text-decoration:none;overflow:hidden;}/*----网页开始----*//*----top开始----*/.top{width: 100%;background: #eee;height: 40px;position: fixed;top: 0px;left: 0px;z-index: 999999;}.top-ner{width: 1170px; height:40px; margin:0 auto;}.t-left{width:50%; height:40px; float:left;}.t-left ul{}.t-left ul li{float: left;height: 40px;line-height: 40px;padding-left: 25px;padding-right: 20px;}li span.kfspan {display: inline-block;width: 22px;height: 22px;z-index: 99;background: url(../images/kefu.png) no-repeat;margin-top: 10px;margin-right: 5px;float: left;}.t-left ul li a{line-height: 40px;height: 40px;display: block;float: left;}.t-left ul li a:hover{color: #c7161c;text-decoration: underline;}li span.wxspan {display: inline-block;width: 22px;height: 22px;z-index: 99;margin-top: 10px;margin-right: 5px;float: left;background: url(../images/weixin.png) no-repeat;}.t-right{width:50%; height:40px; float:left;}.t-right ul{float:right;}.t-right ul li{float: left;height: 40px;line-height: 40px;background: url(../images/rfeng.png) no-repeat right;}.t-right ul li:hover{background:#c7161c;color: #fff;}.t-right ul li a{text-decoration: none;padding-left: 10px;padding-right: 10px;color: #333;text-align: center;display:block;height:40px;}.t-right ul li a:hover{color: #fff;border-right: 1px solid #c7161c;}.top2{width:1170px; height:120px; margin:0 auto; margin-top:40px;}.top2-ner{width:1170px; height:60px; padding-top:30px;}.logo{width: 210px;height: 60px;float: left;margin-right: 10px;}.sousuo {width: 500px;float: left;height: 50px;padding-top: 10px;margin-left: 100px;}.myCheckMainName {text-decoration: none;color: #666;width: 360px;height: 38px;padding-left: 10px;}.btnCheck {height: 40px;padding: 0px 10px;border: none;color: #fff;background: #c7161c;margin-left: -3px;}.tel{width: 190px;height: 40px;float: right;margin-top: 10px;background: url(../images/tel.jpg) no-repeat;padding-left: 50px;font-size: 24px;color: #c7161c;line-height: 40px;}/*---导航----*/.daohang{width: 1170px;height: auto;margin: 0 auto;}#nav{border-top: 1px #e5e5e5 solid;border-bottom: 1px #e5e5e5 solid;}.boxC {width: 464px;float: left;padding: 0 20px;min-height: 100px;background: #fff;}.recNews-title {position: relative;width: 100%;height: 38px;line-height: 38px;background: #f8f8f8;border-top: 1px solid #e9e9e9;}.recNews-title .tab {font-size: 18px;font-weight: 500;color: #bfbfbf;}.recNews-title .tab .fb {color: #333;font-weight: 500;border-top: 3px solid #38a2db;}.recNews-title .tab span {padding: 0 7px;margin-top: -1px;margin-right: 10px;height: 35px;line-height: 35px;cursor: pointer;color: #666;display: inline-block;}line-height: 30px;}.dh-ner h2 span {position: relative;top: 1px;display: inline-block;}.dh-ner .kef{color: #fff;background-color: #c9302c;background: url(../images/kef.jpg) no-repeat;width: 81px;height: 34px;display: block;float: right;margin-top: 10px;font-size: 14px;text-align: center;line-height: 30px;padding-left: 20px;}.banq{margin-right: -15px;margin-left: -15px;margin-top: 20px;width: 1135px;height: 73px;top: 150px;border-top: 1px solid #ddd;float: left;}.beian {color: #666;font-size: 12px;text-align: center;float: left;padding-top: 20px;text-align: center;width: 100%;}