个人简介网页设计作业 静态html个人介绍网页作业 dw个人网站模板下载 web静态大学生简单网页 个人网页作品代码 个人网页制作 学生个人网页 -尊龙游戏旗舰厅官网
尊龙游戏旗舰厅官网
收集整理的这篇文章主要介绍了
个人简介网页设计作业 静态html个人介绍网页作业 dw个人网站模板下载 web静态大学生简单网页 个人网页作品代码 个人网页制作 学生个人网页
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者尊龙游戏旗舰厅官网主页: 【尊龙游戏旗舰厅官网主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌html七夕情人节表白网页制作 (110套) 】
🌎超炫酷的echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的web前端学习指南： 【📂web前端零基础到高级学习视频教程 120g干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获csdn年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
📂文章目录
- 一、👨🎓网站题目
- 二、✍️网站描述
- 三、📚网站介绍
- 四、🌐网站演示
- 五、🔧 网站代码
- 🧱html结构代码
- 💒css样式代码
- 六、🥇 如何让学习不再盲目
- 七、🎁更多干货
🧑个人网页设计、🙋♂️个人简历制作、👨💼简单静态html个人网页作品、👨🏭个人介绍网站模板 、等网站的设计与制作。
⭐个人网页设计网站模板采用div css布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）css样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。
🏅 一套a 的网页应该包含 (具体可根据个人要求而定)
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言html5 css3 js程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用ps做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意html编辑软件（如：dreamweaver、hbuilder、vscode 、sublime 、webstorm、text 、notepad 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是尊龙游戏旗舰厅尊龙游戏旗舰厅官网首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
🧱html结构代码
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" /> <script type="text/javascript" src="js/banner.js">script> head><body> <div class="main"> <div class="top0"> <div class="daohang"> <div class="logo"><img src="images/logo.png" />div> <div id="nav"> <ul> <li><a class="hot" href="index.html">尊龙游戏旗舰厅尊龙游戏旗舰厅官网首页a>li> <li><a href="about.html">关于我a>li> <li><a href="jingli.html">我的经历a>li> <li><a href="rizhi.html">我的日志a>li> <li><a href="lianxi.html">联系我a>li> ul> div> div> div> <div id="playbox"><div class="pre">div><div class="next">div><div class="smalltitle"><ul><li class="thistitle">li><li>li><li>li>ul>div><ul class="oulplay"><li><a href="#" target="_blank"><img src="images/1.jpg" />a>li><li><a href="#" target="_blank"><img src="images/2.jpg"/>a>li><li><a href="#" target="_blank"><img src="images/3.jpg"/>a>li>ul>div> <div class="box01"> <h1>我的爱好h1> <h2>my hobbyh2> div> <div class="box02"> <div class="bx1"> <h1>我的最爱服饰h1> <h2>洛丽塔h2> <p>追求的是一种崭新的衣着态度p> <p>寻求有别一般的生活方式p> <p>甜美古典哥特风p> div> <div class="bx1"> <h1>我的最爱美食h1> <h2>美味蛋糕h2> <p>蛋糕是甜蜜的，蛋糕是快乐的p> <p>使我们保持充沛的活力p> <p>甜蜜幸福甜蜜p> div> <div class="bx1"> <h1>我的最爱宠物h1> <h2>小金鱼h2> <p>喜欢鱼儿的自在的游来游去p> <p>带给人带来安逸宁静p> <p>充满了无限活力p> div> div> <div class="box03"> <div class="bx1"> <img src="images/01.jpg" /> <div class="right"> <h1>这就是我<span>甜span>h1> <h2>虎虎生风h2> <p>这发光的美貌是真实的吗<br /><p> <p>明明可以靠颜值<br/>p> <p>偏偏要靠才华<br/>p> <p>存在就是完美本身<br/>p> div> div> <div class="bx2"> <p>甜美p> <p class="padd0">可爱p> div> <div class="bx1"> <div class="right marl60"> <h1>这就是我<span>美span>h1> <h2>清水芙蓉h2> <p>双瞳剪水 飘飘回眸 撩人心弦 p> <p>可盐可甜一眼万年p> <p>教科书级别的美貌p> div> <img class="mar0" src="images/02.jpg" /> <div class="bx3">查看更多div> div>div> <div class="box04"> <h1>我的作品h1> <h2>my workh2> <div class="box04-ner"> <ul> <li> <img src="images/04.jpg" /> <p>我喜欢摄影，摄影是这样一门艺术，连接时空、记录史实。它给大众传递的是历史，是现 实，是时间与空间。 p> <img src="images/05.jpg" /> li> <li> <img src="images/06.jpg" /> <img src="images/07.jpg" /> <p>我喜欢用电脑发挥我的想象，制作视觉冲击感强烈的海报，给人们以不一样的感觉，刺激大家的视觉神经。p> li> <li class="mar0"> <img src="images/08.jpg" /> <p>我喜欢做手工制品，静静的享受制作的过程，从无到有的过程，创造一份属于自己对一无二的作品，很有成就感。 p> <img src="images/09.jpg" /> li> ul> div> div> <div id="foot"> <img src="images/foot-logo.jpg" /> div> div>body> html>💒css样式代码
@charset "utf-8"; /* css document */ body{ margin:0 auto; font-size:14px; font-family: "微软雅黑"; line-height:22px; background:#d7d5d5; }div,p,input,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd{ height:auto; margin:0;; padding:0; vertical-align:middle ;}li{ list-style:none;}a{ text-decoration:none;}.ul{ list-style:none;}.divclear{ clear:both;}img{ border:0; margin:0; padding:0;}a{color:#333;}a:link{ color:#ffffff;}a:hover {color:#629705;text-decoration:none;overflow:hidden;}/*---网页开始-----*/ .main{ width:1100px; height:auto; overflow:hidden; margin:0 auto; background:#fff;}/*---top开始-----*/ .top0{ width:1100px; height:56px; background:#000;} #divsmallbox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;} #playbox{ width:1000px; height:409px; margin:20px auto; background:#333; position:relative; overflow:hidden;} #playbox .oulplay { width:99999px; position:absolute; left:0; top:0;} #playbox .oulplay li{ float:left;} #playbox .pre{ cursor:pointer; width:45px; height:45px; background:url(../images/l.png) no-repeat; position:absolute; top:190px; left:10px; z-index:10;} #playbox .next{ cursor:pointer; width:45px; height:45px; background:url(../images/r.png) no-repeat; position:absolute; top:190px; right:10px; z-index:10;} #playbox .smalltitle {width:1000px; height:10px; position:absolute; bottom:15px; z-index:10} #playbox .smalltitle ul{ width:120px; margin:0 auto;} #playbox .smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;} #playbox .smalltitle .thistitle{ background:#69aaec;}.top{ width:1100px; height:390px; background:url(../images/banner1.jpg) no-repeat} .daohang{ width:1100px; height:56px; background:#000;filter:alpha(opacity=80);-moz-opacity:0.5;background: rgba(0,0,0,0.3);} .logo{ width:170px; margin-left:130px; float:left; height:56px;} #nav{width: 730px;height: 56px;margin: 0 auto;margin-left: auto;margin-left: 70px;float: left;} #nav ul{ width:685px; height:56px; line-height:56px; font-size:14px; margin:0 auto;} #nav ul li{ width: 90px; height:56px; margin:0px 10px; line-height:56px; color:#fff; float:left; text-align:center;} #nav li a {color: #ffffff; font-family: "宋体"; font-size: 16px; margin-left: 2px; display: block; font-weight:bold; } #nav li a:hover, #nav li.hover a {background: url(../images/nav.png) no-repeat 0px 15px; color: #080808 !important;} .hot{ width: 90px; height: 56px; background: url(../images/nav.png) no-repeat 0px 15px; color: #080808 !important;} /*-----box1开始-----*/ .box01{ width:1100px; height:125px; padding-top:30px; text-align:center} .box01 h1{ font-size:16px; font-weight:normal} .box01 h2{font-size:14px; font-weight:normal} /*-----box2开始-----*/ .box02{ width:887px; height:380px; margin:0 auto; background:url(../images/box01.jpg) no-repeat;} .box02 .bx1{width: 200px; height: 240px; position: relative; left: 70px; top: 10px; float: left; margin-right: 77px; text-align:center} .box02 .bx1 h1{ height:30px; font-size:16px; line-height:30px; margin-top:10px; margin-top:20px;} .box02 .bx1 h2{ height:25px; font-size:14px; line-height:25px; font-weight:normal} .box02 .bx1 h3{ height:25px; font-size:14px; line-height:25px; } .box02 .bx1 p{font-size:11px; } .box02 .bx1 h3 span{ background:#070101; color:#fff; padding:0px 5px; margin-right:5px;} /*-----box3开始-----*/ .box03{ width:888px; height:823px; margin:0 auto; border:#c6c4c5 2px solid; border-top:none; border-bottom:#c6c4c5 10px solid; margin-top:80px;} .box03 .bx1{ width:886px; height:330px; margin-top:20px;} .box03 .bx1 img{ width:445px; height:325px; float:left; margin-left:60px; margin-right:110px;} .box03 .bx1 .right{ width:215px; height:330px; float:left; text-align:center} .box03 .bx1 .right h1 { font-size: 20px; width: 30px; height: 235px; float: right; line-height: 25px; padding-left: 10px; margin-top: -15px; } .box03 .bx1 .right h1 span{ background:#f00; padding:2px; font-size:12px; } .box03 .bx1 .right h2 { font-size: 20px; width: 30px; float: right; line-height: 25px; background: #f00; padding: 10px 0px; margin-left: 10px;} .box03 .bx1 .right p { color: #5e5e5e; width: 26px; float: right; font-size: 14px; line-height: 15px; border-right: #333 1px solid; padding: 0px 2px; } .box03 .bx2{width: 50px; height: 78px; margin: 0 auto;margin-left: auto; background: url(../images/03.jpg) no-repeat; margin-left: 470px;} .box03 .bx2 p { color: #5e5e5e; width: 25px; float: right; font-size: 14px; line-height: 15px; padding: 0px 18px; height: 50px; } .box03 .bx2 .padd0{ padding:0px !important;} .marl60{margin-left: 60px;} .mar0{margin-right: 0px!important;} .box03 .bx3{ width: 25px;height: 80px;border: #e70012 1px solid;float: left;text-align: center;line-height: 20px;font-weight: bold;margin-left: 20px;margin-top: 260px;} /*-----box4开始-----*/ .box04{ width:888px; height: 780px; margin-top:88px; margin:0 auto; border:#c6c4c5 2px solid; border-top:none; border-bottom:#c6c4c5 10px solid; margin-top:80px;} .box04 h1{ font-size:16px; font-weight:normal; text-align:center} .box04 h2{font-size:14px; font-weight:normal; text-align:center; } .box04-ner{ height:615px; width:888px;margin-top:40px;} .box04-ner ul{ padding:0px} .box04-ner ul li{width: 263px; height: 615px; float: left; margin-right: 49px; text-align: center;} .box04-ner ul li p{ padding:0px 10px; font-size:14px;} .box04-ner ul li img{ margin:30px 0px;} /*-----foot开始-----*/ #foot{ height:125px; width:100%; background:#140b0c; text-align:center; margin-top:120px;} #foot img{ margin-top:24px;} /*---foot结束-----*/ /*---加盟-----*/ .jm-top{ height:280px !important; background:url(../images/banner2.jpg) no-repeat;} .jm-box01{ width:695px; height:182px; margin:0 auto;margin-top:40px;} .jm-box01 h1{ font-size:18px; height:40px; line-height:40px; margin-bottom:10px;} .jm-box01 .bx{ width:195px; height:35px; float:left;} .jm-box01 .inpt{ width:133px; height:20px; border:#333 1px solid;} .jm-box01 .bx2{ width:195px; height:35px; margin-left:288px; float:left;} .jm-box01 .bx3{ width:695px; height:40px;margin-top:80px;} .jm-box01 .bx3 .yxs{ width: 615px;height: 31px;border: #333 1px solid;margin-top: 10px; } .jm-box01 span { margin-right:10px; line-height:35px;} .jm-box01 p{ height:40px; line-height:40px; text-align:center;}.jm-box02{ width:695px; height:160px; margin:0 auto;margin-top:40px;} .jm-box02 ul{ padding:0 px;} .jm-box02 ul li{width: 230px; height: 42px; line-height: 42px; margin-bottom: 15px; float: left;} .jm-box02 ul li img{ margin-right:25px; float:left;} .marl{ margin-left:200px;} .jm-box02 ul li p{ text-align:center; line-height:18px;width: 180px;}/*---关于尊龙游戏旗舰厅官网-----*/ .ab-top{ height:351px !important; background:url(../images/banner3.jpg) no-repeat;} .ab-box01{ width:1100px; height:40px; padding-top:30px; text-align:center} .ab-box01 h1{ font-size:18px; } .ab-box01 h2{font-size:16px; font-weight:normal;} .ab-box02 {width: 811px;height: 748px;margin: 0 auto;margin-top: 0px;border: #c6c4c5 2px solid;border-top-color: rgb(198, 196, 197);border-top-style: solid;border-top-width: 2px;border-bottom-color: rgb(198, 196, 197);border-bottom-style: solid;border-bottom-width: 2px;border-top: none;border-bottom: #c6c4c5 10px solid;margin-top: 80px;text-align:center;margin-bottom:20px; } .ab-box03{ width:857px; height:648px; margin:0 auto; margin-top:40px;} .ab-box03-left{ width:385px; height:628px; padding:10px; float:left;} .ab-box03-left .bx1{ padding:0px 10px; height:28px; border:#333 1px solid; font-size:16px; margin-bottom:25px; float:right;} .ab-box03-left .bx2{width:385px; height:auto; overflow:hidden; margin-bottom:20px;} .ab-box03-left .bx2 p{ line-height:17px; font-size:14px; text-align:right;} .ab-box03-left .bx3 {width: 385px; height: 120px; text-align: right;} .ab-box03-left .bx3 img{ margin-top:10px; float:right;} .ab-box03-right{ width:420px; height:648px; padding-left:30px; float:left; background:url(../images/18.jpg) no-repeat;} .ab-box03-right .bx1{ padding:0px 10px; height:28px; border:#333 1px solid; font-size:16px; margin-bottom:25px; float:left;} .ab-box03-right .bx2{width:385px; height:auto; overflow:hidden; margin-bottom:20px;} .ab-box03-right .bx2 p{ line-height:17px; font-size:14px; text-align:left;} .ab-box03-right .bx3 {width: 385px; height: 120px; text-align: left;} .ab-box03-right .bx3 img{ margin-top:10px; float:left;} /*---新闻资讯-----*/ .news-top{ height:303px !important; background:url(../images/banner4.jpg) no-repeat;} .news-box02 {width: 850px;height: 400px;margin: 0 auto;margin-top: 0px;border: #c6c4c5 2px solid;border-top-color: rgb(198, 196, 197);border-top-style: solid;border-top-width: 2px;border-bottom-color: rgb(198, 196, 197);border-bottom-style: solid;border-bottom-width: 2px;border-top: none;border-bottom: #c6c4c5 10px solid;margin-top: 80px;margin-bottom:20px; } .zhaop{ width:320px; float:left; margin-left:20px;} .news-box02 ul{ padding:0px; margin-bottom:50px; width:500px; float:left;} .news-box02 ul li{ width: 850px; height:35px; line-height:30px; font-size:14px;} .news-box02 ul li p{width: 690px; float:left; padding-left:40px;} .news-box02 ul li span{ float:left; width:120px;} .news-box03{ width: 160px; height:34px; margin:0 auto;} .news-box03 a{ width:22px;text-align: center; height:20px; float:left; color:#333;} .hots{ background:#140b0c; color:#fff !important;}/*---会员中心-----*/ .huiyuan-top{ height:308px !important; background:url(../images/banner5.jpg) no-repeat;} .huiyuan-center{ width:1000px; height:425px; margin:0 auto;} .huiyuan-box01{ width:152px;text-align:center; height:402px; float:left; margin-top:30px; background:url(../images/25.jpg) no-repeat;margin-left:66px;} .huiyuan-box01 h1{ margin-top:8px; font-size:16px; width:152px; height:33px; text-align:center;} .huiyuan-box01 h2{ font-size:14px;text-align:center;} .huiyuan-box01 p{ width:110px; margin:0 auto; border-top:#333 1px solid; font-size:12px;text-align:center;} .huiyuan-box02{ width:740px; height:402px; float:left; margin-left:40px;margin-top:40px;} .huiyuan-box02 .bx{ width:707px; margin-bottom:20px; padding:0px 15px; height:99px; background:url(../images/24.jpg); line-height:30px; text-align:center;} .huiyuan-box02 .gengd{ width:125px; height:18px; line-height:18px; text-align:center; border:#333 1px solid; margin:0 auto;}很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3d炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业html模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥总结
以上是尊龙游戏旗舰厅官网为你收集整理的个人简介网页设计作业 静态html个人介绍网页作业 dw个人网站模板下载 web静态大学生简单网页 个人网页作品代码 个人网页制作 学生个人网页的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：