精彩专栏推荐作者主页:【进入主页-获取更多源代码】web前端期末作业:【HTML5网页期末作业】程序员告白的有趣方式:【HTML七夕情人节告白网页制作】
@
2.图片演示
ⓐ隣html结构代码
CSS样式代码
二、网站介绍
网站布局:计划采用目前主流的浮动网页布局结构，兼容各大主流浏览器，显示效果稳定。
网站:计划使用最新的网页编程语言HTML5+CSS3+JS完成网站的功能设计。并保证网站代码兼容目前市面上所有主流浏览器，达到了打开后即时看到网站的效果。
网站素材:我们计划从各个平台搜集好看的图片素材，精心挑选适合网页风格的图片，然后用PS制作适合网页大小的图片。
网站:网站系统文件的类型包括:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页编辑:网页作品代码简单，任何HTML编辑软件都可以。其中:html文件包括:index.html是第一页，其他html是第二页；Css文件包括:所有css页面样式、文本滚动、图片放大等。Js文件包括:js实现动态轮播效果、表单提交、点击事件等等。
三、网站效果 2.图片演示
四、 网站代码隣HTML结构代码
首页主页 故事 图片欣赏 联系我们 
小林小姐的龙女
小林家的龙女是酷教信徒创作的漫画。它于2013年5月在《行动》月刊上连载。这些单行本由双叶学会出版。动画于2016年5月公布。这部作品讲述了主人公白领小林住在公寓里的故事。他在醉酒后，为救被剑刺中的龙陀，意外上山。后来，为了报答小林，天龙陀去小林家做了女仆，开始和小林一起生活。2018年8月16日，小林家的龙女与手游《牧羊人之心》达成联动，其中康纳、雷神、卢科亚和艾露玛以各自的原始形象进入游戏成为游戏中的仙女之一，小林作为剧情人物出现。
多样性图
第一集早上，正要去公司的时候，发现了一条龙。在茫然的小林眼前，龙变成了一个长着角，长着尾巴，穿着女仆装的美丽少女。名叫托尔的龙女提出“从今天开始让我做女仆吧！”不知怎么的，好像是昨晚喝醉的小林邀请她回家的。小林以“无意雇人”拒绝了她，但注意到她上班会迟到。
第2集
就在小林和雷神的共同生活变得亲密无间的时候。和小林雷神一起逛街。亲眼看到雷神和商店街的人关系很好，我惊叹于雷神的社交能力之高。但是客户说:“我只是好心”。我还是不懂人情。这样的节日，小林一个人在家，有人来找对象。当我打开门时，我看到一个长着角和尾巴的年轻女孩！？
第3集
除了托尔，康纳还住过。虽然热闹是好的，但是三个人在一个小公寓里比较拘束也是无奈的。于是小林决定搬家。搬家的地方叫上倪谷开派对。然而，雷神的熟人住在洞穴居住的法弗尼尔和太古尔科亚，世界从太古来到这里，新的龙来拜访小林的房子。
小林小姐的龙女
CSS样式代码* { margin: 0; padding: 0;}body { margin: 0 auto; font-size: 14px; background: #fff; color: #333; position: relative;}img { border: none;}a { cursor: pointer; color: #333; text-decoration: none; outline: none;}ul { list-style-type: none;}em { font-style: normal;}.lt { float: left;}.rt { float: right;}.clearfix::after { content: ""; display: block; clear: both;}.wrapin { width: 1000px; margin-left: auto; margin-right: auto;}body { background: url no-repeat top; background-size: cover;}.logo { width: 360px; margin: 10px 0; display: block;}.logo img { width: 100%;}header { height: 50px; background: #fab1ce;}.nav li { text-align: center; width: 25%; float: left; line-height: 50px;}.nav li:hover { background: #fb96be;}.nav li a { font-weight: bold; font-size: 16px; color: #fff;}.banner img { width: 100%; display: block;}.con { padding: 15px; background: #fff;}.title { padding: 10px 0; border-bottom: 3px solid #fab1ce;}.title p { color: #fab1ce;}.pic_top { margin: 10px 0; border: 3px solid #fab1ce;}.pic_top li { float: left; width: 16.66%;}.pic_top li img { width: 100%; display: block;}.index { margin: 30px 0; line-height: 26px; color: #fff; color: #333; font-size: 16px;}.text { margin: 10px 0; line-height: 26px; color: #fff; color: #333; font-size: 16px;}.index img { display: block; margin: 20px auto; width: 400px;}footer { line-height: 50px; text-align: center; color: #fff; background: #fab1ce;}.juqing { margin: 30px 0;}.juqing .pic { width: 300px; float: left;}.juqing .pic img { width: 100%;}.juqing .text { float: right; width: 640px;}.tipian { margin: 10px 0;}.tipian li { float: left; width: 25%; padding: 10px; box-sizing: border-box;}.tipian li img { width: 100%; height: 125px;}form { width: 400px; margin: 0 auto;}form p { margin: 10px 0; font-size: 16px; color: #333;}form .phone { width: 100%; height: 36px;}form text
area { width: 100%; height: 100px;}form .but { background:#fab1ce; border: none; color: #fff; margin: 20px auto; display: block; width: 200px; height:36px;}
五、更多源码
1.如果我的博客对你有帮助，请一键三连“赞”“评论”“收藏”！
2.【关注我|获取更多源代码】带你学习各种前端插件，3D炫酷效果，图片展示，文字效果，还有全网站模板，高校毕业生HTML模板，等等！
欢迎交流学习以上内容技术相关问题。
