HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
<font color='#b44846' size='4px'> ❤</font> 【作者主页——🔥获取更多优质源码】
<font color='#b44846' size='4px'> ❤</font> 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
@TOC
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">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title></title>
</head>
<body>
<div class="wrapin">
<!--头部-->
<a href="#" class="logo"><img src="images/logo.png"/> </a>
<header>
<ul class="nav">
<li><a href="index.html">首页</a></li>
<li><a href="juqing.html">剧情故事</a></li>
<li><a href="tupian.html">图片鉴赏</a></li>
<li><a href="lianxi.html">联系我们</a></li>
</ul>
</header>
<div class="banner"><img src="images/banner_02.jpg"/></div>
<!--内容-->
<div class="con">
<div class="title">
<h2>小林家的龙女仆</h2>
</div>
<div class="text">《小林家的龙女仆》是由酷教信徒创作的漫画作品,于2013年5月在《月刊Action》上开始连载。单行本由双叶社出版。 2016年5月宣布动画化。
该作品讲述主人公·白领小林居住在一个公寓当中,在一次醉酒后无意走到山里救了被宝剑刺中的龙托尔的命,后来天龙·托尔为了报答小林前往了小林的家里成为了女仆并开始了跟她的同居生活。
2018年8月16日,《小林家的龙女仆》与手游《牧羊人之心》达成联动,其中康娜、托尔、露科亚、艾露玛以原本的形象进入游戏成为游戏中魔物娘中的一员,小林则作为剧情人物出现 。</div>
<div class="top">
<ul class="pic_top clearfix">
<li><img src="images/img_03.jpg"/></li>
<li><img src="images/img_04.jpg"/></li>
<li><img src="images/img_05.jpg"/></li>
<li><img src="images/img_06.jpg"/></li>
<li><img src="images/img_07.jpg"/></li>
<li><img src="images/img_08.jpg"/></li>
</ul>
<div class="title">
<h2>分集剧情</h2>
</div>
<div class="index">
<h3>第1集</h3>
<p>早上,正要去公司的时候却发现了只龙。在茫然的小林的眼前,那只龙变身为有角有尾巴穿着女仆装的美少女。那个名为托尔的龙姑娘提出“从今天起让我作为女仆工作吧!”不知何故而询问起来,似乎昨晚喝醉的小林有邀请她到家中。小林以“没打算雇人”拒绝她,但却注意到了时间上班要迟到了。</p>
<p><img src="images/img_12.jpg"/></p>
<h3>第2集</h3>
<p>正当小林和托尔的共同生活亲密起来时。小林和托尔一起出门买东西。亲眼看到托尔与商店街的人们关系很好,托尔的社交能力之高而惊叹。但是当事人却说“只是我随便表现得亲切一点”。看来还是无法理解人类的感情的样子。在那样一个假日,小林一人在家,有人来找人。一打开门只见那里有个带着角和尾巴的幼女——!?</p>
<p><img src="images/img_11.jpg"/></p>
<h3>第3集</h3>
<p>托尔除外康娜也住了进来。虽然变得热闹起来挺好,但无奈三个人在小公寓里比较拘束。于是小林决定搬家。在搬家的地方叫上滝谷开聚会,然而托尔的熟人在洞窟居住的法夫纳,和从太古来到这边的世界居住的太古尔科亚,新的龙们来小林家拜访……。</p>
<p><img src="images/img_08.jpg"/></p>
</div>
</div>
</div>
<!--底部-->
<footer>小林家的龙女仆 </footer>
</div>
</body>
</html>
/*通用类*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
font-size: 14px;
background: #fff;
color: #333;
position: relative;
}
img {
border: none;
}
a {
cursor: pointer;
color: #333;
text-decoration: none;
outline: none;
}
ul {
list-style-type: none;
}
em {
font-style: normal;
}
.lt {
float: left;
}
.rt {
float: right;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/*wrapin 主体容器宽度*/
.wrapin {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
body {
background: url(../images/bg.jpg) no-repeat top;
background-size: cover;
}
.logo {
width: 360px;
margin: 10px 0;
display: block;
}
.logo img {
width: 100%;
}
header {
height: 50px;
background: #fab1ce;
}
.nav li {
text-align: center;
width: 25%;
float: left;
line-height: 50px;
}
.nav li:hover {
background: #fb96be;
}
.nav li a {
font-weight: bold;
font-size: 16px;
color: #fff;
}
.banner img {
width: 100%;
display: block;
}
.con {
padding: 15px;
background: #fff;
}
.title {
padding: 10px 0;
border-bottom: 3px solid #fab1ce;
}
.title h2 {
color: #fab1ce;
}
.pic_top {
margin: 10px 0;
border: 3px solid #fab1ce;
}
.pic_top li {
float: left;
width: 16.66%;
}
.pic_top li img {
width: 100%;
display: block;
}
.index {
margin: 30px 0;
line-height: 26px;
color: #fff;
color: #333;
font-size: 16px;
}
.text {
margin: 10px 0;
line-height: 26px;
color: #fff;
color: #333;
font-size: 16px;
}
.index img {
display: block;
margin: 20px auto;
width: 400px;
}
footer {
line-height: 50px;
text-align: center;
color: #fff;
background: #fab1ce;
}
.juqing {
margin: 30px 0;
}
.juqing .pic {
width: 300px;
float: left;
}
.juqing .pic img {
width: 100%;
}
.juqing .text {
float: right;
width: 640px;
}
.tipian {
margin: 10px 0;
}
.tipian li {
float: left;
width: 25%;
padding: 10px;
box-sizing: border-box;
}
.tipian li img {
width: 100%;
height: 125px;
}
form {
width: 400px;
margin: 0 auto;
}
form p {
margin: 10px 0;
font-size: 16px;
color: #333;
}
form .phone {
width: 100%;
height: 36px;
}
form textarea {
width: 100%;
height: 100px;
}
form .but {
background:#fab1ce;
border: none;
color: #fff;
margin: 20px auto;
display: block;
width: 200px;
height:36px;
}
一套合格的网页应该包含(具体可根据个人要求而定)
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。