目录
前言
红色文化传媒公司网页设计实例，应用html+css+js： Div、导航栏、图片轮翻效果、鼠标滑动特效、视频、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。
一、网页概述
网页布局为“同字型”的响应式布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验。
本实例应用html+css+js:div、导航条、Banner、图片轮翻效果、鼠标滑动特效、Table、悬浮菜单、留言表单、注册页面、登录页面、背景特效、搜索等Div、导航栏、图片轮翻效果、鼠标滑动特效、视频、搜索等。
支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含20个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品质生活栏目组</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="top">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="tel"><img src="images/tel.jpg" /></div>
</div>
<div class="dh">
<ul>
<a href="index.html"><li class="current">网站首页</li></a>
<a href="company.html"><li>公司简介</li></a>
<a href="road.html"><li>企业之路</li></a>
<a href="video.html"><li>营销型视频</li></a>
<a href="brand.html"><li>品牌提升片</li></a>
<a href="picture.html"><li>产品销售片</li></a>
<a href="join.html"><li>招商加盟</li></a>
<a href="center.html"><li>案例中心</li></a>
<a href="team.html"><li>栏目团队</li></a>
<a href="news.html"><li>新闻动态</li></a>
</ul>
</div>
<!-- banner图片开始 -->
<div class="main_visual">
<div class="flicking_con">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="main_image">
<ul>
<li><span class="img_1"></span></li>
<li><span class="img_2"></span></li>
<li><span class="img_3"></span></li>
<li><span class="img_4"></span></li>
</ul>
<a href="javascript;" id="btn_prev"></a>
<a href="javascript;" id="btn_next"></a>
</div>
</div>
<!-- banner图片结束 -->
<!-- 产品体系开始 -->
<div class="prodect">
<div class="prodect_blank"> </div>
<div class="prodect_search">
<div class="search_kuang">
<form action="#">
<input type="text" style="width:228px; height:24px; border:none; background:url(images/search.jpg) no-repeat; padding-left:5px" />
</form>
</div>
<a href="#"><div class="search_button"></div></a>
<div class="search_link"><a href="#">营销视频</a> <a href="#">视频推广</a> <a href="#">案例中心</a> <a href="#">资深团队</a></div>
</div>
<div class="prodect_blank1"></div>
<div class="prodect_top" style="font-family:'微软雅黑'">营销型电视栏目视频 <strong>产品体系</strong></div>
<div class="prodect_blank1"></div>
<div class="prodect_pic">
<div class="prodect_xx">
<ul>
<a href="#"><li><div class="prodect_wz"></div><div class="prodect_wz2">记录全球华商的成长历程，<br />点亮智慧人生，分享品质生活</div></li></a>
</ul>
</div>
<div class="prodect_cp">
<ul>
<a href="#"><li><div class="prodect_wz"></div><div class="prodect_wz2">提升企业品牌的价值<br />让您的客户信任您</div></li></a>
</ul>
</div>
<div class="prodect_zs">
<ul>
<a href="#"><li><div class="prodect_wz"></div><div class="prodect_wz2">让每一个产品都与众不同，<br />从此塑造价值不再是难题</div></li></a>
</ul>
</div>
<div class="prodect_sp">
<ul>
<a href="#"><li><div class="prodect_wz"></div><div class="prodect_wz2">帮您铺开市场渠道，<br />让您快速抢占市场份额</div></li></a>
</ul>
</div>
<div class="prodect_tg">
<ul>
<a href="#"><li><div class="prodect_wz"></div><div class="prodect_wz2">让您的客户找到您，<br />让销售变得更简单</div></li></a>
</ul>
</div>
</div>
<div class="prodect_wz3" style="font-family:'微软雅黑'; letter-spacing:3px; color:#393939; font-weight:600">电视栏目营销型视频您值得拥有<br /><span style="font-size:15px; letter-spacing:1px;">全国咨询额、热线：<span style="color:#e10100">010-57296057</span></span></div>
</div>
<!-- 产品体系结束 -->
<!-- 选择理由开始 -->
<div class="reason">
<div class="reason_wz"></div>
<div class="reason_wz" style="font-family:'微软雅黑'; letter-spacing:8px;">选择品质生活 <span style="color:#ba0005; font-weight:bold">四大理由</span></div>
</div>
<!-- 选择理由结束 -->
<!-- 第一个原因开始 -->
<div class="reason1">
<div class="reason1_blank"></div>
<div class="reason1_wz" style="font-family:'微软雅黑'; font-weight:bold;">节目与宣传片结合 主持人专访！</div>
<div class="reason1_wz1">
☆ 15年影视营销经验，营销型视频始创者<br />
☆ 全国最大网络营销培训集团-单仁资讯唯一官方指定的营销型视频服务机构<br />
☆ 国内首家建立营销型视频理论体系的专业影视制作机构<br />
☆ 国内唯一一家集制作与推广服务为一体的视频营销机构<br />
☆ 服务过世界500强企业 ，帮助过上千家客户实现销售提升</div>
</div>
<!-- 第一个原因结束 -->
<!-- 第二个原因开始 -->
<div class="reason2">
<div class="reason2_nr">
<div class="reason2_blank"></div>
<div class="reason2_wz" style="font-family:'微软雅黑'; font-weight:bold;">宣传片播出带有电视台台标</div>
<div class="reason2_wz1">
☆ 联合创作团队——覆盖中国八大经济区、20个城市<br />
☆ 拥有专业编剧、创意总监、资深策划人等独立合伙人30余名<br />
☆ 一线制作团队——50个签约导演和独立制片人<br />
☆ 100余家专业联动制作机构；30余个分布式后期制作机房
</div>
</div>
</div>
<!-- 第二个原因结束 -->
<!-- 第三个原因开始 -->
<div class="reason3_blank"></div>
<div class="reason3">
<div class="reason1_blank"></div>
<div class="reason1_wz" style="font-family:'微软雅黑'; font-weight:bold;">拥有专业的团队人员</div>
<div class="reason1_wz1">
☆ 30个官方合作视频发布平台<br />
☆ 400家中央及地方新闻营销网站<br />
☆ 150个最具人气的社区媒体<br />
☆ 微博微信六亿粉丝发布平台<br />
☆ 10个网络碎片化流量广告联盟平台
</div>
</div>
<!-- 第三个原因结束 -->
<!-- 第四个原因开始 -->
<div class="reason4">
<div class="reason2_nr">
<div class="reason4_blank"></div>
<div class="reason4_wz" style="font-family:'微软雅黑'; font-weight:bold;">强大的增值服务系统</div>
<div class="reason4_wz1">
☆ 视频全网推广系统<br />
☆ 每月定期视频推广培训课程<br />
☆ 为客户视频建档，免费提供升级修改服务<br />
☆ 官网上优酷视频去广告代码
</div>
</div>
</div>
<!-- 第四个原因结束 -->
<!-- 流程图开始 -->
<div class="process" style="font-family:'微软雅黑'">品质生活六大服务流程</div>
<div class="process_pic">
<a class="process_pic1" href="#"><img src="images/8-1.png" width="132px" height="178px" /><span><div class="process_newnr">营销策划<p>帮您做定位分析，提炼产品差异化卖点，明确消费客群；帮您梳理营销模型，并制定营销策划方案。</p></div></span></a>
<a class="process_pic2" href="#"><img src="images/8-1.png" width="132px" height="178px" /><span><div class="process_newnr">创意思路<p>根据营销策划方案制定创意脚本，让产品的卖点和品牌观念更易传播和更易被消费者记忆。</p></div></span></a>
<a class="process_pic2" href="#"><img src="images/8-1.png" width="132px" height="178px" /><span><div class="process_newnr">拍 摄<p>专业摄制组团队根据创意脚本进行拍摄。</p></div></span></a>
<a class="process_pic2" href="#"><img src="images/8-1.png" width="132px" height="178px" /><span><div class="process_newnr">后期制作<p>根据创意脚本完成成片制作。</p></div></span></a>
<a class="process_pic2" href="#"><img src="images/8-1.png" width="132px" height="178px" /><span><div class="process_newnr">网络推广和电视展播<p>帮助您在优酷、酷6、土豆等视频网站推广视频并优化到百度首页。</p></div></span></a>
<a class="process_pic2" href="#"><img src="images/8-1.png" width="132px" height="178px" /><span><div class="process_newnr">推广培训<p>把全网推广的方法通过半天的时间培训交付给客户团队。</p></div></span></a>
</div>
<div class="process_blank"></div>
<!-- 流程图结束 -->
<!-- 分割虚线开始 -->
<div class="dotton_line"></div>
<!-- 分割虚线结束 -->
<!-- 经常遇见的问题开始 -->
<div class="problem_top"></div>
<div class="problem_pic"></div>
<!-- 经常遇见的问题结束 -->
<!-- 分割虚线开始 -->
<div class="dotton_line2"></div>
<!-- 分割虚线结束 -->
<!-- 合作伙伴开始 -->
<div class="links_blank"></div>
<div class="links_title"></div>
<div class="links_blank"></div>
<div class="links">
<ul>
<a href="#"><li><img src="images/cctv.jpg" /><br />品质生活合作伙伴_中央电视台</li></a>
<a href="#"><li><img src="images/cctv2.jpg" /><br />品质生活合作伙伴_央视网</li></a>
<a href="#"><li><img src="images/BTV.jpg" /><br />品质生活合作伙伴_BTV官网</li></a>
<a href="#"><li><img src="images/hd_news.jpg" /><br />品质生活合作伙伴_海淀新闻</li></a>
<a href="#"><li><img src="images/sina.jpg" /><br />品质生活合作伙伴_新浪</li></a>
<a href="#"><li><img src="images/qq_pic.jpg" /><br />品质生活合作伙伴_腾讯</li></a>
<a href="#"><li><img src="images/youku.jpg" /><br />品质生活合作伙伴_优酷</li></a>
<a href="#"><li><img src="images/tudou.jpg" /><br />品质生活合作伙伴_土豆</li></a>
<a href="#"><li><img src="images/ku6.jpg" /><br />品质生活合作伙伴_酷六</li></a>
<a href="#"><li><img src="images/56.jpg" /><br />品质生活合作伙伴_56视频</li></a>
</ul>
</div>
<div class="links_blank"></div>
<!-- 合作伙伴结束 -->
<!-- 新闻动态开始 -->
<div class="news">
<div class="news_blank"></div>
<div class="newsa">
<div class="news_into">
<div class="news_into_title">公司动态 / <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">INTO ZHONGSHI</span></div>
<div class="news_into_pic"><img src="images/into.jpg" /></div>
<div class="news_into_nr">
...
2.CSS
代码如下（节选示例）：
*{ text-decoration:none; margin:0; padding:0; list-style-type:none;}
body{ font-size:12px; color:#666; background:url(../images/pp.jpg) repeat-x; }
img{border:none;}
a{color:#666}
.top{width:1000px; height:150px; margin:auto;}
.logo{width:649px; height:89px; float:left; margin-top:35px}
.tel{width:296px; height:64px; float:right; margin-top:45px;}
.dh{width:1000px; height:40px; margin:auto}
.dh ul li{float:left; list-style-type:none; width:100px; height:40px; line-height:40px; text-align:center; color:white; font-size:14px;}
.dh ul li:hover , .current{background:url(../images/daohang_hover.jpg); font-weight:bold}
.prodect{width:100%; height:665px; background:url(../images/prodect_bg.jpg) center;}
.prodect1{width:100%; height:665px; background:url(../images/prodect_bg1.jpg) center;}
.prodect_blank{width:1000px; height:26px; margin:auto;}
.prodect_blank1{width:1000px; height:50px; margin:auto;}
.prodect_blank2{width:1000px; height:20px; margin:auto;}
.prodect_search{width:980px; height:24px; margin:auto; }
.search_kuang{width:228px; height:24px; background:url(../images/search.jpg) no-repeat; float:left}
.search_button{width:47px; height:24px; background:url(../images/search_button.jpg) no-repeat; float:left; margin-left:10px;}
.search_link{width: 360px; height:24px; line-height:36px; float:left; text-align:center;}
.search_link a:hover{ text-decoration:underline;}
.prodect_top{width:700px; height:60px; line-height:60px; text-align:center; font-size:40px; margin:auto; color:#c70100; letter-spacing:10px;}
.prodect_pic{width:1000px; height:390px; margin:auto;}
.prodect_xx{width:159px; height:334px; float:left;}
.prodect_xx ul li{width:171px; height:357px; float:left; background:url(../images/prodect_xx.jpg) no-repeat;}
.prodect_xx ul li:hover{background:url(../images/prodect_xxa.jpg) no-repeat;}
.prodect_wz{width:159px; height:20px; line-height:20px; text-align:center; font-size:15px; font-weight:bold; color:#c70100; margin-top:160px;}
.prodect_wz2{width:159px; height:40px; line-height:20px; text-align:center; margin-top:20px;}
.prodect_cp{width:159px; height:334px; float:left; margin-left:50px;}
.prodect_cp ul li{width:159px; height:334px; float:left; background:url(../images/prodect_cp.jpg) no-repeat;}
.prodect_cp ul li:hover{background:url(../images/prodect_cpa.jpg) no-repeat;}
.prodect_zs{width:159px; height:334px; float:left; margin-left:50px;}
.prodect_zs ul li{width:159px; height:334px; float:left; background:url(../images/prodect_zs.jpg) no-repeat;}
.prodect_zs ul li:hover{background:url(../images/prodect_zsa.jpg) no-repeat;}
.prodect_sp{width:159px; height:334px; float:left; margin-left:50px;}
.prodect_sp ul li{width:159px; height:334px; float:left; background:url(../images/prodect_sp.jpg) no-repeat;}
.prodect_sp ul li:hover{background:url(../images/prodect_spa.jpg) no-repeat;}
.prodect_wz3{width:1000px; height:80px; line-height:40px; text-align:center; margin:auto; font-size:28px; letter-spacing:3px; }
.prodect_tg{width:159px; height:334px; float:left; margin-left:50px;}
.prodect_tg ul li{width:159px; height:334px; float:left; background:url(../images/prodect_tg.jpg) no-repeat;}
.prodect_tg ul li:hover{background:url(../images/prodect_tga.jpg) no-repeat;}
.reason{width:100%; height:222px; background:url(../images/reason_bg.jpg) center;}
.reason_wz{width:1000px; height:80px; margin:auto; text-align:center; font-size:45px; color:#393939;}
.reason1{width:1000px; height:364px; margin:auto; background:url(../images/reason1.jpg) no-repeat}
.reason1_blank{width:900px; height:70px;}
.reason1_wz{width:600px; height:80px; margin-left:100px; color:#ba0005; font-size:35px; letter-spacing:2px;}
.reason1_wz1{width:500px; height:180px; margin-left:100px; color:#666; font-size:14px; line-height:33px;}
.reason2{width:100%; height:480px; background:url(../images/reason2.jpg) center no-repeat}
.reason2_nr{width:1000px; height:475px; margin:auto}
.reason2_blank{width:900px; height:155px;}
.reason2_wz{width:450px; height:80px; color:#ba0005; font-size:35px; letter-spacing:2px; margin-left:520px;}
.reason2_wz1{width:400px; height:180px; margin-left:520px; color:#666; font-size:14px; line-height:33px;}
.reason3{width:1000px; height:364px; margin:auto; background:url(../images/reason3.jpg) no-repeat}
.reason3_blank{width:1000px; height:51px; margin:auto; }
.reason4{width:100%; height:480px; background:url(../images/reason4.jpg) center}
.reason4_blank{width:900px; height:130px;}
.reason4_wz{width:360px; height:80px; color:#ba0005; font-size:35px; letter-spacing:2px; margin-left:630px;}
.reason4_wz1{width:360px; height:180px; margin-left:630px; color:#666; font-size:14px; line-height:33px;}
.process{width:1000px; height:129px; line-height:155px; background:url(../images/process.jpg) no-repeat; margin:auto; font-size:40px; text-align:center; letter-spacing:9px; color:#ba0005}
.process_pic{width:1000px; height:185px; background:url(../images/process_pic.jpg); margin:auto}
.process_pic1 span{position:absolute; visibility:hidden; margin-left:-230px; margin-top:-250px}
.process_pic1:hover span{ visibility:visible; }
.process_pic1{width:132px; height:175px; float:left; margin-left:17px; margin-top:7px;}
.process_newnr{width:240px; height:100px; border:3px solid #a9a9a9; position:absolute; margin-left:100px; margin-top:100px; background:#fff; padding:15px; font-size:14px; color:#c80f21; line-height:24px; font-family:"寰蒋闆呴粦"}
.process_newnr p{color:#000; font-size:12px;}
.process_pic1a{width:132px; height:175px; float:left; position:absolute; background:#eee;}
.process_pic2{width:132px; height:178px; float:left; margin-left:34px; margin-top:7px;}
.process_pic2 span{position:absolute; visibility:hidden; margin-left:-230px; margin-top:-250px}
.process_pic2:hover span{ visibility:visible; }
.process_blank{width:1000px; height:91px; margin:auto}
.dotton_line{width:100%; height:63px; background:url(../images/dotton.jpg) center;}
.problem_top{width:100%; height:128px; background:url(../images/problem.jpg) center no-repeat #e2e2e4}
.problem_pic{width:100%; height:534px; background:url(../images/problem_pic.jpg) center no-repeat}
.dotton_line2{width:100%; height:55px; background:url(../images/dotton2.jpg) center;}
.links_blank{width:100%; height:43px; background:#fff;}
.links_title{width:100%; height:34px; background:url(../images/links_title.jpg) center no-repeat}
.links{width:1000px; height:220px; margin:0 auto;}
.links ul li{width:164px; height:90px; float:left; margin-left:30px; line-height:32px; margin-top:20px; text-align:center}
.links ul li:hover{color:#b90006}
.news{width:100%; height:586px; background:url(../images/news_pp.jpg)}
.news_blank{width:100%; height:75px;}
.newsa{width:1000px; height:460px; margin:0 auto;}
.news_into{width:330px; height:440px; float:left;}
.news_into_title{width:330px; height:34px; background:url(../images/into.png) center no-repeat; color:#ba0005; font-size:14px; line-height:36px;}
.news_into_pic{width:330px; height:71px; margin-top:10px;}
.news_into_nr{width:330px; height:275px; font-family:"瀹嬩綋"; margin-top:20px;}
.news_into_nr span{float:right;}
.news_into_nr ul li{width:330px; height:32px; line-height:32px; border-bottom:1px dotted #adadad;}
.more{width:41px; height:17px; float:right}
.news_new{width:330px; height:440px; float:left; margin-left:35px;}
.news_wb{width:268px; height:440px; float:left; margin-left:35px; background:#fff; border:1px solid #cccccc;}
.weibo{width:268px; height:82px; background:url(../images/wb_pp.jpg)}
.weibo img{ margin-top:24px; margin-left:20px;}
...
3.JS
代码如下（节选示例）：
(function ($) {
$.fn.touchSlider = function (settings) {
settings.supportsCssTransitions = (function (style) {
var prefixes = ['Webkit','Moz','Ms'];
for(var i=0, l=prefixes.length; i < l; i++ ) {
if( typeof style[prefixes[i] + 'Transition'] !== 'undefined') {
return true;
}
}
return false;
})(document.createElement('div').style);
settings = jQuery.extend({
roll : true,
flexible : false,
btn_prev : null,
btn_next : null,
paging : null,
speed : 75,
view : 1,
range : 0.15,
page : 1,
transition : false,
initComplete : null,
counter : null,
multi : false
}, settings);
var opts = [];
opts = $.extend({}, $.fn.touchSlider.defaults, settings);
return this.each(function () {
$.fn.extend(this, touchSlider);
var _this = this;
this.opts = opts;
this._view = this.opts.view;
this._speed = this.opts.speed;
this._tg = $(this);
this._list = this._tg.children().children();
this._width = parseInt(this._tg.css("width"));
this._item_w = parseInt(this._list.css("width"));
this._len = this._list.length;
this._range = this.opts.range * this._width;
this._pos = [];
this._start = [];
this._startX = 0;
this._startY = 0;
this._left = 0;
this._top = 0;
this._drag = false;
this._scroll = false;
this._btn_prev;
this._btn_next;
this.init();
$(this)
.bind("touchstart", this.touchstart)
.bind("touchmove", this.touchmove)
.bind("touchend", this.touchend)
.bind("dragstart", this.touchstart)
.bind("drag", this.touchmove)
.bind("dragend", this.touchend)
$(window).bind("orientationchange resize", function () {
_this.resize(_this);
});
});
};
var touchSlider = {
init : function () {
var _this = this;
$(this).children().css({
"width":this._width + "px",
"overflow":"visible"
});
if(this.opts.flexible) this._item_w = this._width / this._view;
if(this.opts.roll) this._len = Math.ceil(this._len / this._view) * this._view;
var page_gap = (this.opts.page > 1 && this.opts.page <= this._len) ? (this.opts.page - 1) * this._item_w : 0;
for(var i=0; i<this._len; ++i) {
this._pos[i] = this._item_w * i - page_gap;
this._start[i] = this._pos[i];
this._list.eq(i).css({
"float" : "none",
"display" : "block",
"position" : "absolute",
"top" : "0",
"left" : this._pos[i] + "px",
"width" : this._item_w + "px"
});
if(this.opts.supportsCssTransitions && this.opts.transition) {
this._list.eq(i).css({
"-moz-transition" : "0ms",
"-moz-transform" : "",
"-ms-transition" : "0ms",
"-ms-transform" : "",
"-webkit-transition" : "0ms",
"-webkit-transform" : "",
"transition" : "0ms",
"transform" : ""
});
}
}
if(this.opts.btn_prev && this.opts.btn_next) {
this.opts.btn_prev.bind("click", function() {
_this.animate(1, true);
return false;
})
this.opts.btn_next.bind("click", function() {
_this.animate(-1, true);
return false;
});
}
if(this.opts.paging) {
$(this._list).each(function (i, el) {
//var btn_page = _this.opts.paging.eq(0).clone();
var btn_page = _this.opts.paging.eq(i);
//_this.opts.paging.before(btn_page);
btn_page.bind("click", function(e) {
_this.go_page(i, e);
return false;
});
});
//this.opts.paging.remove();
}
this.counter();
this.initComplete();
},
initComplete : function () {
if(typeof(this.opts.initComplete) == "function") {
this.opts.initComplete(this);
}
},
resize : function (e) {
if(e.opts.flexible) {
var tmp_w = e._item_w;
e._width = parseInt(e._tg.css("width"));
e._item_w = e._width / e._view;
e._range = e.opts.range * e._width;
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
