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

时间:2022-11-14 09:57:44


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

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


????文章目录

  • ​​一、????‍????网站题目​​
  • ​​二、✍️网站描述​​
  • ​​三、????网站介绍​​
  • ​​四、????网站演示​​
  • ​​五、⚙️ 网站代码​​
  • ​​????HTML结构代码​​
  • ​​????CSS样式代码​​
  • ​​六、???? 如何让学习不再盲目​​
  • ​​七、????更多干货​​

一、????‍????网站题目

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


二、✍️网站描述

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

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

  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代码)。


四、????网站演示

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








五、⚙️ 网站代码

????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 >
<!--head-->
<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" 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 ><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:;" ></a>
<a href="javascript:;" ></a>
</div>
</div>
</section>
<!--flash end-->
<div >
<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 >

<div 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 >

<div 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 知识,互相学习」!

3.

以上内容技术相关问题????欢迎一起交流学习????????????????????????????


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