时间：2023-10-16 13:48:01 | 来源：网站运营
时间：2023-10-16 13:48:01 来源：网站运营
大一学生《Web前端网课作业》基于HTML+CSS自我介绍网页设计与制作：精彩专栏推荐 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业： 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式：【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码：【 echarts大屏展示大数据平台可视化(150套) 】 免费且实用的WEB前端学习指南： 【 web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1） html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我的个人网页</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><!----网站头部开始----><div class="logo"><img src="images/logo.jpg"/></div><div id="nav"><ul> <li><a class="hos" href="index.html">首页</a></li><li><a href="jiben.html">基本资料</a></li><li><a href="xingqu.html">兴趣爱好</a></li><li><a href="zuoyouming.html">座右铭</a></li><li><a href="pingjia.html">自我评价</a></li></ul></div><!-----网站头部结束--------------><!-----banner-------><div class="box" id="box"> <div class="inner"> <!--轮播图--> <ul> <li><a href="#"><img src="images/banner1.jpg" alt=""></a></li> <li><a href="#"><img src="images/banner2.jpg" alt=""></a></li> <li><a href="#"><img src="images/banner3.jpg" alt=""></a></li> </ul> <ol class="bar"> </ol> <!--左右焦点--> <div id="arr"> <span id="left"> < </span> <span id="right"> > </span> </div> </div></div><!------banner结束-----><div class="main"> <div class="box4"> <img src="images/01.jpg"> <div class="right"> <h1>关于我</h1> <br> <p>我的的青春，有鲜红色的热情奔放，也有黑色的压抑无味。我一直希望有一个自由的青春，做自己想要做的事；有一个快乐的青春，在海中畅所欲言；</p> <br /> <p> 人生是一条漫长的路，充满荆棘与坎坷，如果说曲线比直线美，在于曲线是有转折的，富有流动的韵味，那么人生也就正是因为荆棘而多彩，因为坎坷而美丽。</p> </div> </div> <div class="box4"> <img src="images/02.jpg"> <div class="right"> <h1>我的爱好</h1> <br> <p>大学喜欢上摄影，对摄影的喜爱，将近五年了。从数码相机到单反，再到现在手机摄影。</p> <br /> <p>我开始明白摄影，它不单单依靠的是器材，我对于摄影的理解是它是我用来看待世界的方式，我摄影不但是为了展现美，我也可以用来创造美，让更多的人看到这样的美。</p> </div> </div> <div class="box4"> <img src="images/03.jpg"> <div class="right"> <h1>座右铭</h1> <br> <p>我读的书愈多，就愈亲近世界，愈明了生活的意义，愈觉得生活的重要。</p> <br /> <p>人生并不像火车要通过每个站似的经过每一个生活阶段。人生总是直向前行走，从不留下什么。</p> <br /> <p>人生最精彩的不是实现梦想的一瞬间,而是坚持梦想的过程。</p> </div> </div></div><div class="foot">©2019 我的个人网站主页 版权所有</div><script type="text/javascript" src="js/banner.js"></script> </body></html>body { margin: 0 auto; font-size: 14px; font-family: "微软雅黑"; line-height: 22px; background: #d8d7d7;}div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd { height: auto; margin: 0; padding: 0; vertical-align: middle;}li { list-style: none;}img { border: 0; margin: 0; padding: 0;}a:link { color: #333; text-decoration: none;}a:hover { color: #629705; text-decoration: none; overflow: hidden;}.logo { width: 1000px; height: 166px; margin: 0 auto;}#nav { width: 1000px; height: 50px; background: #fdc14c; margin: 0 auto;}#nav ul { width: 1000px; height: 50px; line-height: 50px; font-size: 14px; margin: 0 auto;}#nav ul li { width: 200px; height: 50px; line-height: 50px; color: #FFF; float: left; text-align: center;}#nav li a { color: #20201f; font-family: "微软雅黑"; font-size: 16px; margin-left: 2px; display: block; font-weight: bold;}#nav li a:hover { color: #fff; background: #d58f08;}.hos { color: #fff !important; background: #d58f08;}.box { width: 1000px; height: 335px; margin: 0 auto;}.inner { width: 1000px; height: 335px; position: relative; overflow: hidden;}.inner img { width: 1000px; height: 335px; vertical-align: top}.box ul { width: 1000%; position: absolute; list-style: none; left: 0; top: 0;}.inner li { float: left;}ol { position: absolute; height: 20px; right: 20px; bottom: 12px; text-align: center; padding: 5px;}ol li { display: block; width: 20px; height: 20px; line-height: 20px; background-color: #fff; margin: 5px; cursor: pointer;}ol .current { background-color: red;}#arr { display: block;}#arr span { width: 30px; height: 40px; position: absolute; left: 14px; top: 156px; margin-top: -20px; background: #fff; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #000; opacity: 0.5; border: 1px solid #fff;}#arr #right { right: 18px; left: auto;}.main { width: 1000px; margin: 0 auto; height: auto; overflow: hidden; background: #FFFFFF;} font-size: 12px; text-indent: 2em;}.pingjia-box01 { width: 840px; margin: 0 auto; margin-top: 0px; margin-bottom: 0px; margin-top: 30px; margin-bottom: 20px;}.pingjia-box01 img { width: 300px; height: 160px; float: left; margin-top: 20px; margin-right: 20px;}.pingjia-box01 .bx1 { height: 220px; padding: 20px; border: #333333 1px solid; margin-bottom: 20px;}.pingjia-box01 .bx1 h1 { font-size: 16px; height: 40px; line-height: 40px; padding-left: 10px; background: #75b980;}.pingjia-box01 .bx1 p { color: #787676; font-size: 14px; line-height: 30px; text-indent: 2em;}.zym-box01 { width: 840px; height: auto; margin: 0 auto; margin-top: 10px;}.zym-box02 { margin-top: 10px; line-height: 25px; font-size: 14px; width: 840px; margin: 0 auto; margin-bottom: 20px;}.scroll { height: 90px; width: 100%; overflow: hidden; position: relative; margin-top: 30px;}.scroll ul { width: 100%; position: absolute; left: 0; top: 0;}.scroll span { font-size: 20px; height: 30px;}.scroll li { height: 30px; line-height: 30px;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：设计,学生,作业
