📒 web网页设计期末课程大作业:html威海影视网站首页(1页)
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
该首页代码采用了DIV盒子的布局方法，展示了盒子嵌套、浮动、边距、边框和背景等属性的运用。外部大盒子实现居中，内部布局为左右中结构，底部则是横向浮动排列。代码中涵盖了大学前端学习的知识点和布局技巧，CSS代码量丰富且细致，通过hover效果实现过渡和鼠标滑过效果。此外，页面中使用表格和表单来补充功能，方便新手学习。某些源码页面未使用JS，需者可自行添加。
涵盖个人、电影、美食、动漫、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、摄影、文化、家乡、鲜花、礼品、汽车等多个网页设计主题，能够满足大学生在网页大作业中的需求！
页面结构： 分为页头、菜单导航栏（最好支持下拉）、主要内容区域和页脚四大部分。
页面链接： 所有页面应互相超链接，支持三级页面，整体结构为5-10个页面。
样式统一： 页面样式需统一且布局正常，使用Div+CSS技术确保无错乱。
美观的菜单： 菜单设计应美观且醒目，二级菜单可正常弹出和跳转。
JS特效： 需要有如定时和手动切换的图片轮播等JS特效。
多媒体元素： 页面中应包含多媒体元素，如GIF、视频和音乐，并运用表单技术。
清爽美观： 页面设计应清新、优雅，避免雷同。
整体上，不仅要能展示用户需求的内容，还需确保良好的布局、优雅的界面、恰当的配色以及多样的表现形式。
目录导航
一、📖 作品介绍
网页作品简介： 该设计达到了HTML网页设计A++水平，部分支持手机和PC的响应式布局。
网页作品编辑： 此作品为学生网页设计类型，代码采用简单的学生水平的HTML+CSS布局制作。下载后可使用任何HTML编辑软件（如：DW、HBuilderX、Vscode、Sublime Text、Webstorm、Notepad++等）进行编辑和修改。
网页作品布局： 整体采用响应式布局，包含LOGO、导航、主体内容等布局。子页面有多种布局方式，兴趣爱好内容使用图片列表展示，成绩页面插入了表格，联系我们页面则使用了左对齐的图片布局。
网页作品技术： 使用DIV+CSS制作网页，包含背景图、音乐、视频、Flash、滚动文字、CSS特效、鼠标悬停效果、导航变色、表单提交及评论留言功能，并通过JavaScript进行表单验证（确保提交时表单不能为空）。
提示：以下是本篇文章正文内容，下面案例可供参考
二、🌐 效果演示
三、🪓 代码实现
🧱 HTML结构代码
代码如下（示例）：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>威海市影视产业服务平台</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
</head>
<body>
<div class="header_wrap ah">
<div class="wrap header">
<ul class="logo">
<a href="#"><img src="images/logo.png" alt="华视娱乐"></a>
</ul>
<ul class="nav">
<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>
<li><a href="#">项目合作</a></li>
<li><a href="#">影视人才</a></li>
<li><a href="#">影视档案</a></li>
<li><a href="#">影视展播</a></li>
</ul>
<!-- <ul class="nav-r">
<li class="search">
<form method="post" action="/index.php/content/index/pid/13.html" name="formSearch">
<input name="btn_submit" id="btn_submit" type="submit" value=""/>
<input name="sh_keywords" type="text" id="keywords" maxlength="55" autocomplete="off" />
</form>
</li>
<li class="icon"><a class="wx" href="javascript:;"></a><a class="sina" href="http://weibo.com/huashiyingshi"></a></li>
</ul> -->
<ul class="mbi_nav">
<a href="javascript:void(0)"><span></span><span></span><span></span><span></span></a>
</ul>
<ul class="language"><a href="#" style="display:none;">中文版</a> <span style="display:none;">|</span> <a href="#" style="display:none;">ENGLISH</a> <span style="display:none;">|</span> <a href="#">诚邀合作</a>
<span>|</span> <a href="#">加入我们</a> </ul>
</div>
</div>
<div class="hid_menu">
<ul>
<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>
<li><a href="#">华视动态</a></li>
</ul>
</div>
<div class="banner">
<div class="cnt">
<ul>
<li>
<img src="images/5d52d7bf775b36b8479b743a5a824f19.jpg" alt="致我们终将逝去的青春 (2013)" />
<ul>
<h3>致我们终将逝去的青春 (2013)</h3><span>改编自作家辛夷坞的同名小说，由香港导演关锦鹏担任监制，内地编剧李樯改编剧本，海峡两岸演员赵又廷、韩庚、杨子姗、江疏影、张瑶、刘雅瑟、包贝尔、郑恺、黄明、王嘉佳、佟丽娅等主演，王菲演唱主题曲《致青春》，于2013年4月26日全国公映。内地最终票房为7.2亿。</span></ul>
<p><a href="javascript:;" class="btn_video" data0="http://static.video.qq.com/TPout.swf?vid=z0011e00wzq&auto=1" data1="http://player.youku.com/player.php/sid/XNTA4NDM0NzQw/v.swf?VideoIDS=XNDA3OTM4NA=&isAutoPlay=true&isS" data2="https://www.youtube.com/v/JJCs-pgHWL8">预告欣赏</a>
<a
href="/index.php/content/index/pid/2/cid/20.html">关于作品</a>
</p>
</li>
<li>
<img src="images/ed472ad6636763e22da62194b119ef1a.jpg" alt="平凡的世界(2015)" />
<ul>
<h3>平凡的世界(2015)</h3><span>56集电视连续剧。根据路遥同名小说改编，华视团队历时8年创作、投资近1.2亿元拍摄，由著名导演毛卫宁执导，王雷、佟丽娅、袁弘、李小萌、刘威、吕一、尤勇智等主演，讲述了在面对现实压力和人生抉择时，少安少平兄弟俩依旧坚守最初梦想和对爱情执着追求的故事。该剧已于2015年2月26日在北京卫视、东方卫视首播。2015年该剧获得上海电视节第21届白玉兰奖最佳导演奖、第13届四川电视节金熊猫奖长篇电视剧类大奖和第30届中国电视剧飞天奖优秀电视剧大奖，成为年度最具重量的现象级电视剧。</span></ul>
<p><a href="/index.php/content/index/pid/3/cid/108.html">关于作品</a></p>
</li>
<li>
<img src="images/4a9b4600a20d4aacaa16aee0bc4adc85.jpg" alt="刀客家族的女人 (2014)" />
<ul>
<h3>刀客家族的女人 (2014)</h3><span>44集电视连续剧。由“白玉兰"最佳导演杨文军执导，根据董陆明《拉锯地带》小说改编，并由著名编剧张晓亚老师保驾护航，实力派演员佟丽娅、杨烁、许还幻、何赛飞、高露、毛晓彤、郭鹏、曾虹畅等主演的传奇大剧。该剧在全国一线卫视收视率夺魁，网络点击率创同类型题材第一名，并荣获华鼎奖、金牛奖、全国电视制片业十佳奖等多个海内外大奖。
</span></ul>
<p><a href="/index.php/content/index/pid/3/cid/36.html">关于作品</a></p>
</li>
<li>
<img src="images/1ed4f2fe326a627f0dd68acd10040e46.jpg" alt="六弄咖啡馆 (待映)" />
<ul>
<h3>六弄咖啡馆 (待映)</h3><span>改编自台湾畅销青春小说，原著作者“台湾青春小说天王”吴子云(笔名：藤井树)导演处女作。两届金马奖最佳男演员提名奖获得者、最具潜力的90后华语男明星董子健，香港新一代甜心小天后颜卓灵联袂领衔主演，精心缔造2016年度最受瞩目的华语青春电影扛鼎之作！影片将于7月29日在全国公映，相约影院，与你同在。</span></ul>
<p><a href="javascript:;" class="btn_video" data0="http://static.video.qq.com/TPout.swf?vid=p03080l0vm3&auto=0" data1="http://player.youku.com/player.php/sid/XMTYwNzk5MTAyNA==/v.swf" data2="">预告欣赏</a><a href="/index.php/content/index/pid/2/cid/17.html">关于作品</a></p>
</li>
<li>
<img src="images/798dc1b43cfe7dc38160d3c16271a0d3.jpg" alt="致青春 (2016)" />
<ul>
<h3>致青春 (2016)</h3><span>2016年7月11日登陆东方卫视、安徽卫视黄金档，北京卫视非黄档，优酷视频。80后最受欢迎女作家辛夷坞百万畅销原著小说改编，“白玉兰”奖金牌导演杨文军，携手最受瞩目新生代青春明星阵容杨玏、陈瑶、张丹峰、马可、徐悦等，推出 “2016非看不可的荧屏青春爆款”！</span></ul>
<p><a href="javascript:;" class="btn_video" data0="http://static.video.qq.com/TPout.swf?vid=a0310c4caiz&auto=0" data1="http://player.youku.com/player.php/sid/XMTYyNzMwMzMwNA==/v.swf" data2="">预告欣赏</a><a href="/index.php/content/index/pid/3/cid/39.html">关于作品</a></p>
</li>
</ul>
</div>
<a id="a_l" class="arr"></a>
<a id="a_r" class="arr"></a>
<div class="arr_down">
<p class="l"></p>
<p class="r"></p>
</div>
</div>
<div id="slider1" class="slider ah">
<ul id="pic_list1" class="pic_list pic2">
<li><a class="pic" style="background:url(images/5d52d7bf775b36b8479b743a5a824f19.jpg) no-repeat center; background-size:cover;"></a><a title="致我们终将逝去的青春 (2013)" class="txt"><b>致我们终将逝去的青春 (2013)</b><span>改编自作家辛夷坞的同名小说，由香港导演关锦鹏担任监制，内地编剧李樯改编剧本，海峡两岸演员赵又廷、韩庚、杨子姗、江疏影、张瑶、刘雅瑟、包贝尔、郑恺、黄明、王嘉佳、佟丽娅等主演，王菲演唱主题曲《致青春》，于2013年4月26日全国公映。内地最终票房为7.2亿。</span></a></li>
<li><a class="pic" style="background:url(images/ed472ad6636763e22da62194b119ef1a.jpg) no-repeat center; background-size:cover;"></a><a title="平凡的世界(2015)" class="txt"><b>平凡的世界(2015)</b><span>56集电视连续剧。根据路遥同名小说改编，华视团队历时8年创作、投资近1.2亿元拍摄，由著名导演毛卫宁执导，王雷、佟丽娅、袁弘、李小萌、刘威、吕一、尤勇智等主演，讲述了在面对现实压力和人生抉择时，少安少平兄弟俩依旧坚守最初梦想和对爱情执着追求的故事。该剧已于2015年2月26日在北京卫视、东方卫视首播。2015年该剧获得上海电视节第21届白玉兰奖最佳导演奖、第13届四川电视节金熊猫奖长篇电视剧类大奖和第30届中国电视剧飞天奖优秀电视剧大奖，成为年度最具重量的现象级电视剧。</span></a></li>
<li><a class="pic" style="background:url(images/4a9b4600a20d4aacaa16aee0bc4adc85.jpg) no-repeat center; background-size:cover;"></a><a title="刀客家族的女人 (2014)" class="txt"><b>刀客家族的女人 (2014)</b><span>44集电视连续剧。由“白玉兰"最佳导演杨文军执导，根据董陆明《拉锯地带》小说改编，并由著名编剧张晓亚老师保驾护航，实力派演员佟丽娅、杨烁、许还幻、何赛飞、高露、毛晓彤、郭鹏、曾虹畅等主演的传奇大剧。该剧在全国一线卫视收视率夺魁，网络点击率创同类型题材第一名，并荣获华鼎奖、金牛奖、全国电视制片业十佳奖等多个海内外大奖。
</span></a></li>
<li><a class="pic" style="background:url(images/1ed4f2fe326a627f0dd68acd10040e46.jpg) no-repeat center; background-size:cover;"></a><a title="六弄咖啡馆 (待映)" class="txt"><b>六弄咖啡馆 (待映)</b><span>改编自台湾畅销青春小说，原著作者“台湾青春小说天王”吴子云(笔名：藤井树)导演处女作。两届金马奖最佳男演员提名奖获得者、最具潜力的90后华语男明星董子健，香港新一代甜心小天后颜卓灵联袂领衔主演，精心缔造2016年度最受瞩目的华语青春电影扛鼎之作！影片将于7月29日在全国公映，相约影院，与你同在。</span></a></li>
<li><a class="pic" style="background:url(images/798dc1b43cfe7dc38160d3c16271a0d3.jpg) no-repeat center; background-size:cover;"></a><a title="致青春 (2016)" class="txt"><b>致青春 (2016)</b><span>2016年7月11日登陆东方卫视、安徽卫视黄金档，北京卫视非黄档，优酷视频。80后最受欢迎女作家辛夷坞百万畅销原著小说改编，“白玉兰”奖金牌导演杨文军，携手最受瞩目新生代青春明星阵容杨玏、陈瑶、张丹峰、马可、徐悦等，推出 “2016非看不可的荧屏青春爆款”！</span></a></li>
</ul>
</div>
<div class="footer">
<div class="foot-nav">
<a href="http://www.whcaijing.net"> 旗 下 控 股</a>|<a href="/index.php/content/index/pid/8.html"> 联 系 我 们</a>|<a href="/index.php/content/index/pid/9.html"> 加 入 我 们</a>|<a href="javascript:fl();"> 法 律 声 明</a> </div>
<div class="foot-copy">Copyright © HS Entertainment All Rights Reserved. </div>
</div>
<div class="flsm ah">
<a class="flsm_close">×</a>
<ul class="flsm_in"><br />
<span style="font-size:24px;"><strong>法律声明</strong></span><br />
<p>
<span style="font-size:14px;"><br />
</span>
</p>
<p>
本网站域名、标识的著作权及相关权利均属威海市影视产业服务公共平台所有，任何人不得擅自使用，亦不得以类似或近似域名、标识、商号、名称等任何形式做混淆使用。
</p>
<p>
<br />
</p>
<p>
本网站上刊载的所有内容，包括但不限于文字报道、图片、声音、录像、图表、标志、标识、广告、商标、商号、域名、软件、程序、版面设计、专栏目录与名称、内容分类标准以及为注册用户提供的任何信息，均受《中华人民共和国著作权法》、《中华人民共和国商标法》、《中华人民共和国专利法》及适用之国际公约中有关著作权、商标权、专利权及／或其它财产所有权法律的保护，为<span>华视娱乐投资集团股份有限公司</span>和／或相关权利人专属所有或持有。
</p>
<p>
<br />
</p>
<p>
凡本网站刊载的未注明来源的所有文字、图片、图表、音频、视频等网上内容，版权属于<span>威海市影视产业服务公共平台</span>和／或相关权利人所有，任何媒体、网站或个人未经<span>威海市影视产业服务公共平台</span>书面授权不得转载、引用、摘编或利用其它方式使用上述作品；已经书面授权的，应在授权范围内使用，并注明来源。违反上述声明者，将被追究相关法律责任。
</p>
<p>
<br />
</p>
<p>
本网站注明来源的作品均为转载稿，本网站转载并不意味着认同其观点或真实性。如其他媒体、网站或个人转载使用，须保留本网站注明的“稿件来源”，并自负法律责任。
</p>
<p>
<br />
</p>
<p>
未经<span>威海市影视产业服务公共平台</span>的书面许可，任何人不得变更、发行、播送、转载、复制、重制、改动、散布、表演、展示或利用本网站的局部或全部的内容或服务或在非本网站所属的服务器上作镜像，否则以侵权论，依法追究法律责任。
</p>
<p>
<br />
</p>
未经<span>威海市影视产业服务公共平台</span>的书面许可，任何人不得以任何形式在国际互联网上变更、发行、播送、转载、复制、重制、改动、散布、表演、展示本网站的所有视频资源和捕捉视频资源而形成的图像，否则将视作侵权，依法追究法律责任。<br />
<span style="font-size:14px;"></span><br /></ul>
</div>
<script>
<!--
$(function() {
$(".mbi_nav").click(function(e) {
if ($(".hid_menu").is(':hidden'))
$(".hid_menu").slideDown();
else
$(".hid_menu").slideUp();
e.stopPropagation();
});
$("body").click(function(e) {
$(".hid_menu").hide();
e.stopPropagation();
});
$('.ewm a').click(function() {
$('.ewm').hide();
});
$('.wx').click(function() {
$('.ewm').show();
});
});
function fl() {
$(".flsm").show();
$(".flsm").height($(document).height());
$(window).scrollTop(0);
}
$('.flsm_close').click(function() {
$(".flsm").hide();
});
-->
</script>
<div class="ewm"><a>×</a><img src="images/15b089be07a74ba468924527a36e7bdf.jpg" /></div>
<script>
<!--
var bAuto = true;
$(function() {
var lw;
function rz() {
var sw = $(window).width();
w = sw / 5;
lw = w - 10;
$('#slider1 li').width(lw);
$('#slider1 li').height(lw * 0.65 + $('#slider1 li span').height() + 45);
$('#slider1 li a.pic').height(lw * 0.65);
$('.banner li').width(sw);
var minHeight = 0;
scr()
}
rz();
$(window).resize(rz);
var nCur = 0;
var cn = $('#pic_list1 li').length - 1;
var nd = cn + 1;
$('#pic_list1').append($('#pic_list1').html());
$('#slider1').scrollLeft((lw + 10) * (cn - 1));
var w = $('#slider1 li').width() + 10;
$("#a_l").click(function() {
nd--;
scr();
});
$("#a_r").click(function() {
nd++;
scr();
});
$("#pic_list1 li").click(function() {
nd = $(this).index();
scr();
});
var t = setInterval(function() {
if (bAuto) $("#a_r").click();
}, 5000);
$('.banner').hover(function() {
bAuto = false;
}, function() {
bAuto = true;
});
function scr() {
var sw = $(window).width();
if (nd - cn > 2) {
nd = nd - cn - 1;
} else if (nd < 3) {
nd = cn + nd + 1;
}
$('#slider1').scrollLeft((lw + 10) * (nd - 2));
if (nd > cn) {
nCur = nd - cn - 1;
} else {
nCur = nd;
}
//alert(sw)
$('.cnt').stop().animate({
scrollLeft: nCur * sw
});
}
});
-->
</script>
<div id="video_pannel">
<dl>
<dt></dt>
<dd><a href="#" class="on">腾讯视频</a><a href="#">优酷视频</a><a href="#">YouTube视频</a></dd>
</dl>
</div>
<link href="css/jquery.fancybox.css" type="text/css" rel="stylesheet">
<script src="js/jquery.fancybox.pack.js" type="text/javascript"></script>
<script>
<!--
$(function() {
var curObject = null;
$('.btn_video').click(function() {
bAuto = false;
curObject = $(this);
var d = $(this).attr("data0");
//$("#video_pannel").html('<video id="media" width="100%" height="100%" autoplay="true" controls><source src="' + d + '" id="v_src"></video>');
$("#video_pannel dt").html('<embed src="' + d + '" allowFullScreen="true" quality="high" width="100%" height="100%" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>');
$.fancybox('#video_pannel', {
padding: 0
});
$("#video_pannel dd").show();
});
$('#video_pannel dd a').click(function() {
var n = $(this).index();
var d = curObject.attr("data" + n);
$("#video_pannel dt").html('<embed src="' + d + '" allowFullScreen="true" quality="high" width="100%" height="100%" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>');
$('#video_pannel dd a').removeClass('on');
$(this).addClass('on');
});
function video_rz() {
var w = $(window).width() * 0.65;
$('#video_pannel').width(w);
$('#video_pannel dt').height(w * 0.65);
}
video_rz();
$(window).resize(video_rz);
});
-->
</script>
</body>
</html>
🏠 CSS样式代码
代码如下（示例）：
/*
* jQuery FlexSlider v2.2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
outline: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides>li {
display: none;
-webkit-backface-visibility: hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
width: 100%;
display: block;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides>li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
margin: 0 0 0;
background: #fff;
position: relative;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.flexslider .slides {
zoom: 1;
}
.carousel li {
margin-right: 5px;
}
/* Direction Nav */
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 30px;
height: 48px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
background: url(../images/arr.png) no-repeat;
text-indent: -999em
}
.flex-direction-nav .prev {
left: -50px;
background-position: 0 0
}
.flex-direction-nav .next {
right: -50px;
background-position: -132px 0
}
.flexslider:hover .prev {
opacity: 0.7;
left: 10px;
}
.flexslider:hover .next {
opacity: 0.7;
right: 10px;
}
.flexslider:hover .next:hover,
.flexslider:hover .prev:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0 !important;
filter: alpha(opacity=0);
cursor: default;
}
/* Pause/Play */
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
background: #ddd
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a.flex-play:before {
content: '\f003';
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: 20px;
text-align: center;
z-index: 99
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-nav li a {
width: 15px;
height: 15px;
display: block;
background: #666;
cursor: pointer;
text-indent: -9999px;
border-radius: 50%
}
.flex-control-nav li a.active {
background: #fff;
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
@media screen and (max-width: 860px) {
.flex-direction-nav .prev {
opacity: 1;
left: 10px;
}
.flex-direction-nav .next {
opacity: 1;
right: 10px;
}
}
四、📁 目录结构
├── css
│ ├── flexslider.css
│ ├── index.css
│ ├── jquery.fancybox.css
│ └── style.css
├── images
│ ├── 15b089be07a74ba468924527a36e7bdf.jpg
│ ├── 1ed4f2fe326a627f0dd68acd10040e46.jpg
│ ├── 4a9b4600a20d4aacaa16aee0bc4adc85.jpg
│ ├── 5d52d7bf775b36b8479b743a5a824f19.jpg
│ ├── 798dc1b43cfe7dc38160d3c16271a0d3.jpg
│ ├── a_l.png
│ ├── a_r.png
│ ├── arr.png
│ ├── ed472ad6636763e22da62194b119ef1a.jpg
│ ├── logo.png
│ └── white.png
├── index.html
└── js
├── jquery-1.8.3.min.js
├── jquery.fancybox.pack.js
└── jquery.flexslider-min.js
五、💡 博主建议
第一，明确学习目标
在进行学习时，无论是通过阅读、参加课程还是参与线下活动，都要设定清晰的目标。思考你想要解决的问题或希望实现的具体目标，这样能够更有针对性地进行学习。
第二，从实战中学习
单纯的理论学习往往难以记忆和应用，因此实践是关键。初学者可以通过模仿和重写已有的代码来加深理解。实战经验不仅能巩固基础，还能快速提升技能。
第三，建立个人知识体系
知识无穷无尽，面对浩瀚的书籍和信息，我们需要理清思路，避免迷失。每一个知识点都有其特定的背景和边界，通过归纳和整理，可以形成自己的知识体系，帮助更好地理解和应用。
第四，将所学应用于实践
学到的知识必须与实际工作和生活结合起来。每天学习的新知识应当与现实情况联系，通过实践来验证和深化理解。热爱学习是值得赞扬的，但能有效应用知识的人才是真正有价值的。
六、🎁 更多作品
如果我的博客对你有所帮助，或者你喜欢我的内容，请别忘了“👍点赞”、“✍️评论”和“❤️收藏”，支持我一下哦！
关注我获取更多源码，这里有丰富的前端插件、炫酷的3D效果、图片展示、文字效果，以及整站模板、大学生毕业HTML模板、期末大作业模板等！在这里，许多前端开发者聚集在一起，共同探讨前端和Node知识，互相学习！
👇🏻👇🏻👇🏻对于上述技术相关的技术问题有不懂的，欢迎随时免费交流学习👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
