【HTML】HTML网页设计----动漫网站设计

news/2024/11/8 9:01:11/

1、引言

设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题。你想要解决的问题,在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

动漫网页系统采用html,css技术来实现,符合所学知识体系,适用于常见的作业以及课程设计,需要获取更多的作品,请关注微信公众号:coding加油站,获取,如需更多资料,可在微信后台留言。欢迎大家来提问,交流学习。

2.1、作品简介方面 

动漫网页系统采用常规方式来实现,符合绝大部分的要求。代码配置有相关文档讲解,如需从代码中学到知识点,那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单,基本使用课堂中所学知识点来完成,只需要修改相关的介绍文字,一些图片,就可以改为自己独一无二的代码,网页作品下载后可使用任意编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)。

2.3、作品技术介绍

html网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面,部分采用了javascript来做校验。 使用html5,以及css3等相关技术完成技术的布局,在本作品中,会使用常见的布局,常见的浮动布局,flex布局都会有使用到哦。同时在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识,同时使用了一些js的相关知识。例如使用到了dom,和bom来获取浏览器的相关api,同时使用css对样式进行相关的美化,使得界面更加符合网页设计

3、作品演示

【coding加油站】HTML设计--爱动漫-动漫网页设计

3.1、首页

相关代码:

	<div class="elastic"><!-- 头部 --><div id="header" class="grid-clear"><div class="grid" id="logo"><a href="index.html" class="settings-text">I❤Man 爱漫吧</a></div><div class="grid main-menu-block"><ul id="main-menu"><li><form class="search"><div class="form-group"><input type="text" class="form-control" placeholder="搜索漫画"></div></form></li><li><a href="index.html" class="settings-txt">首页</a></li><li><a href="portfolio.html" class="settings-txt">分类</a></li><li><a href="blog.html" class="settings-txt">最近更新</a></li><li><a href="services.html" class="settings-txt">连载ing~</a><ul><li><span class="top_area">&nbsp;</span></li><li><a href="columns.html" class="settings-txt">Columns</a></li><li><a href="404.html" class="settings-txt">404 Error</a></li><li><a href="user.html" class="settings-txt">Home 2</a></li><li><a href="#" class="settings-txt">More</a></li><li><span class="bottom_area">&nbsp;</span></li></ul></li><li><a href="about.html" class="settings-txt">说明</a></li><li><a href="contact.html" class="settings-txt">联系我们</a></li><li><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#login">注册/登录</button></li></ul></div></div> <!-- #header --><div id="head-text"><h1 class="general-font">I (*´∀`)~♥ Comic <span class="china blue f80 settings-text"> Imanb 爱漫吧!</span></h1><h3><span class="f14">o(* ̄3 ̄)o Imanb 爱漫吧 致力于挖掘精品原创漫画,专注漫画业务 为广大读者老爷♡(☄◣ω◢)☄♡提供优质服务<br>各位读者老爷请笑纳。:.゚ヽ(*´∀`)ノ゚.:。 </span></h3></div> <!-- #head-text --></div><!-- HERE START SLIDER --><div id="allslider"><div class="bg-wood circle-inline-border"><img src="images/slider/3.jpg" class="big"><div class="elastic"><div id="slider-item"><div class="f1 left controll-btn"></div><div class="f1 item"><ul class="nav nav-pills smallpics"><li class="smallpic"><img src="images/slider/1.jpg" alt=""></li><li class="smallpic"><img src="images/slider/2.jpg" alt=""></li><li class="smallpic"><img src="images/slider/3.jpg" alt=""></li><li class="smallpic"><img src="images/slider/4.jpg" alt=""></li><li class="smallpic"><img src="images/slider/5.jpg" alt=""></li><li class="smallpic"><img src="images/slider/6.jpg" alt=""></li><li class="smallpic"><img src="images/slider/7.jpg" alt=""></li><li class="smallpic"><img src="images/slider/8.jpg" alt=""></li><li class="smallpic"><img src="images/slider/9.jpg" alt=""></li><li class="smallpic"><img src="images/slider/1.jpg" alt=""></li></ul></div><div class="f1 right controll-btn"></div></div></div></div> <!-- #allslider end -->

 3.2、详情页

相关代码:

<div class="w870 left catalog-info"><div class="order"><a href="#"><span class="label label-info order-btn">正序</span></a><a href="#"><span class="label label-warning  order-btn">倒序</span></a></div><div class="catalog-info-contant"><a href="#"><span class="catalog-item mytext-p3-indent left f4">第一话:陨落的天才</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第二话:斗气大陆</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第三话:客人</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第四话:云岚宗</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第五话:聚气散</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第六话:炼药师</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第七话:休妻!</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第八话:神秘的老者</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第九话:药老!</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第十话:借钱</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第十一话:坊市</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第十二话:离他远点</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第十三话:黑铁片</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第十四话:吸掌</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第十五话:修炼</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第十六话:萧宁</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第十七话:冲突</span></a><a href="#"><span class="catalog-item mytext-p3-indent left f4">第十八话:玄阶高级斗技:八极崩</span></a><div class="clearfix"></div><a href="#"><p class="center"><span class="show-all mytext-title2">显示全部</span></p></a></div><div class="clearfix"></div><h1 class="title-line blue settings-text"><span class="current-bg pr5">相似推荐</span><a class="reset" href="#"><small class="current-bg right">换一批 </a></small></h1><div class="projects-band-nohidden"><ul class="likes"><li><a href="#" class="inline-border"><img src="images/slider/project_1.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">斗破苍穹</h4></a><p class="author center mytext-p">【天蚕土豆】</p><p class="type center mytext-p">玄幻/冒险/热血</p></div></li><li><a href="#" class="inline-border"><img src="images/slider/project_2.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">海贼王</h4></a><p class="author center mytext-p">【尾田荣一郎】</p><p class="type center mytext-p">冒险/热血/男生</p></div></li><li><a href="#" class="inline-border"><img src="images/slider/project_3.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">海贼王</h4></a><p class="author center mytext-p">【尾田荣一郎】</p><p class="type center mytext-p">冒险/热血/男生</p></div></li><li><a href="#" class="inline-border"><img src="images/slider/project_4.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">斗罗大陆</h4></a><p class="author center mytext-p">【唐家三少】</p><p class="type center mytext-p">玄幻/冒险/热血</p></div></li><li><a href="#" class="inline-border"><img src="images/slider/project_1.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">海贼王</h4></a><p class="author center mytext-p">【尾田荣一郎】</p><p class="type center mytext-p">冒险/热血/男生</p></div></li><li><a href="#" class="inline-border"><img src="images/slider/project_2.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">火影忍者</h4></a><p class="author center mytext-p">【岸本齐史】</p><p class="type center mytext-p">忍者/冒险/日漫</p></div></li><li><a href="#" class="inline-border"><img src="images/slider/project_3.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">斗罗大陆</h4></a><p class="author center mytext-p">【唐家三少】</p><p class="type center mytext-p">玄幻/冒险/热血</p></div></li><li><a href="#" class="inline-border"><img src="images/slider/project_4.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">火影忍者</h4></a><p class="author center mytext-p">【岸本齐史】</p><p class="type center mytext-p">忍者/冒险/日漫</p></div></li><li><a href="#" class="inline-border"><img src="images/slider/project_1.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">斗罗大陆</h4></a><p class="author center mytext-p">【唐家三少】</p><p class="type center mytext-p">玄幻/冒险/热血</p></div></li><li><a href="#" class="inline-border"><img src="images/slider/project_2.jpg" alt="" /></a><div class="info"><a href="#" class="description center"><h4 class="title mytext-title">海贼王</h4></a><p class="author center mytext-p">【尾田荣一郎】</p><p class="type center mytext-p">冒险/热血/男生</p></div></li></ul></div><!-- new item新作推送 --><h1 class="title-line blue"><span class="current-bg pr5 settings-text">漫画评论</span></h1><div class="comments-area"><div class="comments-block"><!--用户名--><h3 class="com-author">用户:@小小骚猪</h3><!--评论时间--><p class="com-text mytext-p3">这一章节的内容太好了</p><small>Feb, 20 2012 at 3:00 pm - <a href="#" class="blue reply-button">回复</a></small><a class="avatar" href="#"><img class="inline-border" src="images/avatar_1.jpg" alt="" /></a></div><!--回复内容用 class reply-comment--><div class="comments-block reply-comment"><h3 class="com-author">用户:@皮皮虾</h3><p class="com-text mytext-p3">画质也特别赞!</p><small>Feb, 20 2012 at 3:00 pm - <a href="#" class="blue reply-button">回复</a></small><a class="avatar" href="#"><img class="inline-border" src="images/avatar_2.jpg" alt="" /></a></div><div class="comments-block"><h3 class="com-author">用户:@乐乐</h3><p class="com-text mytext-p3">好惨一只伊娃。 哭撩。。。。</p><small>Feb, 20 2012 at 3:00 pm - <a href="#" class="blue reply-button">回复</a></small><a class="avatar" href="#"><img class="inline-border" src="images/avatar_3.jpg" alt="" /></a></div><div class="comments-block"><h3 class="com-author">用户:@Larimar</h3><p class="com-text mytext-p3">这么好的一只Eva给我也整一只好么!</p><small>Feb, 20 2012 at 3:00 pm - <a href="#" class="blue reply-button">回复</a></small><a class="avatar" href="#"><img class="inline-border" src="images/avatar_4.jpg" alt="" /></a></div><div class="space30"></div><h1 class="title-line blue"><span class="current-bg pr5 settings-text">发送评论</span></h1><div class="space30"></div><div class="contact-form"><form action="/" method="post"><div class="block-form"><textarea name="message" id="message" cols="30" rows="10"placeholder="评论..."></textarea></div><div class="block-form"><input type="submit" value="发送" id="submit-form"class="settings-clr" /></div></form><div class="unLogin"><span class="title-large unLogin-info">请先登录!!!</span></div></div></div> <!-- .comments-area end of comment area block --></div>

 3.3、个人信息界面

相关代码:

		<div role="tabpanel" class="tab-pane active user-content-item" id="home"><div role="tabpanel"><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#my-info" aria-controls="my-info" role="tab" data-toggle="tab">我的信息</a></li><li role="presentation"><a href="#change-info" aria-controls="change-info" role="tab" data-toggle="tab">修改信息</a></li><li role="presentation"><a href="#change-psw" aria-controls="change-psw" role="tab" data-toggle="tab">修改密码</a></li></ul><!-- 个人中心内容--><div class="tab-content"><!-- 我的信息页面(展示用户信息) --><div role="tabpanel" class="tab-pane active" id="my-info"><div class="info-head"><img src="images/avatar_4.jpg" class="my-info-icon left mr20" alt=""><p class="mytext-title user-info-nickname">Larimar(UID:20654)</p><p class="mytext-title user-info-name">565203943</p></div><h3 class="title-line"><span class="current-bg pr5">基本信息</span> </h3><div class="form-group"><label for="username" class="col-sm-3 control-label">用户名:</label><div class="col-sm-10"><input type="text" class="form-control" id="username" value="larimar" readonlyname="username"></div></div><div class="form-group"><label for="nickname" class="col-sm-3 control-label">昵称:</label><div class="col-sm-10"><input type="text" class="form-control" id="nickname" value="larimar" readonlyname="nickname"></div></div><div class="form-group"><label for="gender" class="col-sm-3 control-label">性别:</label><div class="col-sm-10"><input type="text" class="form-control" id="gender" value="男" readonlyname="gender"></div></div><div class="form-group"><label for="email" class="col-sm-3 control-label">邮箱:</label><div class="col-sm-10"><input type="text" class="form-control" id="email" value="coding加油站@qq.com"readonly name="email"></div></div><div class="form-group"><label for="QQ" class="col-sm-3 control-label">QQ:</label><div class="col-sm-10"><input type="text" class="form-control" id="QQ" value="coding加油站" readonlyname="QQ"></div></div></div><!-- 修改信息页面 --><div role="tabpanel" class="tab-pane" id="change-info"><form action="#" method="POST" id="form-change-icon"><div class="info-head"><a data-toggle="modal" href="" class="change-icon"><imgsrc="images/avatar_4.jpg" class="my-info-icon left mr20" alt=""></a><p class="mytext-title user-info-nickname">Larimar(UID:20654)</p><p class="mytext-title user-info-name">565203943</p><input type="file" name="change-icon" id="changeIcon" style="display: none"></div></form><!-- 上传图片模态框 --><div id="changeImgModal" class="modal fade" tabindex="-1" role="dialog"aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-body center"><h1 class="center title-large">更改头像</h1><img src="" alt="" class="img" width="200px"></div><div class="modal-footer"><button type="button" class="btn btn-default" id="close"data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" id="change">更改头像</button></div></div></div></div><!-- 上传图片模态框 --><h3 class="title-line"><span class="current-bg pr5">修改信息</span> </h3><form action="#" method="POST" id="form-change-info"><div class="form-group"><label for="username" class="col-sm-3 control-label">用户名:</label><div class="col-sm-10"><input type="text" class="form-control" id="username" value="larimar"name="username"></div></div><div class="form-group"><label for="nickname" class="col-sm-3 control-label">昵称:</label><div class="col-sm-10"><input type="text" class="form-control" id="nickname" value="larimar"name="nickname"></div></div><div class="form-group"><label for="gender" class="col-sm-3 control-label">性别:</label><div class="col-sm-10"><input type="text" class="form-control" id="gender" value="男" name="gender"></div></div><div class="form-group"><label for="email" class="col-sm-3 control-label">邮箱:</label><div class="col-sm-10"><input type="text" class="form-control" id="email" value="coding加油站@qq.com"name="email"></div></div><div class="form-group"><label for="QQ" class="col-sm-3 control-label">QQ:</label><div class="col-sm-10"><input type="text" class="form-control" id="QQ" value="coding加油站" name="QQ"></div></div><div class="form-group center center col-sm-10"><button type="submit" class="btn btn-info">提交修改</button><button type="reset" class="btn btn-info">重置</button></div></form></div><!-- 修改密码页面 --><div role="tabpanel" class="tab-pane" id="change-psw"><h3> ⚙ 修改密码</h3><form action="#" method="POST" id="form-change-psw"><div class="form-group"><label for="username" class="col-sm-3 control-label">用户名:</label><div class="col-sm-10"><input type="text" class="form-control" id="username" value="larimar"readonly name="username"></div></div><div class="form-group"><label for="username" class="col-sm-3 control-label">原密码:</label><div class="col-sm-10"><input type="password" class="form-control" id="password"placeholder="请输入原密码" name="password"></div></div><div class="form-group"><label for="username" class="col-sm-3 control-label">新密码:</label><div class="col-sm-10"><input type="password" class="form-control" id="newPassword"placeholder="请输入新密码" name="newPassword"></div></div><div class="form-group"><label for="username" class="col-sm-3 control-label">重复新密码:</label><div class="col-sm-10"><input type="password" class="form-control" id="CheckNewPassword"placeholder="请确认新密码" name="CheckNewPassword"></div></div><div class="form-group center center col-sm-10"><button type="submit" class="btn btn-info">提交修改</button><button type="reset" class="btn btn-info">重置</button></div></form></div></div></div></div><div role="tabpanel" class="tab-pane user-content-item" id="message"><div role="tabpanel"><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#allMessage" aria-controls="allorder" role="tab" data-toggle="tab">全部消息</a></li><li role="presentation"><a href="#noreadMessage" aria-controls="news" role="tab" data-toggle="tab">未读消息</a></li><li role="presentation"><a href="#readMessage" aria-controls="readMessage" role="tab" data-toggle="tab">已读消息</a></li></ul><!-- 消息情况 --><!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="allMessage">全部消息</div><div role="tabpanel" class="tab-pane" id="noreadMessage">未读消息</div><div role="tabpanel" class="tab-pane" id="readMessage">已读消息</div></div></div></div>

4、代码结构图

总结

以上就是本次项目的全部内容,需要交流或者获取代码请关注微信公众号:coding加油站获取


http://www.ppmy.cn/news/400139.html

相关文章

真二次元!动漫形象风格迁移

点击上方“机器学习与生成对抗网络”&#xff0c;关注星标 获取有趣、好玩的前沿干货&#xff01; 文章&#xff1a;机器之心 一张输入人脸图像&#xff0c;竟能生成多样化风格的动漫形象。伊利诺伊大学香槟分校的研究者做到了&#xff0c;他们提出的全新 GAN 迁移方法实现了「…

动漫

转载于:https://www.cnblogs.com/zxy160/p/7828427.html

动漫风格化—AnimeGANv2

animegan2_face2paint_v2 bryandlee/naver-webtoon-faces AnimeGANv2 项目 [Project]AnimeGANv2 摘要 在计算机视觉和艺术风格转移方面&#xff0c;将现实世界场景的照片转换为动漫风格的图像是一项有意义且具有挑战性的任务。我们之前提出的AnimeGAN结合了神经风格迁移合…

纯css动漫轮播图

效果 代码 <!doctype html> <html> <head> <meta charset"utf-8"><meta name"author" content"JiuMeilove"/> <title>窗口轮播图</title> <style> * {margin: 0;padding: 0; } body {backgrou…

GAN系列之动漫风格迁移AnimeGAN2

动漫是我们日常生活中常见的艺术形式&#xff0c;被广泛应用于广告、电影和儿童教育等多个领域。目前&#xff0c;动漫的制作主要是依靠手工实现。然而&#xff0c;手工制作动漫非常费力&#xff0c;需要非常专业的艺术技巧。对于动漫艺术家来说&#xff0c;创作高质量的动漫作…

记录用AnimeGAN将图转换成动漫风所遇到的问题

这项来自武汉大学和湖北工业大学的研究&#xff0c;采用的是神经风格迁移 生成对抗网络&#xff08;GAN&#xff09;的组合。 效果提前预览 论文出处&#xff1a;《AnimeGAN: a novel lightweight GAN for photo animation》 源码地址&#xff1a;https://github.com/Tachiban…

[深度学习 - 发现有趣项目] 动漫图生成手绘草图 Anime2Sketch

我公司的科室开始在公众号上规划一些对外的技术文章了&#xff0c;包括实战项目、模型优化、端侧部署和一些深度学习任务基础知识&#xff0c;而我负责人体图象相关技术这一系列文章&#xff0c;偶尔也会出一些应用/代码解读等相关的文章。 文章在同步发布至公众号和博客&#…

一文教你用AnimeGANv2将你女朋友的照片变成动漫人物照

AnimeGANv2 是一种非常特殊的算法&#xff0c;可以将图片转换为艺术动漫画&#xff0c;通常情况下&#xff0c;想要将人物照片换为漫画图片时&#xff0c;通常没有太多选择&#xff0c;因为大多数工具都是以简单的方式设计的&#xff0c;但是 AnimeGANv2 算法的诞生改变了这一现…