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(源文件)所需的知识点。
代码如下(示例):以下仅展示部分代码供参考~
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>火影忍者title>
<link rel="stylesheet" type="text/css" href="./basic.css"/>
head>
<body>
<div id="header">
<ul>
<li><a href="###1">木叶茶室a>li>
<li><a href="###2">木叶日报a>li>
<li><a href="###3">木叶漫画a>li>
<li><a href="###4">火影图集a>li>
<li><a href="###5">木叶音像a>li>
<li><a href="###6">火影动画a>li>
<li><a href="###7">火影cosa>li>
<li><a href="###8">火影周边a>li>
<li><a href="###9">火影论坛a>li>
ul>
div>
<div id="sidebar">
<h1>论坛投票or热帖h1>
<ul>
<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>
<form method="post">
<dl>
<dt>1.为你喜爱的晓成员投下神圣的一票 (单选) dt>
<dd><label for="love1"><input type="radio" name="love" id="love1"> 俗套的老大-零label>dd>
<dd><label for="love2"><input type="radio" name="love" id="love2"> 玉面正太的蝎-玉女label>dd>
<dd><label for="love3"><input type="radio" name="love" id="love3"> 爆裂天使迪达拉-青龙label>dd>
<dd><label for="love4"><input type="radio" name="love" id="love4"> 同人女最爱的鼬-朱雀label>dd>
<dd><label for="love5"><input type="radio" name="love" id="love5"> 邪教自虐男飞段-三台label>dd>
<dd><label for="love6"><input type="radio" name="love" id="love6"> 水忍猛男鬼鲛-南斗label>dd>
<dd><label for="love7"><input type="radio" name="love" id="love7"> 五心上将角都-北斗label>dd>
<dd class="submit">
<input type="submit" value="提交">
<input type="reset" value="重写">
<input type="button" value="查看">
dt>
dl>
form>
div>
<div id="news">
<h1>最新更新h1>
<div id="newsbg">背景div>
<dl class="newspic box1">
<dt><img src="./images/news_1.jpg" alt="《火影》第364话情报:暗藏的宇志波一人~迷之阿飞">dt>
<dd>《火影》第364话情报:暗藏的宇志波一人~迷之阿飞dd>
dl>
<dl class="newspic box2">
<dt><img src="./images/news_2.jpg" alt="火影华丽同人系列(晓一)">dt>
<dd>火影华丽同人系列(晓一)dd>
dl>
<div id="newslist">
<ul>
<li><em>[07-28]em><a href="###"> ·《火影忍者》第364话:最终目的a>li>
<li><em>[07-27]em><a href="###"> ·《火影》第364话情报:暗藏的宇志波一人~a>li>
<li><em>[07-25]em><a href="###"> · 火影华丽同人系列(晓一)a>li>
<li><em>[07-29]em><a href="###"> ·《火影》第363话分析:老大背后的老大a>li>
<li><em>[07-21]em><a href="###"> ·《火影忍者》第363话:佐助之死a>li>
<li><em>[07-28]em><a href="###"> · 火影同人:宁井同人a>li>
<li><em>[07-20]em><a href="###"> ·《火影》第363话情报:迪达拉死讯震惊晓达a>li>
<li><em>[07-24]em><a href="###"> · 火影同人:燃烧灰烬a>li>
<li><em>[07-26]em><a href="###"> · 火影同人:迪达拉同志的xxEnding(文艺版)a>li>
<li><em>[07-23]em><a href="###"> · 火影同人:东邪西毒(蝎视角)a>li>
<li><em>[07-18]em><a href="###"> ·《火影》第362话分析:战斗的抉择a>li>
<li><em>[07-17]em><a href="###"> ·《火影忍者》单行本第24卷a>li>
<li><em>[07-22]em><a href="###"> · 鹿丸的理想生活a>li>
<li><em>[07-14]em><a href="###"> ·《火影忍者》第362话:终极艺术a>li>
<li><em>[07-19]em><a href="###"> · E3 2007《火影忍者》次世代高清截图放出a>li>
ul>
div>
<div id="newscall">
[动画]火影第213话 [漫画]火影忍者第335回:恐怖的秘密
div>
div>
<div id="pics">
<h1>火影图集h1>
<dl>
<dt><img src="./images/pics_1.jpg" alt="火影COSPLAY·回忆中の白">dt>
<dd><a href="###1">火影COSPLAY·回忆中の白a>dd>
dl>
<dl>
<dt><img src="./images/pics_2.jpg" alt="《火影》另类个性图集">dt>
<dd><a href="###2">《火影》另类个性图集a>dd>
dl>
<dl>
<dt><img src="./images/pics_3.jpg" alt="《火影》同人爱恋畅想鹿">dt>
<dd><a href="###3">《火影》同人爱恋畅想鹿a>dd>
dl>
<dl>
<dt><img src="./images/pics_4.jpg" alt="火影同人秀之佐助">dt>
<dd><a href="###4">火影同人秀之佐助a>dd>
dl>
<div id="picslist">
<ul>
<li><em>[07-29]em><a href="###1">· 火影华丽同人系列(晓一)a> li>
<li><em>[07-09]em><a href="###2">·《火影》另类个性图集a> li>
<li><em>[06-16]em><a href="###3">·《火影》同人爱恋畅想之鹿井篇 a> li>
<li><em>[06-03]em><a href="###4">· 火影同人秀之佐助 a> li>
ul>
<ul>
<li><em>[06-03]em><a href="###5">· 洛克李同人画集a> li>
<li><em>[07-29]em><a href="###6">· 精美同人图赏汇a> li>
<li><em>[07-09]em><a href="###7">· 笔下“鼬”生辉a> li>
<li><em>[06-16]em><a href="###8">· 精选同人佐助图 a>li>
ul>
div>
div>
<div class="con cartoon">
<h1>火影漫画h1>
<ul>
<li><a href="###1">·《火影忍者》第364话:最终目的a> li>
<li><a href="###2">·《火影忍者》第363话:佐助之死a> li>
<li><a href="###3">·《火影忍者》单行本第24卷a> li>
<li><a href="###4">·《火影忍者》第362话:终极艺术a> li>
<li><a href="###5">·《火影忍者》第361话:弱点a> li>
<li><a href="###6">·《火影忍者》第360话:迦楼罗a> li>
<li><a href="###7">·《火影忍者》单行本第23卷a> li>
<li><a href="###8">·《火影忍者》第359话:眼睛a> li>
<li><a href="###9">·《火影忍者》第358话:穷追猛打a> li>
<li><a href="###10">·《火影忍者》第357话:迪达斯VS佐助a> li>
<li><a href="###11">·《火影忍者》单行本第22卷a> li>
<li><a href="###12">·《火影忍者》第356话:激战…!a> li>
<li><a href="###13">·《火影忍者》第355话:去向a> li>
<li><a href="###14">·《火影忍者》第354话:开始行动的a> li>
<li><a href="###15">·《火影忍者》第353话:“晓”集合a> li>
ul>
div>
<div class="con daily">
<h1>木叶日报h1>
<ul>
<li><a href="###1">·《火影忍者》第364话:最终目的a> li>
<li><a href="###2">·《火影忍者》第363话:佐助之死a> li>
<li><a href="###3">·《火影忍者》单行本第24卷a> li>
<li><a href="###4">·《火影忍者》第362话:终极艺术a> li>
<li><a href="###5">·《火影忍者》第361话:弱点a> li>
<li><a href="###6">·《火影忍者》第360话:迦楼罗a> li>
<li><a href="###7">·《火影忍者》单行本第23卷a> li>
<li><a href="###8">·《火影忍者》第359话:眼睛a> li>
<li><a href="###9">·《火影忍者》第358话:穷追猛打a> li>
<li><a href="###10">·《火影忍者》第357话:迪达斯VS佐助a> li>
<li><a href="###11">·《火影忍者》单行本第22卷a> li>
<li><a href="###12">·《火影忍者》第356话:激战…!a> li>
<li><a href="###13">·《火影忍者》第355话:去向a> li>
<li><a href="###14">·《火影忍者》第354话:开始行动的a> li>
<li><a href="###15">·《火影忍者》第353话:“晓”集合a> li>
ul>
div>
<div class="con tearoom">
<h1>木叶茶馆h1>
<ul>
<li><a href="###1">·《火影忍者》第364话:最终目的a> li>
<li><a href="###2">·《火影忍者》第363话:佐助之死a> li>
<li><a href="###3">·《火影忍者》单行本第24卷a> li>
<li><a href="###4">·《火影忍者》第362话:终极艺术a> li>
<li><a href="###5">·《火影忍者》第361话:弱点a> li>
<li><a href="###6">·《火影忍者》第360话:迦楼罗a> li>
<li><a href="###7">·《火影忍者》单行本第23卷a> li>
<li><a href="###8">·《火影忍者》第359话:眼睛a> li>
<li><a href="###9">·《火影忍者》第358话:穷追猛打a> li>
<li><a href="###10">·《火影忍者》第357话:迪达斯VS佐助a> li>
<li><a href="###11">·《火影忍者》单行本第22卷a> li>
<li><a href="###12">·《火影忍者》第356话:激战…!a> li>
<li><a href="###13">·《火影忍者》第355话:去向a> li>
<li><a href="###14">·《火影忍者》第354话:开始行动的a> li>
<li><a href="###15">·《火影忍者》第353话:“晓”集合a> li>
ul>
div>
<div id="footer">
© 小叮当有希望专题--火影忍者
div>
body>
html>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
width: 760px;
margin: 0 auto;
background: url(./images/bg.gif);
position: relative;
}
ul{
list-style: none;
}
#header{
width: 760px;
height: 303px;
background: url(images/header.jpg) no-repeat;
}
#header ul{
padding: 272px 0 0 32px;
}
#header ul li{
float: left;
width: 77px;
height: 18px;
}
#header ul li a{
width: 77px;
height: 19px;
display: block;
text-indent: -9999px;
}
#sidebar{
width: 203px;
height: 420px;
background: url(images/sidebar_down.jpg) no-repeat bottom;
float: left;
}
#sidebar h1{
font-size: 100%;
text-indent: -9999px;
width: 203px;
height: 54px;
background: url(images/sidebar_header.jpg) no-repeat;
}
#sidebar ul{
background: url(images/sidebar_bg.jpg);
padding: 10px 0;
}
#sidebar ul li{
padding-left: 15px;
height: 20px;
}
#sidebar ul li a{
color: #333;
text-decoration: none;
}
#sidebar ul li a:hover{
color: #f00;
}
#sidebar dl{
background: url(images/sidebar_bg.jpg);
height: 235px;
}
#sidebar dl dt{
border-top: 1px solid #666;
width: 80%;
margin: 0 auto;
padding: 10px 0;
}
#sidebar dl dd{
width: 80%;
margin: 0 auto;
height: 20px;
}
#sidebar dl dd label{
display: block;
cursor: pointer;
}
#sidebar dl dd.submit{
padding-top: 5px;
}
#sidebar dl dd.submit input{
cursor: pointer;
}
#news{
width: 557px;
height: 420px;
background: url(images/news_down.jpg) no-repeat bottom;
float: right;
position: relative;
}
#news h1{
font-size: 100%;
text-indent: -9999px;
width: 557px;
height: 80px;
background: url(images/news_header.jpg) no-repeat;
}
#news #newsbg{
width: 557px;
height: 327px;
background: url(./images/news_bg.jpg);
text-indent: -9999px;
}
#news dl.newspic{
width: 143px;
height: 138px;
position: absolute;
}
#news dl.newspic dt{
height: 108px;
background: #eed8a7;
border: 1px solid #a3720b;
}
#news dl.newspic dt img{
display: block;
padding: 4px 0 0 3px;
}
#news dl.newspic dd{
padding: 5px 0;
text-align: center;
}
#news dl.box1{
top: 85px;
left: 40px;
}
#news dl.box2{
top:235px;
left: 40px;
}
#news #newslist{
width: 331px;
height: 309px;
background: url(./images/news_listbg.jpg) no-repeat;
position: absolute;
top: 58px;
left: 200px;
}
#news #newslist ul{
width: 90%;
margin: 0 auto;
line-height: 160%;
padding-top: 8px;
}
#news #newslist ul li a{
text-decoration: none;
color: #725006;
}
#news #newslist ul li a:hover{
color: red;
}
#news #newslist ul li em{
font-style: normal;
float: right;
}
#news #newscall{
width: 510px;
height: 34px;
background: url(./images/news_call.jpg) no-repeat;
position: absolute;
top: 375px;
left: 30px;
color: #725006;
line-height: 34px;
text-align: center;
}
#pics{
width: 760px;
height: 256px;
background: url(./images/pics_bg.jpg) no-repeat;
clear: both;
}
#pics h1{
width: 80px;
height: 256px;
background: url(./images/pics_header.jpg) no-repeat;
font-size: 100%;
text-indent: -9999px;
float: left;
}
#pics dl{
width: 143px;
height: 138px;
float: left;
padding: 15px 0 0 15px;
}
#pics dl dt{
height: 108px;
background: #eed8a7;
border: 1px solid #a3720b;
}
#pics dl dt img{
display: block;
padding: 4px 0 0 3px;
}
#pics dl dd{
padding: 5px 0;
text-align: center;
color: #725006;
}
#pics dl dd a{
text-decoration: none;
color: #725006;
}
#pics dl dd a:hover{
color: red;
}
#pics #picslist{
width: 655px;
height: 91px;
background: url(./images/pics_more.jpg) no-repeat;
float: left;
}
#pics #picslist ul{
width: 50%;
float: left;
line-height: 150%;
padding-top: 10px;
}
#pics #picslist ul li{
padding-left: 15px;
}
#pics #picslist ul li a{
text-decoration: none;
color: #725006;
}
#pics #picslist ul li em{
font-style: normal;
float: right;
padding-right: 20px;
}
#pics #picslist ul li a:hover{
color: red;
}
div.con {
width:253px;
height:373px;
float:left;
}
div.con h1 {
font-size:100%;
text-indent:-9999px;
height:71px;
width:253px;
}
div.con ul {
background:url(../images/cartoon_bg.jpg);
height:288px;
padding-top:2px;
}
div.con ul li {
padding-left:20px;
height:19px;
line-height:19px;
}
div.con ul li a {
color:#725006;
text-decoration:none;
}
div.con ul li a:hover {
color:#f00;
}
div.cartoon {
background:url(./images/cartoon_down.jpg) no-repeat bottom;
}
div.cartoon h1 {
background:url(./images/cartoon_header.jpg) no-repeat;
}
div.cartoon ul {
background:url(./images/tearoom_bg.jpg);
}
div.daily {
background:url(./images/cartoon_down.jpg) no-repeat bottom;
}
div.daily h1 {
background:url(./images/daily_header.jpg) no-repeat;
}
div.daily ul {
background:url(./images/tearoom_bg.jpg);
}
div.tearoom {
width:254px;
background:url(./images/tearoom_down.jpg) no-repeat bottom;
}
div.tearoom h1 {
width:254px;
background:url(./images/tearoom_header.jpg) no-repeat;
}
div.tearoom ul {
background:url(./images/tearoom_bg.jpg);
}
#footer{
width: 760px;
height: 66px;
line-height: 66px;
color: #333;
text-align: center;
background: url(./images/footer.jpg);
clear: both;
}
一套合格的网页应该包含(具体可根据个人要求而定)
1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.❤️【关注我| 获取更多源码 | 优质文章】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.以上内容技术相关问题😈欢迎一起交流学习🔥