HTML期末大作业：基于HTML+CSS+JavaScript新能源汽车资讯门户网站

原创

html网页设计 2022-11-06 16:59:08 ©著作权

文章标签 html静态网页 web课程与设计 web前端期末大作业学生网页作业 html 文章分类 Spark 大数据

©著作权归作者所有：来自51CTO博客作者html网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目
二、✍️网站描述
三、📚网站介绍
四、🌐网站演示
五、⚙️ 网站代码

🧱HTML结构代码
💒CSS样式代码

六、🥇 如何让学习不再盲目
七、🎁更多干货

一、👨‍🎓网站题目

🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页、等网站的设计与制作。

二、✍️网站描述

🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

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

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

<html>

   <head>
      <meta charset="UTF-8">
      <meta name="viewport" cnotallow="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
      <title></title>
      <link rel="stylesheet" type="text/css" href="css/public.css" />
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      <link rel="stylesheet" href="css/swiper.min.css" />
      <script type="text/javascript" src="js/jquery1.11.3.min.js"></script>
      <script src="js/public.js"></script>
      <script src="js/swiper.min.js"></script>
   </head>

   <body>
      <div class="topbox">
         <div class="menu">
            <img src="images/menu.png"/>
         </div>
         <!--移动端menu-->
         <div class="menubox">
            <div class="w_per clearfloat">
               <div class="w_pic">
                  <a href="">
                     <img src="images/temp/wtou.png"/>
                  </a>
               </div>
               <div class="w_login">
                  <a href="">登录</a>/<a href="">注册</a>
               </div>
            </div>
            <div class="w_mav">
               <a href="newslist.html" class="active">新闻</a>
               <a href="product.html">产品</a>
               <a href="">技术</a>
               <a href="">用车</a>
               <a href="">热点</a>
            </div>
         </div>
         <div class="top clearfloat">
         <div class="logo">
            <a href=""><img src="images/logo.png" /></a>
         </div>
         <div class="nav">
            <ul class="clearfloat">
               <li><a href="">新闻</a></li>
               <li><a href="">产品</a></li>
               <li><a href="">技术</a></li>
               <li><a href="">用车</a></li>
               <li><a href="">热点</a></li>
            </ul>
         </div>
         <div class="searchbox clearfloat">
            <input type="text" placeholder="关键字" />
            <span class="se_btn"></span>
         </div>
         <div class="regcut clearfloat">
            <a href="">注册</a><span></span><a href="">登录</a>
         </div>
         <div class="serbtn">
            <img src="images/sear.png"/>
         </div>
         <!--移动端搜索按钮-->
         <div class="w_search clearfloat">
            <div class="w_se clearfloat">
               <input type="text" name="" id="" value="" placeholder="关键字"/>
               <span></span>
            </div>
            <div class="w_sebtn">
               取消
            </div>
         </div>
      </div>
      </div>
      
      <!--top-->
      <div class="banner">
         <div class="ban_prev">
            <img src="images/prev1.png" class="prev1" />
            <img src="images/prev2.png" class="prev2" />
         </div>
         <ul class="bannerul">
            <li>
               <a href=""><img src="images/temp/banner1.png" /></a>
            </li>
            <li>
               <a href=""><img src="images/temp/banner1.png" /></a>
            </li>
            <li>
               <a href=""><img src="images/temp/banner1.png" /></a>
            </li>
            <li>
               <a href=""><img src="images/temp/banner1.png" /></a>
            </li>
            <li>
               <a href=""><img src="images/temp/banner1.png" /></a>
            </li>
            <li>
               <a href=""><img src="images/temp/banner1.png" /></a>
            </li>
         </ul>
         <ul class="num clearfloat">
            <li class="active"><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
         </ul>

         <div class="ban_next">
            <img src="images/next1.png" class="next1" />
            <img src="images/next2.png" class="next2" />
         </div>
      </div>
   </div>
</html>

💒CSS样式代码

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img{border:medium none;margin: 0;padding: 0;}
body,button, input, select, textarea{font: 14px/1.5 "Microsoft Yahei",tahoma,Srial,helvetica,sans-serif;}
h1, h2, h3, h4, h5, h6{font-size: 100%;font-weight: normal;}
em{font-style:normal;}
ul, ol{list-style: none;}
a{
  text-decoration: none;color:#333;
  text-decoration: none;
  -moz-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
a:hover{
  text-decoration: none;
  -moz-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
/*火狐去掉按钮、连接的虚线*/
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border: 0;outline : 0;} 
input,button,select,textarea{outline:none;}
textarea{resize:none;}
a { text-decoration: none; color: #333; }
a{blr:expression(this.notallow=this.blur());}
a:focus{outline:none;}
a.hidefocus{outline:none}
.button{ border-radius: 0; }
input{font-family: "微软雅黑";}
textarea{font-family: "微软雅黑";}
img{border:0px;  outline-width:0px;  vertical-align:top;}

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

上一篇：HTML期末作业课程设计期末大作业——我的美丽家乡湛江海鲜之都HTML+CSS+JavaScript

下一篇：HTML期末作业-基于HTML+CSS+JavaScript制作学生信息管理系统模板

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯