🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码: 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!
一、网页介绍📖
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 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" />
<title>动漫--火影忍者</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="index_list">
<ul>
<li> <a href="index.html">首页</a> </li>
<li> <a href="jingli.html"> 剧情简介</a> </li>
<li> <a href="zuopin.html">火影疾风传</a> </li>
<li> <a href="hudong.html">火影新世代</a> </li>
<li> <a href="huojiang.html"> 历代火影</a> </li>
<li> <a href="pinjia.html"> 名字由来</a> </li>
<li> <a href="login.html">登录</a> </li>
</ul>
</div>
<div class="cleaner"></div>
<div id="container">
<div class="dm">
<!-- 代码 开始 -->
<div id="yc-mod-slider">
<div class="wrapper">
<div id="slideshow" class="box_skitter fn-clear">
<ul>
<li> <img class="cubeRandom" src="images/dm1.jpg" /></li>
<li> <img class="cubeRandom" src="images/dm2.jpg" /></li>
<li> <img class="cubeRandom" src="images/dm3.jpg" /></li>
</ul>
</div>
<script type="text/javascript" src="js/slideshow.js"></script>
</div>
</div>
<!-- 代码 结束 -->
</div>
<div class=" clear"></div>
<div class="index_main">
<h1>Studio Pierrot </h1>
<a href="javascript:;">电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画,2002年10月3日在东京电视台系列全6局、岐阜放送首播,共220话;第二季《火影忍者疾风传》自2007年2月开始播出,共500话;累计全720话。</a>
<p>
<img src="images/1.jpg">
</p>
</div>
<div class="share">
<div class="cleaner"></div>
</div>
<div id="footer"> Copyright © 动漫--火影忍者</div>
</div>
<!-- End Of Container -->
</body>
</html>
2.CSS样式代码 🏠
html {
background: #000;
;
}
body {
margin: 0;
padding: 0;
font-family: Tahoma, "Trebuchet MS", Verdana;
font-size: 12px;
line-height: 1.5em;
width: 100%;
display: table;
background: url(../images/bj.jpg) center top no-repeat fixed #000;
}
a:link,
a:visited {
color: #87430c;
text-decoration: none;
}
a:active,
a:hover {
color: #FFFF00;
}
p {
font-family: Tahoma, "Trebuchet MS", Verdana;
font-size: 14px;
color: #222;
line-height: 24px;
text-align: justify;
}
h1 {
font-family: Tahoma, "Trebuchet MS", Verdana;
font-size: 25px;
color: #333;
font-weight: normal;
margin: 0 0 15px 0;
}
h2 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #111;
margin: 0 0 10px 0;
}
h3 {
font-family: Tahoma;
font-size: 13px;
color: #111;
font-weight: normal;
margin: 0 0 3px 0;
}
.title_left {
float: left;
width: 333px;
height: 46px;
}
.title_right {
float: right;
width: 165px;
height: 40px;
color: #d89300;
font-family: Tahoma;
font-size: 28px;
margin: 0;
padding: 6px 0 0 0;
}
.title_left h1 {
float: left;
display: block;
font-family: Tahoma;
font-size: 25px;
color: #e17638;
font-weight: normal;
margin: 0 0 2px 0;
}
.title_left h3 {
font-family: Tahoma;
font-size: 20px;
color: #fff;
font-weight: normal;
display: block;
float: right;
}
.gallery ul {
margin-left: -40px;
}
.gallery li {
float: left;
margin: 5px;
list-style-type: none;
}
.gallery li img {
width: 75px;
height: 75px;
}
li {
list-style-type: none;
}
#container {
width: 950px;
padding: 30px;
margin: 10px auto;
background-color: rgba(255, 255, 255, 0.7);
-moz-border-radius: 20px;
border-radius: 20px;
min-height: 600px;
margin-bottom: 50px;
}
.index_main {
width: 700px;
height: auto;
margin: auto;
padding: 50px 0px;
text-align: center;
}
.index_main h1 {
color: #fff;
font-size: 111px;
text-align: center;
line-height: 136px;
font-weight: normal;
}
.index_list {
width: 960px;
margin: auto;
min-height: 80px;
padding-top: 20px;
}
.index_list ul {}
.index_list li {
height: 50px;
margin: 15px;
float: left;
}
.index_list li a {
color: #fff;
font-size: 22px;
text-align: center;
line-height: 36px;
}
.index_list li a:hover {
color: #990;
}
.share {
width: 220px;
height: 50px;
margin: auto;
}
.share li {
float: left;
margin: 2px;
}
.share li img {
width: 30px;
height: 30px;
}
.Language {
width: 860px;
margin: auto;
}
.Language ul {
width: 700px;
}
.Language li {
width: 380px;
height: 100px;
margin: 15px;
}
.Language img {
width: 90px;
height: 66px;
float: left;
}
.Language li p {
font-size: 22px;
text-align: left;
line-height: 66px;
width: 600px;
}
.Contact_input {
width: 500px;
float: left;
margin: 5px;
font-size: 20px;
color: #444;
line-height: 26px;
}
.Contact_input p {
font-size: 20px;
color: #444;
line-height: 26px;
text-indent: 0em;
}
.c_input {
width: 300px;
height: 25px;
}
.c_text {
width: 300px;
height: 100px;
}
.SUB {
width: 120px;
height: 35px;
text-align: center;
background-color: #333;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 10px;
}
.SUB a {
color: #FFF;
line-height: 35px;
font-size: 18px;
}
.SUB:hover {
width: 120px;
height: 35px;
text-align: center;
background-color: #800;
-moz-border-radius: 5px;
border-radius: 5px;
}
.xinshang {
width: 960px;
line-height: 55px;
}
.xinshang ul {
margin-left: -40px;
}
.xinshang li {
width: 280px;
height: 180px;
-moz-border-radius: 40px;
border-radius: 40px;
overflow: hidden;
float: left;
margin: 5px;
list-style-type: none;
border: 5px solid #ccc;
}
.xinshang li:hover {
border: 5px solid #fff;
}
.xinshang li img {
width: 280px;
height: 180px;
}
.Restaurant {
width: 960px;
}
.Restaurant ul {
margin-left: -40px;
}
.Restaurant li {
width: 170px;
height: 100px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
float: left;
margin: 5px;
list-style-type: none;
border: 2px solid #ccc;
}
.Restaurant li:hover {
border: 2px solid #fff;
}
.Restaurant li img {
width: 180px;
height: 100px;
}
.Hotel {
width: 960px;
border-top: 1px dashed #ddd;
}
.Hotel ul {
margin-left: -40px;
}
.Hotel li {
width: 220px;
height: 140px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
float: left;
margin: 5px;
list-style-type: none;
border: 2px solid #ccc;
}
.Hotel li:hover {
border: 2px solid #4b75dd;
}
.Hotel li img {
width: 220px;
height: 140px;
}
.left_main {
width: 800px;
padding: 10px;
height: auto;
float: left;
}
.left_main p {
font-size: 14px;
line-height: 22px;
color: #333;
text-indent: 2em;
}
.youji_main {
width: 920px;
padding: 10px;
height: auto;
float: left;
}
.youji_main p {
font-size: 14px;
line-height: 22px;
color: #333;
text-indent: 2em;
}
.fl {
float: left;
}
.fr {
float: right;
}
.3_col_middle img {
float: left;
border: none;
}
.3_col_middle img.img_middle {
margin: 0 8px;
}
.more {
float: right;
color: #777;
font-size: 11px;
margin: 0 10px 0px 0;
}
.more a {
text-decoration: none;
color: #777;
}
.more a:hover {
text-decoration: underline;
}
.more_2 {
float: left;
color: #b0b0b0;
font-size: 10px;
margin: 0 10px 10px 0;
background: url(../images/more.png) no-repeat;
padding: 0 0 0 10px;
background-position: 0 7px;
}
.more_2 a {
text-decoration: none;
color: #777;
}
.more_2 a:hover,
.more_2:hover {
text-decoration: underline;
}
#footer {
width: 100%;
color: #555;
margin: 0;
padding: 10px 0;
text-align: center;
}
.cleaner {
clear: both;
height: 0;
margin: 0;
padding: 0;
}
/* -------------------zhuce login css -------------------------------*/
.zhuce {
width: 300px;
height: auto;
float: left;
padding: 10px;
font-size: 16px;
border-top: 2px solid #963;
}
.zhuce_info {
width: 280px;
height: 30px;
margin: 5px auto;
}
.zhuce_info input {
width: 180px;
height: 20px;
float: right;
}
.subout {
width: 220px;
height: 30px;
margin: 5px auto
}
.sub {
width: 60px;
height: 20px;
margin: 5px;
margin-left: 30px;
color: #111;
padding: 2px;
float: left;
text-align: center;
border: 2px solid #555;
background-color: #ddd;
}
.sub:hover {
background-color: #fff;
}
.sub a {
font-size: 16px;
line-height: 20px;
color: #111;
}
.sub a:hover {
color: #800;
text-decoration: none;
}
/* -------------------index lunbo css -------------------------------*/
.dm {
width: 950px;
height: 380px;
margin: auto;
-moz-border-radius: 30px;
border-radius: 30px;
overflow: hidden;
margin-bottom: 20px;
}
.fn-clear {
zoom: 1;
}
.box_skitter {
position: relative;
background: none;
}
.box_skitter ul {
display: none;
}
.box_skitter .container_skitter {
overflow: hidden;
position: relative;
}
.box_skitter .image {
overflow: hidden;
}
.box_skitter .image img {
width: 950px;
height: 380px;
display: none;
}
.box_skitter .box_clone {
position: absolute;
top: 0;
left: 0;
width: 100px;
overflow: hidden;
display: none;
z-index: 20;
}
.box_skitter .box_clone img {
position: absolute;
top: 0;
left: 0;
z-index: 20;
}
.box_skitter .prev_button {
position: absolute;
top: 30%;
left: 30px;
z-index: 100;
width: 69px;
height: 124px;
overflow: hidden;
text-indent: -9999em;
margin-top: -5px;
background: url(../images/prev.png) no-repeat left top !important;
}
.box_skitter .next_button {
position: absolute;
top: 30%;
right: 50px;
z-index: 100;
width: 69px;
height: 124px;
overflow: hidden;
text-indent: -9999em;
margin-top: -5px;
background: url(../images/next.png) no-repeat left top !important;
}
.box_skitter .label_skitter {
z-index: 150;
position: absolute;
display: none;
}
.loading {
position: absolute;
top: 50%;
right: 50%;
z-index: 10000;
margin: -16px -16px;
color: #fff;
text-indent: -9999em;
overflow: hidden;
background: url(../images/ajax-loader.gif) no-repeat left top;
width: 31px;
height: 31px;
}
#slideshow {
width: 950px;
height: 380px;
}
#slideshow ul {
display: none;
}
#content_area #zp {
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#content_area #zp p {
text-align: center;
}
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分;
- 所有页面相互超链接,可到三级页面,有5-10个页面组成;
- 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术;
- 菜单美观、醒目,二级菜单可正常弹出与跳转;
- 要有JS特效,如定时切换和手动切换图片新闻;
- 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用;
- 页面清爽、美观、大方,不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.❤️【关注我| 获取更多源码 | 优质文章】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.以上内容技术相关问题😈欢迎一起交流学习🔥