web前端期末大作业 html+css+javascript网页设计实例 企业网站制作(新能源汽车资讯门户网站静态模板)

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

作品介绍

1.网页作品简介方面​​ :简洁大气的新能源情报分析资讯网,环保能源汽车资讯门户网站模板html下载。包含:​​新闻、产品、技术、用车、热点、注册、登录​​等总共11个页面。

2.网页作品编辑方面​​:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm​​ 所有编辑器均可使用)

3.网页作品布局方面​:网页布局整体为LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面​:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单使用JavaScript制作了表单判断(提交时表单不能为空)


文章目录

web前端期末大作业 html+css+javascript网页设计实例 企业网站制作(新能源汽车资讯门户网站静态模板)_企业网站制作HTML

二、代码目录

web前端期末大作业 html+css+javascript网页设计实例 企业网站制作(新能源汽车资讯门户网站静态模板)_web前端期末大作业_02

三、代码实现

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="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>
<!--banner-->
<div class="newsday">
<div class="news_tit clearfloat">
<h1>每日热点</h1>
<span>精彩始于每日的变化</span>
<a href=""><img src="images/more1.png" class="more1" /><img src="images/more2.png" class="more2" /></a>
</div>
<div class="newsbox ">
<div class="newsprev">
<span>
<img src="images/nprev1.png" class="npr1"/>
<img src="images/nprev2.png" class="npr2"/>
</span>

</div>
<div class="newsban swiper-container">
<ul class="clearfloat swiper-wrapper">
<li class="swiper-slide">
<a href="">
<div class="pic_div">
<img src="images/temp/news1.png" />
<div class="pic_bj"></div>
</div>
<div class="newscont">
Elon Musk : 尽快更新特斯拉的自动驾驶功能
</div>
</a>
</li>
<li class="swiper-slide">
<a href="">
<div class="pic_div">
<img src="images/temp/news2.png" />
<div class="pic_bj"></div>
</div>
<div class="newscont">
Elon Musk : 尽快更新特斯拉的自动驾驶功能
</div>
</a>
</li>
<li class="swiper-slide">
<a href="">
<div class="pic_div">
<img src="images/temp/news3.png" />
<div class="pic_bj"></div>
</div>
<div class="newscont">
Elon Musk : 尽快更新特斯拉的自动驾驶功能
</div>
</a>
</li>
<li class="swiper-slide">
<a href="">
<div class="pic_div">
<img src="images/temp/news4.png" />
<div class="pic_bj"></div>
</div>
<div class="newscont">
Elon Musk : 尽快更新特斯拉的自动驾驶功能
</div>
</a>
</li>
<li class="swiper-slide">
<a href="">
<div class="pic_div">
<img src="images/temp/news1.png" />
<div class="pic_bj"></div>
</div>
<div class="newscont">
Elon Musk : 尽快更新特斯拉的自动驾驶功能
</div>
</a>
</li>
<li class="swiper-slide">
<a href="">
<div class="pic_div">
<img src="images/temp/news2.png" />
<div class="pic_bj"></div>
</div>
<div class="newscont">
Elon Musk : 尽快更新特斯拉的自动驾驶功能
</div>
</a>
</li>
</ul>
</div>
<div class="newsnext">
<span>
<img src="images/nnext1.png" class="nnex1"/>
<img src="images/nnext2.png" class="nnex2"/>
</span>

</div>
</div>
</div>
<!--每日热点-->
<div class="days">
<div class="news_tit clearfloat">
<h1>日常稿件</h1>
<span>精彩始于每日的变化</span>
<a href=""><img src="images/more1.png" class="more1" /><img src="images/more2.png" class="more2" /></a>
</div>
<div class="manu clearfloat">
<div class="daysway">
<div class="way1">
<a href=""><img src="images/temp/day1.png"/>
<p>没惊喜 但绝不失望 观摩蔚来 ES8 成都首秀</p>
</a>
<div class="way_tit">
生活方式
</div>
</div>
<div class="way2 ">
<a href="" class="clearfloat">
<div class="waypic">
<img src="images/temp/day2.png"/>
<div class="way_tit">
生活方式
</div>
</div>
<div class="waycont">
<h1>“不速之客”探秘行 走访八代凯美瑞出生地</h1>
<div class="waytext">
2018年,双擎会迎来了新的成员,那就是第八代凯美瑞双擎。而我们新的一年第…
</div>
<div class="like clearfloat">
<div class="zantime">
<span class="headport"><img src="images/temp/like.png"/></span>
<span class="likename">超人2018</span>
</div>
<div class="liketime">
2018-02-24
</div>
</div>
<div class="jian">
<img src="images/jian.png"/>
</div>
</div>
</a>
</div>
</div>
<!--生活方式-->
<div class="dayactbox">
<div class="dayact clearfloat">
<a href="">
<div class="actpic">
<img src="images/temp/day3.png"/>
<div class="way_tit">
活动
</div>
</div>
<div class="waycont">
<h1>没惊喜 但绝不失望 观摩蔚来 ES8 成都首秀</h1>
<div class="waytext">
在这里有一群对新能源&智能汽车有见解,敢表达的人…
</div>
<div class="like clearfloat">
<div class="zantime">
<span class="headport"><img src="images/temp/like.png"/></span>
<span class="likename">超人2018</span>
</div>
<div class="liketime">
2018-02-24
</div>
</div>
<div class="jian">
<img src="images/jian.png"/>
</div>
</div>
</a>
</div>
<div class="dayact clearfloat">
<a href="">
<div class="waycont">
<h1>没惊喜 但绝不失望 观摩蔚来 ES8 成都首秀</h1>
<div class="waytext">
在这里有一群对新能源&智能汽车有见解,敢表达的人…
</div>
<div class="like clearfloat">
<div class="zantime">
<span class="headport"><img src="images/temp/like.png"/></span>
<span class="likename">超人2018</span>
</div>
<div class="liketime">
2018-02-24
</div>
</div>
<div class="jians">
<img src="images/jian2.png"/>
</div>
</div>
<div class="actpic">
<img src="images/temp/day4.png"/>
<div class="way_tits">
生活方式
</div>
</div>
</a>
</div>
<div class="dayact clearfloat">
<a href="">
<div class="actpic">
<img src="images/temp/day5.png"/>
<div class="way_tit">
生活方式
</div>
</div>
<div class="waycont">
<h1>没惊喜 但绝不失望 观摩蔚来 ES8 成都首秀</h1>
<div class="waytext">
在这里有一群对新能源&智能汽车有见解,敢表达的人…
</div>
<div class="like clearfloat">
<div class="zantime">
<span class="headport"><img src="images/temp/like.png"/></span>
<span class="likename">超人2018</span>
</div>
<div class="liketime">
2018-02-24
</div>
</div>
<div class="jian">
<img src="images/jian.png"/>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

<!--日常稿件-->
<div class="want">
<a href=""><img src="images/temp/want.png" />
</a>
</div>
<!--广告位置-->
<div class="w_carcut">
<div class="w_cartit">
<span class="active">新车试驾</span><span>导购信息</span><span>行业资讯</span>
</div>
<div class="w_cut active">
<div class="w_prev">
<img src="images/prev2.png"/>
</div>
<div class="w_drive swiper-containers">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="">
<div class="drpic">
<img src="images/temp/drav1.png" />
</div>
<h1>比亚迪宋MAX插混版无伪装图曝光 不仅是增加充电口这么简单</h1>
</a>
</li>
<li class="swiper-slide">
<a href="">
<div class="drpic">
<img src="images/temp/drav2.png" />
</div>
<h1>比亚迪宋MAX插混版无伪装图曝光 不仅是增加充电口这么简单</h1>
</a>
</li><li class="swiper-slide">
<a href="">
<div class="drpic">
<img src="images/temp/drav1.png" />
</div>
<h1>比亚迪宋MAX插混版无伪装图曝光 不仅是增加充电口这么简单</h1>
</a>
</li>
<li class="swiper-slide">
<a href="">
<div class="drpic">
<img src="images/temp/drav2.png" />
</div>
<h1>比亚迪宋MAX插混版无伪装图曝光 不仅是增加充电口这么简单</h1>
</a>
</li>
</ul>
</div>
<div class="w_next">
<img src="images/next2.png"/>
</div>
</div>
<!--wap新车试驾-->
<div class="w_cut">
<div class="guide">
<ul>
<li>
<a href="">
<div class="gupic">
<img src="images/temp/guide1.png" />
</div>
</a>
<div class="guidecont">
<a href="">
<h1>蔚来ES8充电服务值不值?答案和你想的不同</h1>
<div class="guidetext">
上周六,蔚来终于公布了最后两个重要价格:能量无忧和服务无忧。充电服务和售后保险服务的价格…
</div>
</a>
<div class="guideline"></div>
<div class="guidelike clearfloat">
<div class="zantime">
<span class="likename">于欣烈 </span>
<span class="liked"></span>
<span class="likename">2018-02-07</span>
</div>

<div class="zanbox">
<span class="zanbtn "></span><span class="zannum">1</span>
<a href="" class="cri"></a><span class="zannum">10</span>
</div>
</div>
</div>

</li>

<li>
<a href="">
<div class="gupic">
<img src="images/temp/guide2.png" />
</div>
</a>
<div class="guidecont">
<a href="">
<h1>蔚来ES8充电服务值不值?答案和你想的不同</h1>
<div class="guidetext">
上周六,蔚来终于公布了最后两个重要价格:能量无忧和服务无忧。充电服务和售后保险服务的价格…
</div>
</a>
<div class="guideline"></div>
<div class="guidelike clearfloat">
<div class="zantime">
<span class="likename">于欣烈 </span>
<span class="liked"></span>
<span class="likename">2018-02-07</span>
</div>

<div class="zanbox">
<span class="zanbtn "></span><span class="zannum">1</span>
<a href="" class="cri"></a><span class="zannum">10</span>
</div>
</div>
</div>

</li>
</ul>
<a href="" class="w_more">点击加载更多</a>
</div>

</div>
<!--导购信息-->
<div class="w_cut ">
<div class="indust">
<ul>
<li><a href="" class="clearfloat">
<div class="industpic">
<img src="images/temp/dust1.png"/>
</div>
<div class="industcont">
<h1>中国电动车创业浪潮:是革命还是泡沫? Vol.1 传播</h1>
<p>2018-02-20</p>
</div>
</a></li>
<li><a href="" class="clearfloat">
<div class="industpic">
<img src="images/temp/dust2.png"/>
</div>
<div class="industcont">
<h1>中国电动车创业浪潮:是革命还是泡沫? Vol.1 传播</h1>
<p>2018-02-20</p>
</div>
</a></li>
<li><a href="" class="clearfloat">
<div class="industpic">
<img src="images/temp/dust3.png"/>
</div>
<div class="industcont">
<h1>中国电动车创业浪潮:是革命还是泡沫? Vol.1 传播</h1>
<p>2018-02-20</p>
</div>
</a></li>
</ul>
<a href="" class="w_more">点击加载更多</a>
</div>

</div>
</div>
<!--移动版新车试驾 导购信息-->
<div class="carbox clearfloat">
<div class="carmat">
<div class="news_tit clearfloat">
<h1>新车资讯</h1>
<span>不可遗落的诗篇</span>
</div>
<ul>
<li>
<a href="">
<div class="matpic">
<img src="images/temp/mat1.png" />
</div>
</a>
<div class="matcont">
<a href="">
<h1>新年购车清单 2018 年值得期待的十大新能源车型</h1>
<div class="mattext">
2018 年或许将成为中国汽车发展史上具有里程碑式意义的一年,这一年是新势力造成团队异军突起的一年,接下来的这一年将有一系列新势力车型推向市场。同时也将是传统汽车企业开始向新能源车转型的一年。那么接下来的 ...
</div>
</a>
<div class="like clearfloat">
<div class="zantime">
<span class="headport"><img src="images/temp/like.png"/></span>
<span class="likename">超人2018</span>
<span class="liked"></span>
<span class="likename">5小时前</span>
</div>
<div class="zanbox">
<span class="zanbtn active"></span><span class="zannum">1</span>
<a href="" class="cri"></a><span class="zannum">10</span>
</div>
</div>
</div>

</li>
<li>
<a href="">
<div class="matpic">
<img src="images/temp/mat2.png" />
</div>
</a>
<div class="matcont">
<a href="">
<h1>新年购车清单 2018 年值得期待的十大新能源车型</h1>
<div class="mattext">
2018 年或许将成为中国汽车发展史上具有里程碑式意义的一年,这一年是新势力造成团队异军突起的一年,接下来的这一年将有一系列新势力车型推向市场。同时也将是传统汽车企业开始向新能源车转型的一年。那么接下来的 ...
</div>
</a>
<div class="like clearfloat">
<div class="zantime">
<span class="headport"><img src="images/temp/like.png"/></span>
<span class="likename">超人2018</span>
<span class="liked"></span>
<span class="likename">5小时前</span>
</div>
<div class="zanbox">
<span class="zanbtn "></span><span class="zannum">1</span>
<a href="" class="cri"></a><span class="zannum">10</span>
</div>
</div>
</div>

</li>
<li>
<a href="">
<div class="matpic">
<img src="images/temp/mat3.png" />
</div>
</a>
<div class="matcont">
<a href="">
<h1>新年购车清单 2018 年值得期待的十大新能源车型</h1>
<div class="mattext">
2018 年或许将成为中国汽车发展史上具有里程碑式意义的一年,这一年是新势力造成团队异军突起的一年,接下来的这一年将有一系列新势力车型推向市场。同时也将是传统汽车企业开始向新能源车转型的一年。那么接下来的 ...
</div>
</a>
<div class="like clearfloat">
<div class="zantime">
<span class="headport"><img src="images/temp/like.png"/></span>
<span class="likename">超人2018</span>
<span class="liked"></span>
<span class="likename">5小时前</span>
</div>
<div class="zanbox">
<span class="zanbtn "></span><span class="zannum">1</span>
<a href="" class="cri"></a><span class="zannum">10</span>
</div>
</div>
</div>

</li>
<li>
<a href="">
<div class="matpic">
<img src="images/temp/mat4.png" />
</div>
</a>
<div class="matcont">
<a href="">
<h1>新年购车清单 2018 年值得期待的十大新能源车型</h1>
<div class="mattext">
2018 年或许将成为中国汽车发展史上具有里程碑式意义的一年,这一年是新势力造成团队异军突起的一年,接下来的这一年将有一系列新势力车型推向市场。同时也将是传统汽车企业开始向新能源车转型的一年。那么接下来的 ...
</div>
</a>
<div class="like clearfloat">
<div class="zantime">
<span class="headport"><img src="images/temp/like.png"/></span>
<span class="likename">超人2018</span>
<span class="liked"></span>
<span class="likename">5小时前</span>
</div>
<div class="zanbox">
<span class="zanbtn "></span><span class="zannum">1</span>
<a href="" class="cri"></a><span class="zannum">10</span>
</div>
</div>
</div>

</li>
</ul>
<div class="carmore">
<a href="">点击加载更多</a>
</div>
</div>
<!--新车资讯-->
<div class="drivebox">
<div class="news_tit clearfloat">
<h1>新车试驾</h1>
<a href=""><img src="images/more1.png" class="more1" /><img src="images/more2.png" class="more2" /></a>
</div>
<div class="drive">
<ul>
<li>
<a href="">
<div class="drpic">
<img src="images/temp/drav1.png" />
</div>
<div class="drcont">
<h1>比亚迪宋MAX插混版无伪装图曝光 不仅是增加充电口这么简单</h1>
</div>
</a>
</li>
<li>
<a href="">
<div class="drpic">
<img src="images/temp/drav2.png" />
</div>
<div class="drcont">
<h1>比亚迪宋MAX插混版无伪装图曝光 不仅是增加充电口这么简单</h1>
</div>
</a>
</li>
</ul>
</div>
<!--新车试驾-->
<div class="guidebox">
<div class="news_tit clearfloat">
<h1>导购信息</h1>
<a href=""><img src="images/more1.png" class="more1" /><img src="images/more2.png" class="more2" /></a>
</div>
<div class="guide">
<ul>
<li>
<a href="">
<div class="gupic">
<img src="images/temp/guide1.png" />
</div>
</a>
<div class="guidecont">
<a href="">
<h1>蔚来ES8充电服务值不值?答案和你想的不同</h1>
<div class="guidetext">
上周六,蔚来终于公布了最后两个重要价格:能量无忧和服务无忧。充电服务和售后保险服务的价格…
</div>
</a>
<div class="guideline"></div>
<div class="guidelike clearfloat">
<div class="zantime">
<span class="likename">于欣烈 </span>
<span class="liked"></span>
<span class="likename">2018-02-07</span>
</div>

<div class="zanbox">
<span class="zanbtn "></span><span class="zannum">1</span>
<a href="" class="cri"></a><span class="zannum">10</span>
</div>
</div>
</div>

</li>

<li>
<a href="">
<div class="gupic">
<img src="images/temp/guide2.png" />
</div>
</a>
<div class="guidecont">
<a href="">
<h1>蔚来ES8充电服务值不值?答案和你想的不同</h1>
<div class="guidetext">
上周六,蔚来终于公布了最后两个重要价格:能量无忧和服务无忧。充电服务和售后保险服务的价格…
</div>
</a>
<div class="guideline"></div>
<div class="guidelike clearfloat">
<div class="zantime">
<span class="likename">于欣烈 </span>
<span class="liked"></span>
<span class="likename">2018-02-07</span>
</div>

<div class="zanbox">
<span class="zanbtn "></span><span class="zannum">1</span>
<a href="" class="cri"></a><span class="zannum">10</span>
</div>
</div>
</div>

</li>
</ul>
</div>
</div>
<!--导购信息-->
<div class="industbox">
<div class="news_tit clearfloat">
<h1>行业资讯</h1>
<a href=""><img src="images/more1.png" class="more1" /><img src="images/more2.png" class="more2" /></a>
</div>
<div class="indust">
<ul>
<li><a href="" class="clearfloat">
<div class="industpic">
<img src="images/temp/dust1.png"/>
</div>
<div class="industcont">
<h1>中国电动车创业浪潮:是革命还是泡沫? Vol.1 传播</h1>
<p>2018-02-20</p>
</div>
</a></li>
<li><a href="" class="clearfloat">
<div class="industpic">
<img src="images/temp/dust2.png"/>
</div>
<div class="industcont">
<h1>中国电动车创业浪潮:是革命还是泡沫? Vol.1 传播</h1>
<p>2018-02-20</p>
</div>
</a></li>
<li><a href="" class="clearfloat">
<div class="industpic">
<img src="images/temp/dust3.png"/>
</div>
<div class="industcont">
<h1>中国电动车创业浪潮:是革命还是泡沫? Vol.1 传播</h1>
<p>2018-02-20</p>
</div>
</a></li>
</ul>
</div>
</div>
<!--行业资讯-->
<div class="advert">
<ul>
<li><a href=""><img src="images/temp/advert1.png"/>
<div class="advbj"></div>
</a></li>
<li><a href=""><img src="images/temp/advert2.png"/>
<div class="advbj"></div>
</a></li>
<li><a href=""><img src="images/temp/advert3.png"/>
<div class="advbj"></div>
</a></li>
</ul>
</div>
</div>
</div>
<!--新车部分-->
<div class="footbox">
<div class="footer clearfloat">
<div class="analyse">
<h1>新能源情报分析网</h1>
<p><a href="">新能源出行方式</a><span>| </span><a href="">电动汽车</a><span>|</span><a href="">智能车载有趣的和前沿的</a></p>
<p class="ao">粤ICP备16013334号-1</p>
</div>
<div class="footline"></div>
<div class="about">
<h1>关于我们</h1>
<p><a href="">联系我们</a></p>
<p><a href="">商务合作</a></p>
</div>
<div class="serve">
<h1>服务条款</h1>
<p><a href="">招聘服务</a></p>
</div>
<div class="footline"></div>
<div class="follow">
<img src="images/temp/wei.png"/>
<p>关注公众号</p>
</div>

</div>
<p class="w_ao">粤ICP备16013334号-1</p>
</div>
<!--footer-->
</body>
<script>
var swiper = new Swiper('.swiper-containers', {
slidesPerView: 1,
centeredSlides: true,
paginationClickable: true,
prevButton:'.w_prev',
nextButton:'.w_next'
});
</script>
</html>