阅读量:5
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤【作者主页——🔥获取更多优质源码】
❤【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
文章目录🌰
一、网页介绍📖
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果🌌
二、代码展示😈
1.HTML代码结构 🧱
代码如下（示例）：以下仅展示部分代码供参考~
<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" /> <meta name="keywords" content="tzyh" /> <title>无标题文档</title> <script type="text/javascript"> </head> <SCRIPT language=JavaScript> document.oncontextmenu=new Function("event.returnValue=false;"); document.onselectstart=new Function("event.returnValue=false;"); </SCRIPT> <script type="text/javascript" src="../../../www.foreseebio.com/chengpin/tzyh.js" ></script> <link rel="stylesheet" type="text/css" href="css/style.css" /> <body onLoad="MM_preloadImages('images/gg3.jpg'/*tpa=http://www.chenpinweb.tk/chengpinc/ceng57/images/gg3.jpg*/)"> <div id="page"> <div id="header"> <a href="index.html" id="logo"><img src="images/logo.jpg" alt="" width="960" height="100" /></a> <span></span> </div> <div class="nav"><ul id="menu"> <li><a href="index.html" >首页</a></li> <li><a href="#" >作者简介</a></li> <li><a href="#" >作品简介</a></li> <li><a href="#" >主要人物</a></li> <li><a href="#" >手稿欣赏</a></li> <li><a href="#" >加入会员</a></li> </ul></div> <div id="content"> <div class="inside"> <div id="sidebar"> <div class="touxiang"> <img src="images/touxiang.jpg" /></div> <div class="chengjiu"> <h4>青山刚昌</h4> <p>1963年6月21日出生于日本鸟取县室<br /> 血型为B型，日本漫画家<br /> <h4>创作风格</h4> 青山刚昌的画中，最独特的一点是眼睛中反光的画法—斜着的光线、高光画在目光方向另一侧的眼睛上。其中第一点源自于动画《战斗装甲 Xabungle》。 人物造型的设定方面，无论是从长相、衣着、语言来看，都是比较西方化一些的。</p> <br /> </div> </div> <div id="center"> <div class="jieshao"> <h4>故事简介</h4> <p>高中生侦探工藤新一与毛利兰在游乐园游玩时发现两个行动诡异的黑衣男子，便跟踪他们，不料被灌下一种叫"APTX4869"的神秘毒药，然而因为药物副作用，新一的身体竟回到孩童状态。为不使周围的人受到牵连，他化名为"江户川柯南"，寄住在毛利兰家中，解决了许多案件，并一直寻找着黑衣组织的人的下落。</p> </div><br /> <img src="images/gg2.jpg" id="Image1" onMouseOver="MM_swapImage('Image1','','images/gg3.jpg'/*tpa=http://www.chenpinweb.tk/chengpinc/ceng57/images/gg3.jpg*/,1)" onMouseOut="MM_swapImgRestore()" /> <br /> <div class="jieshao"> <h4>人物评价</h4> <p><marquee direction="up" scrollamount="2">因为青山刚昌是学西洋画出身，所以其创作的人物造型非常唯美飘逸，常常都有着秋水大眼和尖挺鼻子。他的（推理作品）故事情节的编排也不局限于传统的日本推理模式，那些精彩的街头追逐场面，以及稀奇古怪的发明，颇有日版"007"的味道。（《环球人物》2015年第27期 评）<br /> 青山刚昌在作画以外的日子，喜欢看看电影和小说，这些休闲方式与漫画创作密不可分。也许正是因为他对自己作品的爱，使得从小孩到大人都被吸引成为他的粉丝。（Cinematoday 评）</marquee></p> </div> </div> <div id="photogallery"> <div class="photos"> <img src="images/photogallery_title.gif" alt="" width="270" height="40" id="title" /> <div class="xiaotu"> <img src="images/m1.jpg" alt="" width="88" height="120" /><span>《M1》</span> <img src="images/m2.jpg" alt="" width="88" height="120" /><span>《M2》</span> <img src="images/m3.jpg" alt="" width="88" height="120" /><span>《M3》</span> <img src="images/m4.jpg" alt="" width="88" height="120" /><span>《M4》</span> </div> <a href="html/shougao.html" ><img src="images/all.gif" alt="" width="134" height="21" /></a> </div> </div> </div> </div> <div id="footer"> <ul> </ul> <div id="copyright"> <span>版权所有 禁止盗版</span> </div> </div> </body> </html> 2.CSS样式代码 🏠
#page{ width:1000px; margin:0 auto; } #header{ width:1000px; height:105px; background:url(../images/top_bg.jpg) top left no-repeat; padding:33px 0 0 0; text-align:center; } #logo{ display:block; } #header span{ color:#786B50; text-transform:uppercase; display:block; line-height:20px; width:1000px; text-align:center; } .nav{width:1000px; height:34px; padding-top:8px; background:url(../images/nav_bg.gif) repeat-x;} #menu{ width:1000px; display:block; text-align:center; height:26px; } #menu li{ display:inline; padding:0 25px; line-height:25px; } #menu a{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#630; text-decoration:none; } #content{ background:url(../images/bg.gif) top left repeat-y; width:1001px; float:left; font-family:Tahoma, sans-serif; color:#666; } .inside{ background:url(../images/main_bg.jpg) top left no-repeat; padding:30px 0 0 0; float:left; } #sidebar{ width:328px; float:left; padding:0 38px 45px 29px; } .touxiang{} .chengjiu{ width:300px; margin:0 auto; padding-top:20px;} .chengjiu h4{ font-size:14px; color:#916422; line-height:30px; background:url(../images/dots.gif) bottom left repeat-x; display:block; } .chengjiu p{line-height:30px;} .jieshao{ width:300px; } .jieshao h4{ font-size:14px; color:#916422; line-height:30px; background:url(../images/dots.gif) bottom left repeat-x; display:block; } .jieshao p{line-height:24px;} #center{ width:335px; float:left; } .more{ background:url(../images/arrow.gif) left 3px no-repeat; margin:0 0 0 5px; padding:0 0 0 10px; color:#006CCE; } .more:visited{text-decoration:underline} .more:hover{text-decoration:none} #center .block{ padding:0 0 37px 0; } #photogallery{ width:271px; float:left; background:url(../images/gallery_bg.jpg) top left no-repeat; margin:-30px 0 0 0; padding:0px; } #photogallery #title{ margin:-25px 0 0 -37px; background:none; padding:0 0 14px 0; } .photos{ margin:25px 0 0 0; padding:0 45px 7px 37px; background:url(../images/bg_gallery.gif) bottom left repeat-y; text-align:center; } .photos .xiaotu img{ background:url(../images/photo_bg.gif) top left no-repeat; padding:14px 15px 20px 15px; } #photogallery span{ display:block; width:188px; 三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习🔥
