- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

web前端课程设计基于HTML+CSS+JavaScript汽车自驾游(10个页面)

IT司马青衫发表于 2022/08/13 17:03:03 2022/08/13

【摘要】 🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主💂 作者主页: 【主页——🚀获取更多优质源码】🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视...

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

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

@TOC

一、👨‍🎓网站题目

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

二、✍️网站描述

🏷️ 此作品为学生汽车网页设计题材，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结构代码



<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>车行天下</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<!--[if lt IE 9]>  
<script src="js/html5.js"></script>  
<![endif]-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.touchSlider.js"></script>
<script src="js/flashjs.js"></script>
<script src="js/pic_scroll.js"></script>
<script src="js/tabjs.js"></script>
<script src="js/jquery.soChange-min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){	
	$(".dlxhotbox li .rsp").hide();	
	$(".dlxhotbox li").hover(function(){
		$(this).find(".rsp").stop().fadeTo(500,0.8)
		$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
	},
	function(){
		$(this).find(".rsp").stop().fadeTo(500,0)
		$(this).find(".text").stop().animate({left:'600'}, {duration: "fast"})
		$(this).find(".text").animate({left:'-500'}, {duration: 0})
	});
	

//数字导航切换及自定义当前数字的class
	$('#change_3 .a_bigImg').soChange({
		thumbObj:'#change_3 .ul_change_a2 span',
		thumbNowClass:'on',//自定义导航对象当前class为on
		changeType:'slide',//定义对象切换方式为slide
		changeTime:4000//自定义切换时间为4000ms
	});
	
	$('#change_4 .a_bigImg').soChange({
		thumbObj:'#change_4 .ul_change_a2 span',
		thumbNowClass:'on',//自定义导航对象当前class为on
		changeTime:4000//自定义切换时间为4000ms
	});
	
	$('#change_5 .a_bigImg').soChange({
		thumbObj:'#change_5 .ul_change_a2 span',
		thumbNowClass:'on',//自定义导航对象当前class为on
		changeTime:4000//自定义切换时间为4000ms
	});
	
	
	
	
});


</script>
</head>
<body id="dhome">
<!--head-->
<header id="header">
<div class="headbox">
<div class="headleft fl">
<div class="headlhy">会员：[<a href="#">登陆</a> / <a href="#">注册</a>]</div>
<div class="headwzlogo clear"><a href="index.html"><img src="img/topwzlogo.png"></a></div>
</div>
<!--search-->
<div class="searchbox fr">
<div class="search">
<form action="" name="formsearch">
<input name="keyword" type="text" id="search-keyword" value="==请填入搜索的关键词==" class="searchinp fl" onFocus="if(value==defaultValue){value='';}" onBlur="if(!value){value=defaultValue;}">
<button type="submit" class="searchbut fl"></button>
</form>
</div>
</div>
<!--search end-->
</div>
<!--nav-->
<nav class="navbox clear">
<div class="navmain">
<div class="hlogo fl"><a href="index.html"><img src="img/logo.gif"></a></div>
<ul class="navlist fr">
<li id="m1"><a href="index.html">首页</a></li>
<li><a href="越野自驾游.html">越野自驾游</a></li>
<li><a href="越野车改装.html">越野车改装</a></li>
<li><a href="#">网上商城</a></li>
<li><a href="资讯中心.html">资讯中心</a></li>
<li><a href="论坛交流.html">论坛交流</a></li>
<li><a href="精美杂志.html">精美杂志</a></li>
<li><a href="#">会员服务</a></li>
<li><a href="加盟我们.html">加盟我们</a></li>
</ul>
</div>
</nav>
<!--nav end-->  
</header>
<!--head end-->

<!--flash-->
<section class="flashnavbox">
<div class="main_visual">
<div class="flicking_con">
<div class="flicking_inner">
</div>
</div>
<div class="main_image">
<ul>					
<li><a href="#"><span style="background:url('img/indextop.jpg') no-repeat center top"></span></a></li>
</ul>
<a href="javascript:;" id="btn_prev"></a>
<a href="javascript:;" id="btn_next"></a>
</div>
</div>
</section>
<!--flash end-->
<div id="mianboxbj">
<div class="blank35"></div>
<!--自驾游热门线路-->
<div class="dtitlebox dtitletp1"><img src="img/dtitle1.png" title="自驾游热门线路" alt="自驾游热门线路"></div>
<div class="blank20"></div>
<!--图片滚动-->
 <!--<div class="infiniteCarousel">
      <div class="wrapper">
       <ul class="imgscroll dzjypic">
         <li><a href="#"><img src="img/dzjytp1.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原1</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp2.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原2</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp3.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原3</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp4.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原4</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp1.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原5</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp2.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原6</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp3.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原7</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp4.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原8</a></h3>精彩视频--2015/9</div></li>

</ul>
</div>
</div>-->

<div id="web_color">

<div id="customer_box" class="src6"> 
<A class="st png" href="#"></A> 
<A class="sm png" href="#"></A>
<div class="src7">
<ul>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png"><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp4.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>





</ul>
</div>
</div>

</div>

<!--图片滚动 end-->
<div class="cbody">
<div class="blank30"></div>
<!--dlxhotbox-->
<div class="dlxhotbox dlxhot">
<ul class="masonry">
<li class="picyjl"><div class="photo"><img src="img/tp01.jpg" width="275" height="330"></div>
<div class="dlxtitle"><h3>寻路天下西北边疆行<br>Desert Tour</h3></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a><p>在Park Hyatt，我们允诺为您的身心、感官开启定制式的旅程。针对每一位顾客的爱好和生活方式提供个性化服务爱好和生活方式。</p>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp02.jpg" width="275" height="330"></div>
<div class="dlxtitle"><h3>寻路天下西北边疆行<br>Desert Tour</h3></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a><p>在Park Hyatt，我们允诺为您的身心、感官开启定制式的旅程。针对每一位顾客的爱好和生活方式提供个性化服务爱好和生活方式。</p>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp03.jpg" width="275" height="330"></div>
<div class="dlxtitle"><h3>寻路天下西北边疆行<br>Desert Tour</h3></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a><p>在Park Hyatt，我们允诺为您的身心、感官开启定制式的旅程。针对每一位顾客的爱好和生活方式提供个性化服务爱好和生活方式。</p>
<a href="#" class="readmore">Read more</a>
</div></li>
<li class="picyjr"><div class="photo"><img src="img/tp04.jpg" width="275" height="330"></div>
<div class="dlxtitle"><h3>寻路天下西北边疆行<br>Desert Tour</h3></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a><p>在Park Hyatt，我们允诺为您的身心、感官开启定制式的旅程。针对每一位顾客的爱好和生活方式提供个性化服务爱好和生活方式。</p>
<a href="#" class="readmore">Read more</a>
</div></li>
</ul>
</div>
<!--dlxhotbox end-->
<!--自驾游热门线路 end-->
<div class="blank40"></div>
<!--自驾游经典线路-->
<div class="dtitlebox dtitletp2"><img src="img/dtitle2.png" title="自驾游经典线路" alt="自驾游经典线路"></div>
<div class="blank20"></div>
<!--dlxhotbox-->
<div class="dlxhotbox dlxhot">
<ul class="masonry">
<li class="picyjl"><div class="photo"><img src="img/tp01.jpg" width="275" height="212"></div>
<div class="rsp hssybj1"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp02.jpg" width="275" height="212"></div>
<div class="rsp hssybj1"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp03.jpg" width="275" height="212"></div>
<div class="rsp hssybj1"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li class="picyjr"><div class="photo"><img src="img/tp04.jpg" width="275" height="212"></div>
<div class="rsp hssybj1"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
</ul>
</div>
<!--dlxhotbox end-->
</div>
<div class="blank30"></div>
<!--图片滚动-->
 <!--<div class="infiniteCarousel">
      <div class="wrapper">
       <ul class="imgscroll dzjypic">
<li><a href="#"><img src="img/dzjytp1.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp2.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp3.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp4.png" width="113" height="95"></a>
  <div class="zjylxr"><h3><a href="#">内蒙古草原</a></h3>精彩视频--2015/9</div></li>
</ul>
</div>
</div>-->

<div id="web_color">

<div id="customer_box" class="src6"> 
<A class="st png" href="#"></A> 
<A class="sm png" href="#"></A>
<div class="src7">
<ul>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png"><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp4.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>

<li class="png"><a href="#" class="png"><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp4.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>

</ul>
</div>
</div>
   </div>
</html>

💒CSS样式代码


@charset "utf-8";

/* flash */
.flashnavbox{ position:relative; width:100%; height:745px; overflow:hidden;z-index:20;}
.main_image {width:100%; height:745px;  overflow:hidden; margin:0 auto; position:relative;}
.main_image ul {width:9999px; height:745px; overflow:hidden; position:absolute; top:0; left:0}
.main_image li {float:left; width:100%; height:745px;}
.main_image li span {display:block; width:100%; height:745px}
.main_image li a {display:block; width:100%; height:745px}
div.flicking_con {width:150px; margin:0 auto; position:relative;}
div.flicking_con .flicking_inner {position:absolute; top:567px;  z-index:999; width:300px; height:21px;margin:0 auto; text-align:center;} 
div.flicking_con a {float:left; width:78px; height:8px; margin:0 7px; padding:0;background:#ffffff; display:block; text-indent:-10000px}
div.flicking_con a.on {background:#e90013;}
#btn_prev,#btn_next{z-index:11111;position:absolute;display:block;width:34px!important;height:65px!important;top:55%;display:none;}
#btn_prev{background:url(../img/anleft.png) no-repeat left top;left:160px;}
#btn_next{background:url(../img/anright.png) no-repeat right top;right:160px;}


/* 自驾游热门线路 */
.dtitlebox{background:url(../img/dtitlex.png) no-repeat center bottom; padding-bottom:30px; text-align:center; height:35px; line-height:35px; overflow:hidden; margin:0 auto; width:1100px; overflow:hidden;}
.dtitletp1 img{ margin-left:84px;}
.dtitletp2 img{ margin-left:100px;}
.dtitletp3 img{ margin-left:45px;}
.dtitletp4 img{ margin-left:8px;}
.dtitletp5 img{ margin-left:12px;}
/* 图片滚动 */
.dzjypic{ overflow:hidden; left:0;}
.dzjypic li{ float:left; display:inline; width:255px; height:105px; overflow:hidden; padding-right:20px; position:relative;}
.dzjypic li a img{ display:block; float:left;}
.dzjypic li .zjylxr{width:140px; float:right; display:inline; color:#b79e74; font-size:14px;line-height:30px;}
.dzjypic li .zjylxr h3{ font-size:24px; padding:15px 0 0 0;}
.dzjypic li .zjylxr h3 a{ color:#b79e74;}
.dzjypic li .zjylxr h3 a:hover{ color:#c12530; text-decoration:none;}

.infiniteCarousel { width:1100px; position: relative;height:105px; z-index:1000;  margin:0 auto;}
.infiniteCarousel .wrapper {width:1100px; top: 0; left:0;}
.infiniteCarousel .wrapper ul { width:1100px; margin:0; padding:0;}
.infiniteCarousel .arrow { display: block; height:19px; width:19px; text-indent: -2000px; position: absolute; top:36px;cursor: pointer; outline: 0;filter:alpha(opacity=90);  -moz-opacity:0.9;  -khtml-opacity:0.9;  opacity:0.9;}
.infiniteCarousel .forward {background:url(../img/anleft.png) no-repeat; left:-40px;}
.infiniteCarousel .back { background:url(../img/anright.png) no-repeat; right:-19px;}

.dlxhotbox{ width:1100px; overflow:hidden; margin:0 auto;}
.dlxhotbox .masonry{ width:1130px;}
.dlxhotbox li{ float:left; display:inline; overflow:hidden;position:relative;}
.dlxhotbox li img{display:block; border:0;}
.dlxhotbox li .photo{overflow:hidden;}
.dlxhot .dlxtitle{ position:absolute; text-align:center; width:275px; top:133px; color:#fffffe;}
.dlxhot .dlxtitle h3{ line-height:30px; text-align:center; font-size:18px; text-transform:uppercase; text-shadow:0 3px 3px #000000;}
.dlxhot li:hover .dlxtitle{ display:none;}
.dlxhotbox .rsp{overflow:hidden;position: absolute; background:url(../img/dzjypngbj.png) repeat top left;top:0px;left:0px;}
.dlxhot .hssybj{width:275px; height:330px;}
.dlxhot .text{position:absolute; top:40px;overflow:hidden; }
.dlxhot .hstext{left:-275px; margin:10px 20px 0 33px; color:#fffffe; width:215px;}
.dlxhot .text a{ color:#fff; padding:5px 2px; width:195px; display:block;text-align:center; line-height:20px;}
.dlxhot .text h3 { line-height:30px; text-align:center; font-size:18px; display:block;text-transform:uppercase; padding-bottom:20px;}
.dlxhot .text a:hover{color:#c12530; text-decoration:none;}
.dlxhot .text p{ padding:0px 0 20px 0;}
.dlxhot li .readmore{ width:133px; height:32px; line-height:32px; text-align:center; margin:0 0 0 40px; overflow:hidden; border:1px #ffffff solid; -moz-border-radius: 10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; font-family:Arial;}
.dlxhot li .readmore:hover{border:1px #c12530 solid; color:#c12530; text-decoration:none;}

.dlxhot .picyjl img,.dlxhot .picyjl .rsp{border-radius: 50px 0 0 0;}
.dlxhot .picyjr img,.dlxhot .picyjr .rsp{border-radius: 0 0 50px 0;}
; position:relative;}
.dgzpic li img{ display:block;}
.dgzpicul1{ width:354px; height:518px; margin-right:19px; display:inline; overflow:hidden;}
.dgzpicul1 ul,.dgzpicul2 ul{ width:400px;}
.dgzpicul1 li{ margin:0 22px 15px 0;}
.dgzpicul1 li .dgzth3{ position:absolute; font-size:36px; top:75px; left:25px; display:none;}
.dgzpicul1 li .dgzth3 h3{font-size:36px; line-height:36px; color:#ffffff; letter-spacing: 6px;}
.dgzpic .dgzbj{ display:none; background:url(../img/dzjypngbj.png) repeat top left; width:354px; height:343px;position: absolute; top:0px;left:0px;  z-index:100;  filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;}
.dgzpic .dgztext{position:absolute; top:275px; left:25px; font-size:14px; color:#ffffff; z-index:200; display:none;}
.dgzpic .dgztext a{ display:block;}
.dgzpic .dgztext h3{font-size:16px; color:#ffffff; letter-spacing: 6px; line-height:36px; padding-bottom:20px;}
.dgzpic .dgztext p{ width:300px;}
.dgzpic li:hover .dgzbj,.dgzpic li:hover .dgztext{ display:block;}
.dgzpic li:hover .dgzth3{ display:none;}
.dgzpic li a:hover h3,.dgzpic li a:hover{color:#c12530; text-decoration:none;}

.dgzpicul1 li .dgzbjwh1{width:167px; height:168px;}
.dgzpicul1 .dgztext1{position:absolute; top:110px; left:12px; font-size:12px;}
.dgzpicul1 .dgztext1 h3{font-size:16px;  line-height:30px; padding-bottom:10px;}
.dgzpicul1 .dgztext1 p{ width:155px;}

.dgzpicul1 li .dgzbjwh2{width:167px; height:168px;}
.dgzpicul1 .dgztext2{position:absolute; top:30px; left:12px; font-size:12px;}
.dgzpicul1 .dgztext1 h3{font-size:16px;  line-height:30px; padding-bottom:10px;}
.dgzpicul1 .dgztext1 p{ width:155px;}


.dgzpicul2{ width:354px;  height:518px; display:inline; overflow:hidden;}
.dgzpicul2 li{ margin:0 20px 16px 0; position:relative;}

.dgzpicul3{ width:166px; overflow:hidden;}
.dgzpicul3 li{width:166px; clear:both; margin:0 0 16px 0;}
.dgzpicul4{ width:170px; overflow:hidden;}
.dgzpicul4 li{ width:170px; float:left;}

.dgzpicul2 li .dgzbjwh2{width:354px; height:168px;}
.dgzpicul2 .dgztext2{position:absolute; top:110px; left:25px; font-size:14px;color:#ffffff; z-index:200; display:none;}
.dgzpicul2 .dgztext2 h3{font-size:16px;  line-height:30px; padding-bottom:10px;}
.dgzpicul2 .dgztext2 p{ width:300px;}

.dgzpicul2 li .dgzbjwh3{width:166px; height:159px;}
.dgzpicul2 .dgztext3{position:absolute; top:95px; left:12px; font-size:12px;color:#ffffff; z-index:200; display:none;}
.dgzpicul2 .dgztext3 h3{font-size:16px;  line-height:30px; padding-bottom:10px;}
.dgzpicul2 .dgztext3 p{ width:155px;}

.dgzpicul2 li .dgzbjwh4{width:166px; height:168px;}
.dgzpicul2 li .dgzbjwh5{width:170px; height:334px;}
.dgzpicul2 .dgztext5{position:absolute; top:270px; left:12px; font-size:12px;color:#ffffff; z-index:200; display:none;}
.dgzpicul2 .dgztext5 h3{font-size:16px;  line-height:30px; padding-bottom:10px;}
.dgzpicul2 .dgztext5 p{ width:155px;}

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

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

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

第三、学到了就要用到

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

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

web前端课程设计 基于HTML+CSS+JavaScript汽车自驾游(10个页面)