-
【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册（9页）
🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
一、👨🎓网站题目
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。
二、✍️网站描述
🏷️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" "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>新新闻网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-8888div> 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" >NBAa>li> <li><a href="list2.html" >CBAa>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" >17173a>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手机2017年第四季度推出的年度旗舰作品，N6 Pro是采用了一块5.99英寸的18：9全面屏，骁龙...span><b>hotb>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>hotb>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>hotb>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>图集：智慧生活 享你所想 2017斐讯之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>2013最新百度SEO算法解密p> a>li>