900字范文 > 大学生个人网页模板简单网页制作作业成品极简风格个人介绍HTML(个人博客 4页)

大学生个人网页模板简单网页制作作业成品极简风格个人介绍HTML(个人博客 4页)

时间：2022-10-02 02:32:51

⛵源码获取文末联系✈
Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 个人博客网站 | 个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品| HTML期末大学生网页设计作业，Web大学生网页

HTML：结构

CSS：样式

在操作方面上运用了html5和css3，

采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

JavaScript：做与用户的交互行为

文章目录

前端学习路线网页基本结构网页演示HTML结构代码学的反而越迷茫学习更多

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；

（2）css文件：css全部页面样式,文字滚动, 图片放大等；

（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个

(2)二级页面：从首页点击进入之后的页面叫做二级页面

(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的

首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名

导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.

网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

HTML结构代码

<!DOCTYPE html ><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script src="js/swiper.min.js"></script><script type="text/javascript" src="js/index.js"></script><title>个人博客</title><style type="text/css">* {margin: 0;padding: 0;}.menus.menus1 h1 {vertical-align: sub;float: left;margin-top: 30px;font-size: 54px;text-transform: none;font-family: "华文行楷";font-weight: lighter;color: #000;}.banenr {height: 80px;width: auto;background-color: #eb4537;}.banenr .banner-bg h3 {font-size: 36px;font-weight: lighter;float: left;margin-top: 20px;color: #f1f1f1;margin-left: -30px;}.banner-bg {margin: auto;width: 1100px;height: 80px;padding-left: 0px;}a {color: #000;text-decoration: none;}li {list-style: none;}.clear {clear: both;}.menus {width: 1100px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;height: 100px;}.menus ul {width: 700px;position: relative;float: right;margin-top: 20px;font-style: italic;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #ff5a5a;}.menus li {float: left;width: 100px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;font-size: 24px;}.menus li:nth-child(2) {color: #fff;}.menus .bg {width: 100px;height: 40px;position:absolute;left: 0;top: 0;z-index: -1;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;background-image: url(picture/ban.png); /*动画随鼠标滑动*/}.tab {width: 750px;height: 500px;border: 1px solid #000;margin-top: 20px;font-size: 40px;line-height: 500px;text-align: center;color: #888;font-weight: bold;display: none;}.show {display: block;}#footer {text-align: center;vertical-align: middle;height: 150px;padding-top: 50px;color: #FFF;background-color: #333;}body {margin: 0px;background-color: #f1f1f1;}.slider {background-color: #C99;height: 620px;width: 1100px;margin-right: auto;margin-left: auto;margin-top: 0px;margin-bottom: 0px;border-radius: 12px;padding-bottom: 0px;}body {width:auto;margin: 0px;padding: 0px;}.slider1 {height: 600px;width: 1080px;margin-top: 10px;margin-right: 10px;margin-left: 10px;overflow: hidden;border-radius: 12px;}.welcome-text {height: 200px;width: 1100px;margin-top: 12px;margin-right: auto;margin-bottom: 0px;margin-left: auto;background-color: #f1f1f1;font-size: 48px;text-align: center;vertical-align: middle;padding-top: 40px;}.scroll-td-text {height: 40px;width: 280px;text-align: center;vertical-align: middle;padding-top: 10px;font-size: 24px;}.introduce {height: 40px;width: 1100px;margin-right: auto;margin-left: auto;font-size: 24px;padding-top: 8px;border-bottom-width: 2px;border-left-width: 10px;border-bottom-style: solid;border-left-style: solid;border-bottom-color: #F00;border-left-color: #9F3;}.introduce-content {height: 500px;width: 1100px;margin-right: auto;margin-left: auto;background-color: #F0EBDB;margin-bottom: 5px;border-radius: 15px;}#img-introduce {background-color: #CC0;float: left;height: 480px;width: 620px;margin: 10px;}#text-introduce {margin: 10px;height: 480px;width: 440px;float: left;}.text-introducce {height: 100px;width: 440px;margin-bottom: 20px;margin-top: 10px;}.scroll {height: 380px;width: 1000px;margin-right: auto;background-color: #FFF;position: relative;overflow: hidden;margin-top: 20px;margin-bottom: auto;margin-left: auto;}.ms-ex {padding: 10px;height: 440px;width: 1100px;border: 1px solid #999;margin-right: auto;margin-left: auto;margin-top: 14px;margin-bottom: 14px;}.text-box {height: 40px;width: 150px;margin-top: 20px;margin-bottom: 10px;margin-left: 10px;float: left;font-size: 30px;text-align: center;vertical-align: middle;padding-top: 10px;}.ms-exhibition p {height: 36px;margin-top: 0px;}.ms-exhibition {margin-right: auto;font-size: 36px;padding-top: 0px;text-align: center;height: 36px;width: 1000px;margin-left: auto;margin-bottom: 0px;margin-top: 0px;background-color: #f1f1f1;}#text-box1 {background-color: #FF6;border-radius: 12px;}#text-box3 {background-color: #F03;border-radius: 12px;}#text4 #text-box4 {background-color: #6F6;border-radius: 12px;}.swiper-container {width: 100%;height: 100%;margin-left: auto;margin-right: auto;}#text-box2 {background-color: #09F;border-radius: 12px;}.text-box-right {float: left;height: 80px;width: 250px;margin-top: 16px;margin-right: 0px;margin-bottom: 0px;margin-left: 10px;font-size: 18px;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;margin-top: 10px;}.scroll-in {height: 300px;width: 1080px;margin-top: 40px;margin-right: auto;margin-left: auto;}.scroll-td {height: 280px;width: 280px;margin-left: 0px;}h3 {font-size: 24px;line-height: 30px;font-family: "微软雅黑";text-indent: 48px;}h1 {line-height: 24px;font-size: 44px;}</style><link href="css/swiper.min.css" rel="stylesheet" type="text/css"></head><body><div class="menus menus1"><h1>个人博客</h1><ul><div class="bg"></div><li><span><a href="javascript:;" target="blank">首页</a></span></li><li><span><a href="xz.html" target="blank">游戏扩列</a></span></li><li><span><a href="dumplings.html" target="blank">爱好</a></span></li><li><span><a href="drink.html">番剧</a></span></li></ul><div class="clear"></div></div><script src="js/jquery-1.10.2.js"></script><script src="js/index.js"></script><div class="banenr"><div class="banner-bg"><h3>一个在中国上学的学生</h3></div></div><div class="slider"><div class="slider1"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a href="dumplings.html" target="new"><img src="picture/jz.jpg"></a></div></div><div class="swiper-pagination"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div><script>var swiper = new Swiper('.swiper-container', {slidesPerView: 1,spaceBetween: 30,loop: true,pagination: {el: '.swiper-pagination',clickable: true,},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});</script></div></div><hr><div class="welcome-text"><h1>欢迎您来到       我的个人空间</h1><h3> </h3><h3>欢迎你，在此偶遇的陌生人，希望你我的灵魂能够发生有趣的碰撞。</h3></div><div class="introduce">个人简介</div><div class="introduce-content"><div id="img-introduce"><img style="width: 100%;height: 100%;" src="picture/01.png"> </div><div id="text-introduce" class="text-introduce"><div class="text-introducce" id="text1"><div class="text-box" id="text-box1"> ·个人信息·</div><div class="text-box-right" id="box-right1"> <br>年龄：20 <br> </div></div><div class="text-introducce" id="text2"><div class="text-box" id="text-box2"> ·吃！·</div><div class="text-box-right" id="box-right2"> 最爱的食物：炸酱面<dr></dr>最爱的饮料：椰果百香果汁</div></div><div class="text-introducce" id="text3"><div class="text-box" id="text-box3">·留言·</div><div class="text-box-right" id="box-right-3">这里是我的个人博客，很高兴你能访问，在这里我会将我自己展现给你，希望你能通过我的自我介绍了解我，不仅是外在看起来的那样，更多的是我的爱好与兴趣，希望能与你有所交集。希望能通过这种方式，遇到志同道合的朋友，在一起聊聊兴趣，在一起娱乐。</div></div></div></div><hr><div class="ms-ex"><div class="ms-exhibition"><p>照片墙</p></div><div class="scroll"><marquee direction="right" behavior="alternate" scrolldelay="200" onmouseover="stop()" onmouseout="start()"><table width="2400" border="0" cellspacing="20" cellpadding="0"><tr><td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td><td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td><td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td><td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td><td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td><td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td><td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td><td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td></tr><tr><td class="scroll-td-text">近期</td><td class="scroll-td-text">疫情锻炼</td><td class="scroll-td-text">懵</td><td class="scroll-td-text">高考完剃毛</td><td class="scroll-td-text">毕业聚餐</td><td class="scroll-td-text">阴间万圣节特效</td><td class="scroll-td-text">躺平</td><td class="scroll-td-text">军训期</td></tr></table></marquee></div></div> <footer><div id="footer"><a style="color: #fff;">个人版权</a><p></p></div></footer></body></html>