HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
一、网页介绍
1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。
一、网页效果
二、代码展示
1.HTML代码
代码如下(示例):以下仅展示部分代码供参考~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>千与千寻网</title>
<link rel="stylesheet" type="text/css" href="css/view.css"/>
</head>
<body>
<!--container start-->
<div class="container">
<!--header start-->
<div class="header" id="header">
<a href="index.html">
<img src="images/header.jpg">
</a>
</div>
<!--header end-->
<!--nav start-->
<div class="nav">
<a href="index.html">千寻首页</a>
<a href="view1.html">剧情简介</a>
<a href="view2.html">人物简介</a>
<a href="view3.html">精彩剧照</a>
<a href="view4.html">获奖记录</a>
<a href="view5.html">热门影评</a>
<a href="view6.html">影片意义</a>
<a href="login.html">快速登录</a>
<a href="register.html">粉丝注册</a>
</div>
<!--nav end-->
<!--wrapper start-->
<div class="wrapper">
<!--plot start-->
<div class="plot">
<div class="plot_title">基本信息</div>
<div class="plot_image">
<img src="images/plot.jpg"/>
</div>
<div class="plot_info">
<dl>
<dt>中文名称</dt><dd>千与千寻、神隐少女(台湾)</dd>
<dt>原版名称</dt><dd>千と千尋の神隠し</dd>
<dt>其他名称</dt><dd>Spirited Away(美国)</dd>
<dt>类型</dt><dd>剧情、动画、奇幻</dd>
<dt>制片地区