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

news2025/1/17 3:17:59

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

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

📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、⚙️ 网站代码
    • 🧱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代码）。

四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、⚙️ 网站代码

🧱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 知识，互相学习」！

3.

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/85271.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

web前端网页设计期末课程大作业：中华传统文化题材网页源码——基于HTML实现中国水墨风书画艺术网站(12个页面)

web前端网页设计期末课程大作业：中华传统文化题材网页源码——基于HTML实现中国水墨风书画艺术网站(12个页面)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
关于自动化测试的误区——希望能帮助新手正确的了解自动化一些概念。

关于自动化测试的误区——希望能帮助新手正确的了解自动化一些概念。

自动化测试作为软件测试的一种技术手段&#xff0c;时常被大家讨论。本人在自动化技术方面有过略有小成&#xff0c;今天聊一聊关于自动化的一些误区&#xff0c;以帮助新手能正确的了解和认识自动化一些概念。 测试的行为本质是什么&#xff1f; 为什么先从这个概念开始谈起…
阅读更多...
React 入门：实战案例 TodoList 删除一条 Item

React 入门：实战案例 TodoList 删除一条 Item

文章目录目标实现效果实现思路实现步骤第一步&#xff1a;App 组件中定义删除 Todo 的组件方法第二步&#xff1a;App 组件通过 props 传递删除 Todo 的方法到子组件 List第三步&#xff1a;List 组件接收删除 Todo 的方法&#xff0c;并传递给 Item 子组件第四步&#xff1a;I…
阅读更多...
JAVA毕业设计——基于Springboot+vue的图书管理系统(源代码+数据库)

JAVA毕业设计——基于Springboot+vue的图书管理系统(源代码+数据库)

github代码地址 https://github.com/ynwynw/bookmanage2-public 毕业设计所有选题地址 https://github.com/ynwynw/allProject 基于Springbootvue的图书管理系统(源代码数据库) 一、系统介绍 本项目分为管理员与普通用户两种角色 体实现功能如下: 用户系统权限控制管理:主要…
阅读更多...
热插拔技术--以ADM1177为例说明

热插拔技术--以ADM1177为例说明

综述 ADM1177是一款热插拔控制器&#xff0c;并且还支持电压电流采集&#xff08;12bitADC&#xff09;和传输(IIC).本文着重说明热插拔技术&#xff0c;所以仅说明ADM热插拔处理过程&#xff0c;对于ADC和IIC部分不予说明&#xff0c;请读者自行研究。 热插拔的应用背景 服务…
阅读更多...
【GRU回归预测】基于粒子群优化门控循环单元PSO-GRU神经网络实现多输入单输出回归预测附matlab代码

【GRU回归预测】基于粒子群优化门控循环单元PSO-GRU神经网络实现多输入单输出回归预测附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …
阅读更多...
SeleniumUI自动化的POM三层架构

SeleniumUI自动化的POM三层架构

目录 1、定义log.py日志 2、在基础封装层初始化类uitls.__init__.py中选择了日志的打印级别, 3、定义页面基础类base_page.py&#xff0c;定义了页面找元素的方法&#xff0c; 4、将百度页面的元素以代码形式保存&#xff0c;baidu.py 5、重新封装浏览器方法, browser.py …
阅读更多...
ChatGPT版微信个人号搭建流程

ChatGPT版微信个人号搭建流程

[TOC] 参考链接&#xff1a; github仓库 准备服务器 进入腾讯云服务器官网&#xff0c;搜索“轻量应用服务器”立即选购 注意&#xff0c;地区要选海外&#xff0c;镜像选Docker镜像 购买之后&#xff0c;就进入控制台 然后登陆到shell 安装部署 查看一下docker&#xff0…
阅读更多...
【探索Spring底层】11.切点匹配

【探索Spring底层】11.切点匹配

文章目录1. 前言2. 给一个类中的其中一个方法增强3. 根据注解给方法增强4. Spring中Transactional的底层实现1. 前言 这里主要讲述一些切点匹配的相关例子&#xff0c;其主要是关于切点表达式匹配的实现。 主要有三种例子&#xff1a; 给一个类中的其中一个方法增强根据注解…
阅读更多...
Gitee创建自己的仓库并且上传项目

Gitee创建自己的仓库并且上传项目

Gitee创建自己的仓库并且上传项目前言在码云上创建仓库上传项目到远程仓库前言 之前用了一段时间的Gitee&#xff08;码云&#xff09;一直想写一篇文章记录下&#xff0c;结果赶上世界杯 被人把苦茶子给抢走了。。。正好这几天筹钱&#xff0c;那就简单记录下。 这里的Git的安…
阅读更多...
[附源码]Python计算机毕业设计动漫网站Django（程序+LW）

[附源码]Python计算机毕业设计动漫网站Django（程序+LW）

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…
阅读更多...
机器人开发--Pepperl+Fuchs倍加福激光雷达系列

机器人开发--Pepperl+Fuchs倍加福激光雷达系列

机器人开发--PepperlFuchs倍加福激光雷达系列1 介绍2 R2000系列2.1 按键操作2.2 测量方法2.3 协议2.3.1 文档2.3.2 特点2.3.3 控制 HTTP收发报文格式get_protocol_info设置传感器参数list_parameters – list parametersget_parameter – read a parameterset_parameter – cha…
阅读更多...
springboot simple （10） springboot protobuf

springboot simple （10） springboot protobuf

教程列表&#xff1a; springboot simple&#xff08;0&#xff09; springboot简介 springboot simple&#xff08;1&#xff09; springboot Helloworld springboot simple&#xff08;2&#xff09; springboot Starter springboot simple&#xff08;3 &#xff09;spri…
阅读更多...
Flutter Web CORS问题

Flutter Web CORS问题

Flutter Web CORSCORS 相关概念协议请求跨域问题App2WebCodingAppCORS 相关概念 关于 CORS 概念&#xff0c;可参考 mozilla 的相关文档资料&#xff1a; Cross-Origin Resource Sharing (CORS)Reason: CORS header ‘Access-Control-Allow-Origin’ missing An example of …
阅读更多...
震撼发布，快鲸企微工单任务管理系统上线了

震撼发布，快鲸企微工单任务管理系统上线了

快鲸推出的企微SCRM系统被大家所熟知&#xff0c;这是一款帮助企业通过企微维护客户的管理系统。在客户管理服务过程中&#xff0c;很多企业需要通过工单来进行事项处理和文件内容流转&#xff0c;为了满足这方面客户的需求&#xff0c;快鲸工单系统也应运而生。 品牌都将客户的…
阅读更多...
关于json的集合接收和多表关联查询

关于json的集合接收和多表关联查询

文章目录一、json的接收与发送1.postman工具发送格式2.controller接收处理二、查询集合数据1.利用mybatis-plus进行分页处理三.读取数据配置mapper.xml输出结果提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、json的接收与发送 1.postman工具发送格…
阅读更多...
selenium之鼠标操作详解

selenium之鼠标操作详解

前言 人类频繁的用手操作鼠标和键盘&#xff0c;为了解决这个问题&#xff0c;selenium工具为我们提供了一个类来处理这些事件— Actionchains &#xff0c;该类可以完成鼠标移动&#xff0c;鼠标点击事件、键盘输入、内容菜单交互等交互行为。 1、常见的鼠标操作有&#xff1…
阅读更多...
DSPE-Thiol； DSPE-SH； 二硬脂酰磷脂酰乙醇胺改性巯基

DSPE-Thiol； DSPE-SH； 二硬脂酰磷脂酰乙醇胺改性巯基

名称&#xff1a;DSPE-Thiol DSPE-SH 全称&#xff1a;18:0 PE Thiol 中文名称&#xff1a;二硬脂酰磷脂酰乙醇胺改性巯基 结构式: 外观&#xff1a;白色粉末 溶剂&#xff1a;HCCl3及其他有机溶剂 反应基团&#xff1a;马来酰亚胺&#xff0c;可以跟任何带有马来酰亚胺活…
阅读更多...
【计算机毕业设计】html学生管理系统 OA管理系统设计与实现 HTML网页设计结课作业

【计算机毕业设计】html学生管理系统 OA管理系统设计与实现 HTML网页设计结课作业

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
[附源码]Nodejs计算机毕业设计基于JAVA语言的宠物寄养管理Express(程序+LW)

[附源码]Nodejs计算机毕业设计基于JAVA语言的宠物寄养管理Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置&#xff1a; Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023