📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
- 五、🎁更多源码
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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代码）。
三、🔗网站效果
▶️1.视频演示
N40JP-传统文化艺术耍牙15页
🧩 2.图片演示
四、💒 网站代码
🧱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="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<div class="top">
<div class="logo">
<img src="images/logo.jpg" />
</div>
<div class="nav">
<ul>
<li><a class="hot" href="index.html">网站首页</a></li>
<li><a href="news.html">耍牙新闻</a></li>
<li><a href="mingduan.html">名段欣赏</a></li>
<li><a href="mingjia.html">耍牙名家</a></li>
<li><a href="baike.html">耍牙百科</a></li>
<li><a href="sousuo.html"><img src="images/sous.jpg" /></a></li>
<li><a href="rongyu.html"><img src="images/ry.jpg" /></a></li>
</ul>
</div>
</div>
<div class="banner">
<img src="images/banner1.jpg" />
</div>
<div class="foot">
<div class="bx1">
<div class="left">选择您的地点</div>
<div class="center">
<img src="images/foot2.png" />
<h2>新闻刊物</h2>
<h3>探索耍牙最新资讯</h3>
<h4>订阅</h4>
</div>
<div class="right">
<div class="tu">
<img src="images/foot3.png" />
<img src="images/foot4.png" />
</div>
<h4>关注我们</h4>
</div>
</div>
<div class="bx2">
<a href="#">400 885 6618</a>
<a href="#">联系我们</a>
<a href="#">使用条款</a>
<a href="#">关于我们</a>
<a href="#">广告联系</a>
<a href="#">意见反馈</a>
<a href="#">版权申明</a>
<a href="#">常见问题</a>
<a href="#">鸣谢</a>
<a href="#">沪ICP备14014303号-4 <span class="span1"><img src="images/foot5.png" /></span></a>
<a href="#"><span class="span2"><img src="images/foot6.png" /></span>沪公网安备31010602002427号</a>
</div>
</div>
</div>
</body>
</html> 🏠CSS样式代码
/*---耍牙百科-----*/
.bkbx1{ width:1259px; height:344px;background:url(../images/bk01.png) no-repeat; margin:0 auto;margin-bottom:40px; }
.bkbx1 a{color:#FFF;}
.bkbx1 a:hover{ color:#F00 ;}
.bkbx1 h2{ height:66px; line-height:60px; padding-top:30px; margin-bottom:30px; font-size:40px; font-weight:normal;text-align:center;}
.bkbx1 p{ line-height:35px; font-size:16px; text-align:center;}
.bkbx1 .duanx{ width:125px; height:25px; margin:0 auto; margin-top:40px;}
.bkbx2{ width:1259px; height:324px;background:url(../images/bk02.png) no-repeat; margin:0 auto;padding-top:24px;margin-bottom:40px; }
.bkbx2 a{color: #000;}
.bkbx2 a:hover{ color:#F00;}
.bkbx2 .neiw{ width:963px; height:285px; background:#FFF; margin-left:36px; }
.bkbx2 h2{ height:66px; line-height:60px; padding-top:30px; margin-bottom:30px; font-size:40px; font-weight:normal; text-align:center;}
.bkbx2 p{ line-height:35px; font-size:16px; text-align:center;}
.bkbx2 .duanx{ width:125px; height:25px; margin:0 auto; margin-top:40px;}
.bkbx3{ width:1259px; height:324px;background:url(../images/bk03.png) no-repeat; margin:0 auto;padding-top:24px;margin-bottom:40px; }
.bkbx3 .neiw{ width:963px; height:285px; margin-left:380px; }
.bkbx3 h2{ height:66px; line-height:60px; padding-top:30px; margin-bottom:30px; font-size:40px; font-weight:normal; text-align:center; }
.bkbx3 p{ line-height:35px; font-size:16px; text-align:center;}
.bkbx3 .duanx{ width:125px; height:25px; margin:0 auto; margin-top:40px;}
.bkbx3 a{color:#FFF;}
.bkbx3 a:hover{ color:#F00;}
/*---耍牙起源-----*/
.qy{ height:1802px; background:url(../images/qy.jpg) no-repeat; position:relative;}
.qy .bx1{ width:177px; height:108px; position:absolute; left:170px; top:30px;}
.qy .bx1 h2{ line-height:50px; height:50px; font-size:26px;font-weight:normal;}
.qy .bx1 h3{ line-height:45px; height:45px; font-size:20px; font-weight: lighter;}
.qy .bx2{ width:351px; height:94px; position:absolute; left:501px; top:466px;}
.qy h4{ height:53px; line-height:53px; font-size:26px; color:#c79813; font-weight:normal; border-bottom:#ececec 1px solid; font-weight:normal;}
.qy p{ height:43px; line-height:43px;font-weight:normal; font-size:14px; background:url(../images/qy01.jpg) no-repeat; padding-left:20px;}
.qy .bx3{ width:417px; height:96px; position:absolute; left:683px; top:992px;}
.qy .bx4{ width:575px; height:106px; position:absolute; left:332px; top:1511px;}
/*---步骤-----*/
.buz{ width:1400px; height:1195px; background:#dbe0e2;padding-top:19px;}
.buz .nerc{ width:1104px; height:1133px; background:url(../images/bz01.jpg) no-repeat; margin:0 auto; }
.buz .nerc .center{ width:910px; height:1035px; margin:0px; padding-top: 62px; margin:0 auto;}
.buz .nerc .center .tit{ height:52px; padding-bottom:19px; border-bottom:#787573 2px solid;line-height: 52px; margin-bottom:30px;
}
.buz .nerc .center .tit .left{ width:58px; height:52px; line-height:52px; background:url(../images/sanj.jpg) no-repeat 0px 20px; color:#787573; font-size:16px;float:left;}
.buz .nerc .center .tit .left a{color:#787573; padding-left:25px;}
.buz .nerc .center .tit .cent{ width:747px; height:52px; float:left; color:#070707; font-size:30px; text-align:center;}
.buz .nerc .center .tit .right{ width:105px; height:52px;float:left;}
.buz .nerc .center .tit .right img{ float:left;}
.buz .nerc .center .bx1{ width: 908px;
border-bottom:#787573 2px solid;
padding-bottom: 40px;}
.buz .nerc .center .bx1 img{ margin:0 auto; display:block;}
.buz .nerc .center .bx2{ width: 908px;
border-bottom:#787573 2px solid;padding: 20px 0px;}
.buz .nerc .center .bx2 p{ font-size:16px; line-height:40px; text-indent:2em;}
.buz .nerc .center .tit2{ height:52px; padding-bottom:19px; line-height: 52px; margin-bottom:30px;
}
.buz .nerc .center .tit2 .left{ width:58px; height:52px; line-height:52px; background:url(../images/sanj.jpg) no-repeat 0px 20px; color:#787573; font-size:16px;float:left;}
.buz .nerc .center .tit2 .left a{color:#787573; padding-left:25px;}
.buz .nerc .center .tit2 .right{ width:105px; height:52px;float:right;}
.buz .nerc .center .tit2 .right img{ float:left;}
/*---搜索页面-----*/
.sous{ height:987px; background:url(../images/sousuo.jpg) no-repeat;}
.sousbx1{ width:418px; height:190px; margin-top:163px; margin-left:527px;}
.sousbx1 h2{ height:60px; line-height:60px; text-align:center; font-size:30px; margin-bottom:25px; font-weight:normal;}
.inup{ width:415px; height:50px; border:#CCC 1px solid; line-height:50px; margin-bottom:17px;}
.inup .inut{ width:302px;padding-left:54px; height:48px; float:left; border:none;}
.inup .btn{ width:51px; height:44px; float:left; background:url(../images/sous02.jpg) no-repeat;}
.dingwei{ width:86px; height:36px; background:url(../images/sous03.jpg) no-repeat; padding-left:30px; color:#818181; font-size:16px; margin:0 auto;}
.fenxiang{ width:183px; height:56px; margin-left:644px; margin-top:313px; background:url(../images/sous04.jpg) no-repeat; text-align:center; font-size:16px; line-height:56px;}
.fenxiang a{ color:#FFF;}
/*---荣誉-----*/
.rongyu{ height:795px; background:#e5e6e9;}
.rongyu .left{ width:497px; height:794px; float:left; margin-left:62px; margin-right:105px;}
.rongyu .left h2{ height:60px; line-height:60px; font-size:30px; margin-top:20px;}
.rongyu .left p{ line-height:36px; font-size:16px; color:#3c3c3d;}
.rongyu .left h3{ height:65px; font-weight:normal; font-size:20px; line-height:65px; background:url(../images/ry01.jpg) no-repeat;}
.rongyu .right{ width:662px; height:794px; float:left;}
.rongyu .right .wenz{ height:265px;}
.rongyu .right .wenz ul{}
.rongyu .right .wenz ul li{ height:86px; line-height:86px; background:url(../images/ry04.jpg) no-repeat bottom; text-align:center;}
.rongyu .right .wenz ul li a{ font-size:16px; color:#333;} 五、🎁更多源码
1.如果我的博客对你有帮助
请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦！