检测网站访问量,中国站免费推广入口,做国外商品的网站,陕西建设系统个人信息查询网站#x1f4c2;文章目录
一、#x1f4d4;网站题目
二、✍️网站描述
三、#x1f4da;网站介绍
四、#x1f310;网站演示
五、⚙️网站代码
#x1f9f1;HTML结构代码
#x1f492;CSS样式代码
六、#x1f527;完整源码下载
七、#x1f4e3;更多 一、#…文章目录
一、网站题目
二、✍️网站描述
三、网站介绍
四、网站演示
五、⚙️网站代码
HTML结构代码
CSS样式代码
六、完整源码下载
七、更多 一、网站题目
⭐ HTML5动漫主题网站 天空之城 10页 htmlcss设计报告成品项目模版。
❤ 我的主页【获取更多优质源码】
❤ 更多源码【Web网页设计作业成品源码分享(持续更新)】 二、✍️网站描述
️HTML5动漫主题网站 天空之城 10页 htmlcss设计报告成品项目模版其中包含html文件10个、css文件1个、images图片22个。
其中标签用到了div、p、h1、a、img、h3、b等标签。
其中5个网页包含漫画简介页、乔巴简介页、乔巴图集页、漫画欣赏页、网站介绍页。 三、网站介绍
网站布局采用DIVCSS进行网页布局兼容各大浏览器保证可以正常展示
网站素材图片均采自网络素材符合了页面主题规范
网站文件其中HTML是网页的结构、CSS是网页的样式、JS是页面的动态效果
网页编辑如(DW、HBuilder、NotePAD、VScode、Sublime、Webstorm、Text、Notepad)都可修改代码。 四、网站演示 五、⚙️网站代码
HTML结构代码
!doctype html
html
head
meta charsetutf-8
title天空之城网/title
link relstylesheet typetext/css hrefcss/common.css/
/headbodydiv classcontainerdiv classheadera hrefindex.htmlimg srcimages/logo.pngspan天空之城/span/a/divdiv classnava hrefindex.html天空之城/aa hrefinfo.html影片信息/aa hrefplot.html剧情简介/aa hrefperson.html人物简介/aa hrefauto.html登场机器/aa hrefgag.html幕后花絮/aa hrefmean.html影片意义/aa hrefword.html热门影评/aa hrefregister.html影迷注册/aa hreflogin.html影迷登录/a/divdiv classwrapperdiv classfocusa hrefinfo.htmlimg srcimages/focus.jpg//a/divdiv classlinepba hrefplot.html剧情简介/a/bspana hrefplot.html小姑娘希达SHEETA是传说中“天空之城拉普达Laputa”王族的后裔那曾是超越地上文明不知几千年的空中文明但不知为何希达的祖先离开“天空之城”抛弃发达的科技在地面上过起隐居的生活。然而一天几个不明身份的男子出现在她家门口。故事由希达所坐的军队飞行船遭到空中海盗的袭击而开始。争斗中希达从万米高空的飞行船上跌落下来……故事另外一个主人公少年巴鲁PASU是矿工机师的学徒这一天收工时发现天上有个亮晶晶的东西正在慢慢地下落。。。。。/a/span/pa hrefplot.htmlimg srcimages/plot.jpg//a/divdiv classitema hrefperson.htmlimg srcimages/person1.jpg//ah3希达全/h3pa hrefperson.html希达全名罗希达·多耶鲁·乌鲁·拉普达。希达是一位身世不明的少女。/a/p/divdiv classitema hrefperson.htmlimg srcimages/person2.jpg//ah3巴鲁/h3pa hrefperson.html巴鲁是一位住在有矿坑的小型城镇附近的少年男主角本身个性直接且豪爽。/a/p/divdiv classitema hrefperson.htmlimg srcimages/person3.jpg//ah3穆斯卡/h3pa hrefperson.html穆斯卡是拉普达王族另一分支的后裔。为政府的情报机关之特务头领军衔是上校。/a/p/divdiv classitema hrefperson.htmlimg srcimages/person4.jpg//ah3穆罗将军/h3pa hrefperson.html穆罗将军是探索拉普达任务的指挥官军中阶级为将军有着一副军队指挥官的身材。/a/p/divdiv classitema hrefperson.htmlimg srcimages/person5.jpg//ah3朵拉/h3pa hrefperson.html朵拉是空中海贼的首领是个面恶心善的老海盗精通天文地理和密码破解。/a/p/divdiv classitema hrefperson.htmlimg srcimages/person6.jpg//ah3查尔斯/h3pa hrefperson.html朵拉的长男是一个有着丰厚胡子的大男人身体很强壮平日里一副很凶的样子。/a/p/divdiv classitema hrefperson.htmlimg srcimages/person7.jpg//ah3路易/h3pa hrefperson.html朵拉的次男。留有一小撮的胡子穿着一件白色的西服里边是一件紫色的衬衣。/a/p/divdiv classitema hrefperson.htmlimg srcimages/person8.jpg//ah3亨利/h3pa hrefperson.html朵拉的三男。虎蛾号的成员。帽子时常把眼睛遮起来脸颊上长有雀斑。/a/p/divdiv classitema hrefperson.htmlimg srcimages/person9.jpg//ah3波姆爷爷/h3pa hrefperson.html巴鲁的友人一名在废弃矿坑里生活的老者知晓矿石知识与飞行石相关的传说。/a/p/divdiv classlisth3a hrefgag.html幕后花絮/a/h3pa hrefgag.html《天空之城》是吉卜力工作室的开山之作。宫崎骏是受到了小说《格列佛游记》的启发才写出了该片的故事并亲自担任导演将其制作成动画电影推出。该片是宫崎骏的第三部作品也是吉卜力工作室推出的首部动画电影。/a/pa hrefgag.htmlimg srcimages/gag.jpg//a/divdiv classlisth3a hrefmean.html影片意义/a/h3pa hrefmean.html《天空之城》是一部纯粹的宫崎骏式风格的电影。女性角色一直是宫崎骏影片塑造人物的重点也许女性柔美刚强的性格更易于吸引我们唯美的画面所隐藏的沉重的命题似乎解释了为什么宫崎骏对女性角色塑造的忠贞不渝。/a/pa hrefmean.htmlimg srcimages/mean.jpg//a/divdiv classlisth3a hrefword.html热门影评/a/h3pa hrefword.html《天空之城》比人们所期望的宫崎骏作品更加倾向于公式化但他后期作品中梦幻般的光辉已经在该片中初见雏形而且该片中还有着惊人的科幻元素足以比肩当代的一些优秀科幻电影作品。《偏锋杂志》评/a/pa hrefword.htmlimg srcimages/word.jpg//a/div/divdiv classfooterCopyright 2022 tkzc.com 天空之城网 版权所有/div/div/body
/html
CSS样式代码
charset utf-8;*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:14px;color:#333;background-color:#dceefc;
}
a{color:#555;text-decoration:none;
}
a:hover{color:#4ea4c7;text-decoration:underline;
}.container{width:1000px;margin:0 auto;overflow:hidden;background-color:#fff;
}.header{float:left;width:1000px;height:100px;line-height:100px;font-size:34px;background-color:#4ea4c7;
}
.header a{color:#fff;
}
.header img{float:left;width:55px;height:55px;margin:24px 0 0 380px;
}
.header span{margin-left:10px;
}.nav{float:left;width:1000px;height:40px;line-height:40px;font-weight:bold;background-color:#0483b1;
}
.nav a{color:#fff;margin:0 20px 0 20px;
}.wrapper{float:left;width:1000px;
}.focus{float:left;width:1000px;height:480px;
}
.focus img{float:left;width:1000px;height:480px;
}.line{float:left;width:960px;margin:30px 0 0 20px;
}
.line p{float:left;width:635px;
}
.line p b{float:left;width:635px;height:20px;line-height:20px;margin-top:5px;font-size:16px;
}
.line p span{float:left;width:635px;line-height:27px;margin-top:8px;
}
.line img{float:right;width:306px;height:170px;
}.item{float:left;width:306px;margin:30px 0 0 20px;
}
.item img{float:left;width:100px;height:100px;
}
.item h3{float:right;width:190px;height:20px;line-height:20px;font-size:16px;
}
.item p{float:right;width:190px;line-height:25px;margin-top:5px;
}.list{float:left;width:306px;margin:25px 0 0 20px;
}
.list h3{float:left;width:306px;height:25px;line-height:25px;
}
.list p{float:left;width:306px;line-height:27px;margin-top:5px;
}
.list img{float:left;width:306px;height:170px;margin-top:10px;
}.info{float:left;width:1000px;padding-bottom:10px;
}
.info h2{float:left;width:1000px;height:30px;line-height:30px;margin:20px 0;text-align:center;
}
.info img{float:left;width:900px;margin:20px 0 10px 50px;
}
.info p{float:left;width:266px;margin-left:50px;border-bottom:1px dotted #cccccc;
}
.info p b{float:left;width:80px;height:58px;line-height:58px;
}
.info p span{float:left;width:186px;height:58px;line-height:58px;
}.text{float:left;width:1000px;padding-bottom:10px;
}
.text h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;text-align:center;
}
.text img{float:left;width:900px;margin:20px 0 10px 50px;
}
.text p{float:left;width:900px;line-height:28px;margin-left:50px;text-indent:25px;
}.person{float:left;width:1000px;
}
.person h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;text-align:center;
}
.person p{float:left;width:306px;margin:20px 0 0 20px;padding-bottom:15px;border:1px solid #f1f1f1;
}
.person p img{float:left;width:160px;height:160px;margin:15px 0 0 73px;border-radius:50%;
}
.person p b{float:left;width:276px;height:25px;line-height:25px;margin:12px 0 0 15px;font-size:16px;text-align:center;
}
.person p span{float:left;width:276px;line-height:25px;margin:5px 0 0 15px;
}.auto{float:left;width:1000px;
}
.auto h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;text-align:center;
}
.auto p{float:left;width:468px;margin:20px 0 0 20px;padding-bottom:15px;border:1px solid #f1f1f1;
}
.auto p img{float:left;width:160px;height:160px;margin:15px 0 0 150px;border-radius:50%;
}
.auto p b{float:left;width:438px;height:25px;line-height:25px;font-size:16px;text-align:center;margin:12px 0 0 15px;
}
.auto p span{float:left;width:438px;line-height:25px;margin:5px 0 0 15px;
}.into{float:left;width:1000px;padding:130px 0 150px 0;
}
.into p{float:left;width:990px;
}
.into p b{float:left;width:300px;height:65px;line-height:65px;text-align:right;
}
.into p input{float:left;width:330px;height:35px;margin:15px 0 0 20px;
}
.into p input.submit{color:#fff;background-color:#4ea4c7;border:0;
}.footer{float:left;width:1040px;height:80px;line-height:80px;margin-top:30px;text-align:center;color:#fff;background-color:#4ea4c7;
} 六、完整源码下载
点击【下载链接】 七、更多
文章推荐【修改文件修改日期为最新】
文章推荐【Web网页设计作业成品源码分享(持续更新)】
关注我获取更多源码~
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业各种设计应有尽有持续更新中..
如果我的文章对您有帮助请“点赞”“✍️评论”“收藏” 一键三连哦
