1.作品简介
:html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。
2.作品编辑
:作品下载后可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。
3.知识应用
:技术方面主要应用了大学生网页课程中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件),基本期末作业所需的知识点全覆盖。
代码说明:以下仅展示部分代码供参考~
<head>
<meta charset="utf-8" />
<title>个人网页设计title>
<link href="css/style.css" rel="stylesheet" />
head>
<body>
<div id="wrapper">
<div id="header">
<a href="#"><img src="images/logo.png" class="logo"/>a>
div>
<div id="menu">
<ul>
<li><a href="index.html">个人主页a>li>
<li><a href="jieshao.html">故事介绍a>li>
<li><a href="renwu.html">主要人物a>li>
<li><a href="meitu.html">个人美图a>li>
<li><a href="zhuce.html">注册用户a>li>
<li><a href="liuyan.html">随笔留言a>li>
ul>
div>
<div id="main">
<div class="content">
<ul class="list">
<li>
<img src="images/zy1.jpg" />
<h5>“草帽”蒙奇·D·路飞h5>
<p>初次登场:漫画第1话 年龄:17岁→19岁 生日:5月5日 血型:F型 身高:172cm→174cm 身份:草帽 故乡:东海·风车村 ...p>
<a href="#">详情...a>
li>
<li>
<img src="images/zy2.jpg" />
<h5>“小贼猫”娜美h5>
<p>初次登场:漫画第8话 年龄:18岁→20岁 生日:7月3日 血型:X型 身份:阿龙海贼团测量员→草帽 故乡:东海▪可可亚西村...p>
<a href="#">详情...a>
li>
<li>
<img src="images/zy3.jpg" />
<h5>“海贼猎人”罗罗诺亚·索隆h5>
<p>初次登场:漫画第3话 年龄:19岁→21岁 生日:11月11日 血型:XF型 身份:东海海贼赏金猎人→草员 故乡:东海·霜月村...p>
<a href="#">详情...a>
li>
<li>
<img src="images/zy4.jpg" />
<h5>“GOD”▪乌索普h5>
<p>初次登场:漫画第23话 年龄:17岁→19岁 生日:4月1日 血型:S型 身份:乌索普海贼团船长→狙击手 故乡:东海▪西罗普村...p>
<a href="#">详情...a>
li>
ul>
div>
<div class="sidebar">
<div class="denglu">
<h2>用户登录h2>
<p><span>账号:span><input type="text" />p>
<p><span>密码:span><input type="password" />p>
<div class="btn">
<a href="#"><img src="images/denglu.png" />a>
<a href="#"><img src="images/zhuce.png" />a>
div>
div>
<div class="chengyuan">
<h2>草帽海贼团成员h2>
<ul>
<li><a href="#">“草帽”蒙奇·D·路飞a>li>
<li><a href="#">“海贼猎人”罗罗诺亚·索隆a>li>
<li><a href="#">“小贼猫”娜美a>li>
<li><a href="#">“GOD”▪乌索普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>
<img src="images/chengyuan.jpg" />
div>
div>
div>
<div id="footer">
<p>底部信息p>
div>
div>
body>
html>