| 简单个人网页设计作业 静态HTML个人博客主页 | 您所在的位置：网站首页 › 静态网站模板30页 › 简单个人网页设计作业 静态HTML个人博客主页 |
简单个人网页设计作业 静态HTML个人博客主页
|
精彩专栏推荐 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业： 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式：【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码：【 echarts大屏展示大数据平台可视化(150套) 】 免费且实用的WEB前端学习指南： 【 web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！ @TOC 一、 网站题目个人网页设计、 ♂️个人简历制作、 简单静态HTML个人网页作品、 个人介绍网站模板 、等网站的设计与制作。 二、✍️网站描述⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。 一套A+的网页应该包含 (具体可根据个人要求而定) 1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。 4. 菜单美观、醒目，二级菜单可正常弹出与跳转。 5. 要有JS特效，如定时切换和手动切换图片轮播。 6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。 7. 页面清爽、美观、大方，不雷同。 。 8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。 三、 网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。 网站程序方面：计划采用最新的网页编程语言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结构代码
明星--鹿晗
首页
演艺经历
主要作品
社会活动
获奖记录
人物评价
登录
鹿晗
鹿晗（LU HAN），1990年4月20日出生于北京海淀区，中国内地影视男演员、歌手。2008年赴韩国留学期间在明洞逛街时，被韩国SM娱乐有限公司星探发掘成为旗下练习生。2012年4月以韩国男子组合EXO/EXO-M成员正式出道，组合内担任主唱、领舞、门面担当。2014年8月，个人微博单条评论创吉尼斯世界纪录，成为中文社交媒体上的首位吉尼斯世界纪录获得者。10月，申请与SM公司合同无效，于2016 ... ;;;
Copyright © 明星--鹿晗
CSS样式代码html {
background: #000;;
}
body {
margin: 0;
padding:0;
font-family: Tahoma, "Trebuchet MS", Verdana;
font-size: 12px;
line-height: 1.5em;
width: 100%;
display: table;
background: url(../images/bj.jpg) center top no-repeat fixed #000;
}
a:link, a:visited { color: #87430c; text-decoration: none; }
a:active, a:hover { color: #FFFF00;}
p {
font-family: Tahoma, "Trebuchet MS", Verdana;
font-size: 14px;
color: #222; line-height:24px;
text-align: justify;
}
h1 {
font-family: Tahoma, "Trebuchet MS", Verdana;
font-size: 25px;
color: #333;
font-weight: normal;
margin: 0 0 15px 0;
}
h2 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #111;
margin: 0 0 10px 0;
}
h3 {
font-family: Tahoma;
font-size: 13px;
color: #111;
font-weight: normal;
margin: 0 0 3px 0;
}
.title_left {
float: left;
width: 333px;
height: 46px;
}
.title_right {
float: right;
width: 165px;
height: 40px;
color: #d89300;
font-family: Tahoma;
font-size:28px;
margin: 0;
padding: 6px 0 0 0;
}
.title_left h1 {
float: left;
display: block;
font-family: Tahoma;
font-size: 25px;
color: #e17638;
font-weight: normal;
margin: 0 0 2px 0;
}
.title_left h3 {
font-family: Tahoma;
font-size: 20px;
color: #fff;
font-weight: normal;
display: block;
float: right;
}
.gallery ul{ margin-left:-40px;}
.gallery li{ float:left; margin:5px; list-style-type:none;}
.gallery li img{ width:75px; height:75px;}
li{ list-style-type:none;}
#container { width: 950px; padding:30px; margin:10px auto; background-color:rgba(255,255,255,0.7);-moz-border-radius:20px;border-radius:20px; min-height:600px; margin-bottom:50px;
}
.index_main{ width:700px; height:auto; margin:auto; padding:50px 0px;text-align:center;}
.index_main h1{ color:#fff;font-size:111px; text-align:center; line-height:136px; font-weight:normal;}
.index_list{ width:960px; margin:auto; min-height:80px; padding-top:20px;}
.index_list ul{
}
.index_list li{ height:50px; margin:15px; float:left; }
.index_list li a{ color:#fff;font-size:22px; text-align:center; line-height:36px;}
.index_list li a:hover{ color:#FC0;}
.share{ width:220px; height:50px; margin:auto;}
.share li{ float:left; margin:2px;}
.share li img{ width:30px; height:30px;}
.Language{ width:860px; margin:auto;}
.Language ul{
width: 700px;
}
.Language li{ width:380px; height:100px; margin:15px; }
.Language img{ width:90px;height:66px; float:left; }
.Language li p{
font-size:22px;
text-align:left;
line-height:66px;
width: 600px;
}
.Contact_input{width:500px; float:left; margin:5px;font-size:20px; color:#444; line-height:26px; }
.Contact_input p{font-size:20px; color:#444; line-height:26px; text-indent:0em; }
.c_input{ width:300px; height:25px;}
.c_text{ width:300px; height:100px;}
.SUB{ width:120px; height:35px; text-align:center; background-color:#333; -moz-border-radius:5px;border-radius:5px; margin-top:10px; }
.SUB a{ color:#FFF; line-height:35px; font-size:18px; }
.SUB:hover{ width:120px; height:35px; text-align:center; background-color:#800; -moz-border-radius:5px;border-radius:5px; }
.xinshang{
width:960px;
line-height: 55px;
}
.xinshang ul{ margin-left:-40px;}
.xinshang li{ width:280px; height:180px;-moz-border-radius:40px;border-radius:40px; overflow:hidden; float:left; margin:5px; list-style-type:none; border:5px solid #ccc;}
.xinshang li:hover{ border:5px solid #fff;}
.xinshang li img{ width:280px; height:180px;}
.Restaurant{ width:960px;}
.Restaurant ul{ margin-left:-40px;}
.Restaurant li{ width:170px; height:100px;-moz-border-radius:10px;border-radius:10px; overflow:hidden; float:left; margin:5px; list-style-type:none; border:2px solid #ccc;}
.Restaurant li:hover{ border:2px solid #fff;}
.Restaurant li img{ width:180px; height:100px;}
.Hotel{ width:960px; border-top:1px dashed #ddd;}
.Hotel ul{ margin-left:-40px;}
.Hotel li{ width:220px; height:140px;-moz-border-radius:10px;border-radius:10px; overflow:hidden; float:left; margin:5px; list-style-type:none; border:2px solid #ccc;}
.Hotel li:hover{ border:2px solid #4b75dd;}
.Hotel li img{ width:220px; height:140px;}
.left_main{
width:800px;
padding:10px;
height:auto;
float:left;
}
.left_main p{ font-size:14px; line-height:22px; color:#333; text-indent:2em;}
.youji_main{ width:920px; padding:10px; height:auto; float:left;}
.youji_main p{ font-size:14px; line-height:22px; color:#333; text-indent:2em;}
.fl{ float:left;}
.fr{ float:right;}
.3_col_middle img {
float: left;
border: none;
}
.3_col_middle img.img_middle {
margin: 0 8px;
}
.more{
float: right;
color: #777;
font-size: 11px;
margin: 0 10px 0px 0;
}
.more a{
text-decoration: none;
color: #777;
}
.more a:hover{
text-decoration: underline;
}
.more_2{
float: left;
color: #b0b0b0;
font-size: 10px;
margin: 0 10px 10px 0;
background: url(../images/more.png) no-repeat ;
padding: 0 0 0 10px ;
background-position: 0 7px;
}
.more_2 a{
text-decoration: none;
color: #777;
}
.more_2 a:hover, .more_2:hover{
text-decoration: underline;
}
#footer {
width: 100%;
color: #555;
margin: 0;
padding: 10px 0;
text-align: center;
}
.cleaner {
clear: both;
height: 0;
margin: 0;
padding: 0;
}
/* -------------------zhuce login css -------------------------------*/
.zhuce{width:300px; height:auto; float:left; padding:10px; font-size:16px; border-top:2px solid #963; }
.zhuce_info{width:280px; height:30px; margin:5px auto;}
.zhuce_info input{width:180px; height:20px; float:right;}
.subout{width:220px; height:30px; margin:5px auto}
.sub{ width:60px; height:20px;margin:5px; margin-left:30px; color:#111; padding:2px; float:left; text-align:center; border:2px solid #555; background-color:#ddd;}
.sub:hover{background-color:#fff; }
.sub a{font-size:16px; line-height:20px; color:#111; }
.sub a:hover{color:#800; text-decoration:none;}
/* -------------------index lunbo css -------------------------------*/
.dm{ width:950px; height:380px; margin:auto;-moz-border-radius:30px;border-radius:30px; overflow:hidden; margin-bottom:20px;}
.fn-clear { zoom: 1; }
.box_skitter { position: relative; background: none; }
.box_skitter ul { display: none; }
.box_skitter .container_skitter { overflow: hidden; position: relative; }
.box_skitter .image { overflow: hidden; }
.box_skitter .image img {width: 950px; height:380px; display: none; }
.box_skitter .box_clone { position: absolute; top: 0; left: 0; width: 100px; overflow: hidden; display: none; z-index: 20; }
.box_skitter .box_clone img { position: absolute; top: 0; left: 0; z-index: 20; }
.box_skitter .prev_button { position: absolute; top:30%; left:30px; z-index: 100; width:69px; height:124px; overflow: hidden; text-indent: -9999em; margin-top: -5px; background: url(../images/prev.png) no-repeat left top !important; }
.box_skitter .next_button { position: absolute; top:30%; right:50px; z-index: 100; width:69px; height:124px; overflow: hidden; text-indent: -9999em; margin-top: -5px; background: url(../images/next.png) no-repeat left top !important; }
.box_skitter .label_skitter { z-index: 150; position: absolute; display: none; }
.loading { position: absolute; top: 50%; right: 50%; z-index: 10000; margin: -16px -16px; color: #fff; text-indent: -9999em; overflow: hidden; background: url(../images/ajax-loader.gif) no-repeat left top; width: 31px; height: 31px; }
#slideshow { width: 950px; height:380px; }
#slideshow ul { display: none; }
#content_area #zp {
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#content_area #zp p {
text-align: center;
}六、 如何让学习不再盲目很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。 七、 更多干货1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 2. 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！ 3. 以上内容技术相关问题 欢迎一起交流学习 【主页—— 获取更多优质源码】 |
【本文地址】
公司简介
联系我们