HTML+CSS 小智个人网页设计之web期末大作业

本文主要是介绍HTML+CSS 小智个人网页设计之web期末大作业，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML个人网页设计作业使用vscode制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版，内容比较丰富，色彩鲜明有活力，很适合新手拿来学习。

web电脑桌面式个人主页登录:

影视网站

代码：

<html><head><meta charset="utf-8" /><title>首页</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><link rel="stylesheet" type="text/css" href="css/index.css"/></head><body>
<!---------------- 导航栏 ------------------><div class="header"><div class="container"><!-- logo --><div class="site-logo"><a href="#"><img src="img/index/tiger.png" /></a></div><!-- 首页导航 --><div class="site-list"><ul class="clearfix"><li><a href="index1.html"><font color="coral"><b>首页</b></font></a></li><li><a href="dianying2.html">电影</a></li><li><a href="dianshij2.html">电视剧</a></li><li><a href="#">动漫</a></li><!-- tab下拉菜单 --><li class="qita"><a href="#">其他</a><ul class="dis"><li><a href="dianying2.html">电影</a></li><li><a href="#">综艺</a></li><li><a href="#">体育</a></li><li><a href="#">纪录片</a></li></ul></li></ul></div><!-- 登入/注册 --><div class="login"><a href="dengru.html"><img src="img/index/yonghu3.png"/></a></div><!-- 搜索框 --><div class="site-search"><form action=""><input class="search-text"   type="text" placeholder="请输入关键字"/><input class="submit" type="submit" value="搜索"/></form></div></div></div></body>
</html>

web作业之欢迎页面：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>欢迎页</title><link rel=" stylesheet" tye="text/css" href="css/welcome.css"></head><body><div id="content" style=" background-image: url(img/欢迎页.jpg);"><div id="name"><p>I AM JAVA工程师</div><div id="tishi"><a href="主页.html"><p>了解更多</p></a></div></div></body></html>

个人主页：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel=" stylesheet" tye="text/css" href="css/content.css"></head><body><div id="header"><a href="主页.html"><div id="dao1"><p>主页</p></div></a><a href="关于我.html"><div id="dao2"><p>关于我</p></div></a><a href="技能.html"><div id="dao3"><p>技能</p></div></a><a href="作品.html"><div id="dao4"><p>作品</p></div></a><a href="联系我.html"><div id="dao5"><p>联系我</p></div></a></div><div id="banner"><img src="img/banner.jpg"></div><div id="content"><p>最新作品>></p><div id="jiantou"><br><br></div><table id="table1" width="1200" height="300" align="center" cellspacing="25"><tr><td align="center"><img width="300" height="200" src="img/作品3.jpg"></td><td align="center"><img width="300" src="img/作品2.jpg"></td><td align="center"><img width="300" height="200" src="img/作品1.jpg"></td></tr></table><table id="table2" width="1200" height="30" align="center"><tr><td width="350" align="center"><p>AI插画——《日落》</p></td><td width="350" align="center"><p>AI插画——《购物系列之一》</p></td><td width="350" align="center"><p>AI插画——《购物系列之二》</p></td></tr></table></div><div id="footer"><p>@copyright 小智解说个人所有</p></div></body></html>

联系我：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel=" stylesheet" tye="text/css" href="css/link.css"></head><body><div id="header"><a href="主页.html"><div id="dao1"><p>主页</p></div></a><a href="关于我.html"><div id="dao2"><p>关于我</p></div></a><a href="技能.html"><div id="dao3"><p>技能</p></div></a><a href="作品.html"><div id="dao4"><p>作品</p></div></a><a href="联系我.html"><div id="dao5"><p>联系我</p></div></a></div><div id="content"><div id="wenzi"><p><br>联系我</p></div><div id="wenzi1"><div id="dizhi"><p>我的电话：<br>18888888888<br><br> 我的邮箱：<br>18888888888@qq.com<br><br>我的地址：<br>安徽省合肥市</p></div><table width="460" height="250"><tr align="center"><td width="100" height="60"><font size="6" color="#1B2754" face="黑体">姓名：</font></td><td align="left"><label for="textfield"></label><input name="textfield" type="text" id="textfield" size="60"></td></tr><tr align="center"><td width="100" height="60"><font size="6" color="#1B2754" face="黑体">性别：</font></td><td align="left"> <input type="radio" name="radio" id="radio"><font color="#1B2754" face="黑体" size="5">男</font><input name="radio" type="radio" id="radio2" value="女"><label for="radio"><font color="#1B2754" face="黑体" size="5">女</font></label></td></tr><tr align="center"><td width="100" height="130"><font size="6" color="#1B2754" face="黑体">留言：</font></td><td align="left"><label for="textfield3"></label><textarea name="textfield3" id="textfield3"></textarea></td></tr><tr><td width="100" height="60"></td><td><input type="submit" name="button" id="button" value="取消">&nbsp;&nbsp;&nbsp;<input type="reset" name="button2" id="button2" value="发送"></td></tr></table></div></div><div id="link"></div><div id="footer"><p>@copyright 小智解说个人所有</p></div></body></html>

对于一些web期末作业很适合！

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！随后联系小编获取源码！

欢迎一起交流学习！

这篇关于HTML+CSS 小智个人网页设计之web期末大作业的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！