Web前端开发技术课程大作业：简单的网页制作期末作业——狐妖小红娘(6页)
【摘要】 HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】@TOC...
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
@TOC
一、网页介绍📖
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>
<title>首页</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--bootstrap-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--coustom css-->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!--script-->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="banner-background" id="to-top">
<div class="container">
<div class="nav-back">
<div class="navigation">
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html" class="active">首页</a></li>
<li><a href="about.html">分篇剧情</a></li>
<li><a href="juese.html">动漫角色</a></li>
<li><a href="jieshuo.html" >用语解说</a></li>
<li><a href="news.html">相关新闻</a></li>
<li><a href="contact.html">给我留言</a></li>
</ul>
</div>
</nav>
<div class="clearfix"></div>
</div>
<div class="logo">
<img src="images/logo.png" width="150"/>
</div>
<div class="banner-slider">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./images/1.jpg" alt="dog" class="img-responsive">
</div>
<div class="item">
<img src="./images/2.jpg" alt="cat" class="img-responsive">
</div>
<div class="item">
<img src="./images/4.jpg" alt="wolfdog" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--header-ends-->
<!--content-->
<div class="our-products">
<div class="container">
<div class="products-gallery">
<h2>动漫人物</h2>
<div class="col-md-3 arr">
<div class="bg">
<img src="./images/b.jpg" alt="pet" class="img-responsive">
<span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
<div class="caption">
<h3>白月初</h3>
<p>财迷，吃货。<br/>史上最厉害的无节操道士。<br/>涂山苏苏的未婚夫。</p>
<p><a href="#" class="btn btn-danger" role="button">More</a></p>
</div>
</div>
</div>
<div class="col-md-3 arr">
<div class="bg">
<img src="./images/c.jpg" alt="pet" class="img-responsive">
<span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
<div class="caption">
<h3>涂山苏苏</h3>
<p>涂山姐妹的三当家。<br/>
天然呆妖力弱，<br/>目标是成为优秀的狐妖。</p>
<p><a href="#" class="btn btn-danger" role="button">More</a> </p>
</div>
</div>
</div>
<div class="col-md-3 arr">
<div class="bg">
<img src="./images/d.jpg" alt="pet" class="img-responsive">
<span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
<div class="caption">
<h3>涂山雅雅</h3>
<p>涂山姐妹的大当家，<br/>如今的涂山一族最强者。<br/>
擅长的技能是冰系法术。</p>
<p><a href="#" class="btn btn-danger" role="button">More</a></p>
</div>
</div>
</div>
<div class="col-md-3 arr">
<div class="bg">
<img src="./images/e.jpg" alt="pet" class="img-responsive">
<span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
<div class="caption">
<h3>涂山容容</h3>
<p>涂山姐妹二当家。<br/>
拥有涂山一族最厉害的头脑。<br/>
负责管理涂山的所有产业。 </p>
<p><a href="#" class="btn btn-danger" role="button">More</a></p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--content-ends-->
<!--footer-->
<div class="footer">
<p>Copyright © All rights reserved.</p>
</div>
</body>
</html>
2.CSS样式代码 🏠
h4, h5, h6,
h1, h2, h3 {margin-top: 0;}
ul, ol {margin: 0;}
p {margin: 0;}
body{
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}
/*--header-nav--*/
.banner-background {
background: url(../images/bg.jpg);
}
.nav-back {
background-color: #fff;
padding: 0px 50px 0px 50px;
}
.banner-slider {
padding-bottom: 50px;
}
.navbar-default {
background-color: transparent !important;
border: none !important;
min-height: 90px;
margin-bottom: 0;
}
.navbar-collapse {
padding: 0 !important;
}
.navbar-nav {
float: none !important;
}
.navbar-nav>li {
margin-left: 0em !important;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
text-decoration: none;
background: #000000;
padding: 30px 57px;
font-family: 'Quicksand', sans-serif;
font-size:16px;
font-weight: 700;
}
.navbar-default .navbar-nav>li>a:hover {
color: #000;
background-color: #bdbdd1;
transition:0.5s all ease-in-out;
font-size:16px;
}
.copyrights{
text-indent:-9999px;
height:0;
line-height:0;
font-size:0;
overflow:hidden;
}
ul.nav.navbar-nav li a.active{
color: #fff;
background-color: #fd8e83;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: #fff;
background-color: #FF6666;
}
.navbar-default .navbar-nav>li>a:focus{
color: #fff;
background-color: #FF6666;
}
.logo {
text-align: center;
margin:0;
padding:16px 0px 26px;
}
.logo h1 {
margin: 0;
}
.logo a {
font-family: 'Quicksand', sans-serif;
font-weight: bold;
font-size: 35px;
text-decoration: none;
color: #000;
}
.logo a span.hlf{
text-decoration: none;
color: #FF6666;
}
.carousel-indicators .active {
background-color: #FF6666;
}
.carousel-indicators li {
border: 1px solid #444343;
}
/*--header-nav--*/
/*--our-products--*/
.our-products {
background-color: #fff;
}
.products-gallery {
margin: 0em 0em 5em;
}
.products-gallery h2 {
text-align: center;
font-weight: 400;
font-size: 3em;
margin: 0px;
color: #FDA2A2;
padding: 1em 0em;
font-family: 'Quicksand', sans-serif;
}
.caption {
text-align: center;
padding: 50px 40px 0px;
}
.arr:hover{
padding: 0;
transform: scale(1.02,1.02);
transition: 0.5s all ease-in-out;
cursor:pointer;
}
.arr {
padding: 0;
}
.bg {
background-color: #f9e4ca;
margin: 0px 8px;
border-radius: 5px;
position: relative;
}
.arr img{
width:100%;
border-bottom: 6px solid #E55151;
border-radius: 5px 5px 0px 0px;
}
span.pst {
font-size: 15px;
position: absolute;
background-color: #E55151;
border-radius: 50%;
padding: 19px 19px;
top: 41%;
left: 41%;
text-align: center;
}
span.pst:hover {
-o-transform:rotatey(360deg);
-moz-transform:rotatey(360deg);
-webkit-transform:rotatey(360deg);
transform:rotatey(360deg);
transition:0.7s;
cursor: pointer;
}
.caption:hover {
transform:scale(1,1);
transition:0.5s all;
}
.caption h3{
}
.caption p{
line-height: 1.8em;
padding-bottom: 20px;
}
/*--footer--*/
.footer{
background: url(../images/foot.jpg);
padding: 5em 0em;
text-align:center;
font-size:16px;
}
/*--footer--*/
/*--juese--*/
.our-team{padding:0 15px;}
.our-team h3 {
font-size: 2em;
font-weight: 400;
margin: 0px 0px 30px;
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
}
.txt {width:330px;height:460px;background:#f9e4ca;
border-radius:6px;
float:left;margin:0 20px;margin-bottom:50px;
}
.txt img{
float:left;width:330px;height:230px; margin-bottom:20px;
border-top-right-radius:6px;border-top-left-radius:6px;
}
.txt h4{
font-family: 宋体;
font-size: 24px;
font-weight: 600;
margin-bottom:10px;text-align:center;
}
.txt p{
padding-left:8px;padding-right:5px;color:#696969;
text-indent:2em;
font-size: 14px;
font-weight: 500;
line-height: 1.8em;
}
/*--juese--*/
/*--contact--*/
.contact-page {
border-top: 3px solid pink;
padding: 3em 0em;
}
.contact-page h3 {
font-size: 3em;
font-weight: 400;
text-align: center;
color: #FDA2A2;
margin: 0px 0px 30px;
font-family: 'Quicksand', sans-serif;
}
.text-area textarea {
height: 200px;
width: 100%;
resize: none;
margin: -5px 0px;
outline: none;
border: 2px solid #1C1C1C;
text-align:left;
padding: 8px 8px;
}
.form{
text-align:right;
}
input[type="text"]{
outline:none;
width: 70%;
border: 2px solid #1C1C1C;
padding: 8px 8px;
margin: -5px 0px;
}
.feed-back {
padding: 3em 0;
}
/*--contact--*/
/*--services--*/
.service-list h3{
font-size: 3em;
font-weight: 400;
text-align: center;
color: #FDA2A2;
margin: 0px 0px 45px;
font-family: 'Quicksand', sans-serif;
}
.services {
min-height: 500px;
}
ul.row {
list-style-type: none;
}
li.mr {
margin-bottom: 6px;
padding: 0px 3px;
}
ul.list{
list-style-image:url(../images/mini-arrow.jpg);
margin:0;
padding:0;
}
ul.list li{
margin-bottom:30px;
padding:0;
}
ul.list li a{
text-decoration:none;
color: #696969;
}
ul.list li a:hover{
color: rgb(255, 102, 102);
}
a.controls.next {
float: left;
margin-top: 25px;
}
a.controls.previous {
float: right;
margin-top: 25px;
}
.clear{
clear: both;
}
.modal-body {
position: relative;
padding: 50px;
}
.services {
border-top: 3px solid rgb(255, 192, 203);
}
.service-list {
padding: 3em 0em;
}
.gal-settings {
padding: 0px 4px 0px;
margin: 0px 0px 8px;
}
/*--services--*/
/*--news--*/
.typography {
border-top: 3px solid pink;
padding: 3em 0em;
}
.typography > h3{
font-size: 3em;
font-weight: 400;
text-align: center;
color: #FDA2A2;
margin: 0px 0px 40px;
font-family: 'Quicksand', sans-serif;
}
.grid_1 > h4 {
font-size: 2em;
margin: 0px 0px 26px;
}
.table>tbody>tr>td{
padding:16px 0px !important;
}
.table a{color: #676767;text-decoration:none;}
.table a:hover{color: #FDA2A2;}
/*--news--*/
/*--about--*/
.about-pg{
border-top: 3px solid rgb(255, 192, 203);
padding: 3em 0em 3em;
}
.about-pg>h3{
font-size: 3em;
font-weight: 400;
text-align: center;
color: #FDA2A2;
margin: 0px 0px 45px;
text-transform:uppercase;
font-family: 'Quicksand', sans-serif;
}
.about-list{padding:0 40px;margin-top:20px;}
.about-list img{width:160px;float:left;margin-right:30px;margin-bottom:20px;}
.about-list p{line-height:25px;}
.l{border-bottom:1px solid #ffc0cb;box-shadow: 1px 1px 10px #ffc0cb;}
/*--about--*/
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习🔥!
💂【获取方式】
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）