✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

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

一、👨‍🎓网站题目

🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。

二、✍️网站描述

🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度

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

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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><!----top01开始----><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><!---top结束----><!---top02结束----><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><!---nav结束----><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><!--box1开始----><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>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>图集：智慧生活 享你所想 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><!----box1结束----><div class="ad"><img src="images/ad03.jpg" /></div><!----box2开始----><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><li><a href="nei.html"><img src="images/box202.jpg">            <p>2015百度排名规则及算法(百度内部资料</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"><详情">>
">
">
2">
">
关于我们
" rel="nofollow">新新闻网简介
" rel="nofollow">新新闻网团队
" rel="nofollow">联系我们
">
广告服务
">在线营销
">代理商专区
">新闻网营销
" target="_blank">营销宣传
">
帮助中心
" rel="nofollow">支付方式
" rel="nofollow">一对一服务
">创业孵化
">
">
  • /footer-qrcode.jpg" class="img-rounded" width="90" height="90">
    关注微信
">
">

"> 400-888-8888

">7X24小时客服热线
" class="kef">在线客服
">
">违法和不良信息举报热线：400-999-9999
Copyright © 2019 新新闻网 All Rights Reserved. 版权所有