📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️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.视频演示
B19JP -天宝伏妖录(7页)HTML+CSS
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div class="da">
<div class="top">
<div class="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="juqing.html">剧情简介</a></li>
<li><a href="jiaose.html">角色介绍</a></li>
<li><a href="pingjia.html">作品评价</a></li>
<li><a href="tuce.html">动漫图册</a></li></ul></div>
</div>
<div class="xia">
<h1><img src="images/tt.png" width="100" height="107"></h1>
<div class="zi">
<img src="images/t1.jpg" width="350" height="196" align="right" style=" margin-left:20px;">
<h2>天宝伏妖录</h2>
<p>《天宝伏妖录》是由bilibili出品，玄机科技负责制作网络动画片，改编自非天夜翔创作的同名网络小说作品。</p>
<p>讲述了唐朝天宝盛世下，少年李景珑、孔鸿俊、阿泰、莫日根、裘永思五人因为机缘巧合相遇唐都长安城，并为了天下正义，不断战斗守护黎民苍生的故事。</p>
</div><div class="clearit"></div>
<table width="100%" border="0" class="ta">
<tr>
<td>中文名</td>
<td>天宝伏妖录</td>
<td>编 剧</td>
<td>董缘</td>
</tr>
<tr>
<td>别 名</td>
<td>Legend of Exorcism</td>
<td>制片人</td>
<td>张圣晏、骆艳艳、魏本娜、刘綦、王蓉</td>
</tr>
<tr>
<td>动画制作</td>
<td>玄机科技</td>
<td>类 型</td>
<td>玄幻，励志</td>
</tr>
<tr>
<td>原作者</td>
<td>非天夜翔</td>
<td>出品公司</td>
<td>bilibili</td>
</tr>
<tr>
<td>地 区</td>
<td>中国</td>
<td>导 演</td>
<td>沈乐平</td>
</tr>
<tr>
<td>音 乐</td>
<td>魏小涵</td>
<td>出品人</td>
<td>李旎</td>
</tr>
<tr>
<td>主要配音</td>
<td>边江 、陈锦闻（锦鲤） 、北辰 、凌飞 </td>
<td>编 剧</td>
<td>沈乐平（总）、沈欢愉、 石海燕 、毛司桦</td>
</tr>
</table>
<br>
<h2>动漫图册</h2>
<div class="zi">
<ul><li><img src="images/s1.jpg" width="290" height="180"></li>
<li><img src="images/s2.jpg" width="290" height="180"></li>
<li><img src="images/s3.jpg" width="290" height="180"></li></ul><div class="clearit"></div>
</div>
</div>
<div class="foot">天宝伏妖录</div>
</div>
</body>
</html>🏠CSS样式代码
body, html, div, blockquote, img, label, p, h1, h2, h3, ul,
li, form, a, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body { font-family: Verdana, Geneva, sans-serif;font-size: 14px;color:#000000;line-height: 20px;text-align:left; background:url(../images/b.jpg); background-size: cover }
td,th {font-family: Verdana, Geneva, sans-serif;font-size: 14px;color: #000000;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
ul,li{list-style-type:none;}
.clearit{clear:both;}
.da {width:1000px; margin:0 auto; background: rgba(255,255,255, 0.6 );}
.top {width:1000px; height:566px; background:url(../images/t.jpg);}
.nav { padding-top:516px;}
.nav ul {width:1000px; height:50px; background: rgba(0,0,0, 0.5 ); }
.nav ul li {width:200px; float:left; text-align:center; line-height:50px;}
.nav ul li a { font-size:16px; font-weight:bold; color:#FFF; width:200px; height:50px; display:block;}
.nav ul li A:hover { background: #333;}
.xia {padding:20px;}
h1 { text-align:center;}
.xia h2 { margin-bottom:20px}
.zi { margin-top:20px; line-height:30px; letter-spacing:2px;}
.ta {border-collapse: collapse; margin-top:20px;}
.ta tr{ border-bottom:1px dotted #666666;}
.ta td {padding:8px;}
.zi li { width:320px; float:left; text-align:center;}
.foot {width:1000px; height:60px; background: rgba(0,0,0, 0.9 ); text-align:center; line-height:60px; font-size:16px; font-weight:bold; color:#FFF; margin-top:30px;}
.se li { width:240px; float:left; text-align:center; margin-top:20px; line-height:30px;}
.se li A:hover { color:#666;}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
