文章目录🌰
- 一、网页介绍📖
- 一、网页效果🌌
- 二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
- 三、个人总结😊
- 四、更多干货🚀
一、网页介绍📖
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 lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为-构筑万物互联的智能世界</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/top-nav.css">
<link rel="stylesheet" href="css/nav-con.css">
<link rel="stylesheet" href="css/slideshow.css">
<link rel="stylesheet" href="css/recommend.css">
<link rel="stylesheet" href="css/img-show.css">
<link rel="stylesheet" href="css/news-activity.css">
<link rel="stylesheet" href="css/link-btn.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/corner.css">
<link rel="stylesheet" href="http://www.ylcp.shop/files/files/1650896299792/font-awesome/css/all.css">
<link rel="stylesheet" href="css/iconfont1.css">
<script src="js/top-nav.js"></script>
</head>
<body>
<!-- 上侧导航区域 -->
<div class="top-nav">
<!-- 最上面个导航栏 -->
<div class="top-bar">
<ul>
<li class="login">
<a href="login.html">
<i class="fas fa-user"></i>
登录
</a>
</li>
<li class="pull">
<i class="fas fa-globe"></i>
<span>选择区域/语言</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="pull">
<i class="fas fa-border-all"></i>
<span>集团网站</span>
<i class="fas fa-angle-down"></i>
</li>
</ul>
</div>
<!-- 集团网站下拉框 -->
<div class="net">
<ul class="brief">
<li class="title">
<i class="fas fa-chevron-right"></i>
<span>集团网站</span>
</li>
<li class="intro">
公司介绍、新闻动态、展会活动等信息
</li>
</ul>
<ul>
<li class="link">
<a href="javascript:;">
消费者业务网站
<i class="fas fa-angle-right"></i>
</a>
</li>
<li class="intro">
手机,PC和平板等智慧生活产品
</li>
</ul>
<ul>
<li class="link">
<a href="javascript:;">
企业业务网站
<i class="fas fa-angle-right"></i>
</a>
</li>
<li class="intro">
企业商用产品、解决方案和云服务
</li>
</ul>
<ul>
<li class="link">
<a href="javascript:;">
运营商网络业务网站
<i class="fas fa-angle-right"></i>
</a>
</li>
<li class="intro">
运营商网络解决方案、产品及服务
</li>
</ul>
<ul>
<li class="link">
<a href="javascript:;">
华为云网站
<i class="fas fa-angle-right"></i>
</a>
</li>
<li class="intro">
华为云服务及解决方案
</li>
</ul>
</div>
<!-- 语言区域下拉框 -->
<div class="region">
<h3>选择地区/语言</h3>
<ul class="first">
<li>
<span>
Japan -
<a href="javascript:;">日本語</a>
</span>
</li>
<li>
<span>
Myanmar -
<a href="javascript:;">ျမန္မာ</a>
</span>
</li>
<li>
<span>
Spain -
<a href="javascript:;">Español</a>
</span>
</li>
<li>
<span>
United Kingdom -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
Global-
<a href="javascript:;">English</a>
</span>
</li>
</ul>
<ul>
<li>
<span class="zhong">
<i class="fas fa-angle-right"></i>
China -
<a href="javascript:;">简体中文</a>
</span>
</li>
<li>
<span>
Kazakstan -
<a href="javascript:;">русский</a>
</span>
</li>
<li>
<span>
New Zealand -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
Switzerland -
<a href="javascript:;">English</a>
</span>
</li>
<li>
<span>
United States -
<a href="javascript:;">English</a>
</span>
</li>
</ul>
</div>
</div>
<!-- 导航栏 -->
<div class="nav-con">
<div class="nav">
<!-- 最左侧logo -->
<a href="">
<img src="picture/huawei_logo.png">
</a>
<!-- 中间选项卡 -->
<ul class="center">
<li class="product">
<span>个人及家庭产品</span>
<!-- 个人及家庭产品下拉框 -->
<li>
<a href="javascript:;">隐私保护</a>
</li>
<li>
<a href="javascript:;">除名查询</a>
</li>
</ul>
</div>
</div>
<!-- 流动客服及回到顶部 -->
<div class="corner">
<div class="to-serve">
<i class="iconfont"></i>
</div>
<div class="to-top">
<i class="fas fa-chevron-up"></i>
</div>
</div>
</body>
</html>
2.CSS样式代码 🏠
.news-activity{
width: 85%;
margin: 0 auto;
overflow: hidden;
margin-bottom: 60px;
}
.exhibition1{
width: 31%;
overflow: hidden;
float: left;
height: 435px;
}
.exhibition2{
width: 31%;
height: 435px;
overflow: hidden;
float: left;
margin-left: 3.5%;
}
.exhi .tip{
width: 92px;
height: 32px;
background: #999999;
text-align: center;
line-height: 32px;
}
.exhi .tip span{
font-size: 14px;
color: #fff;
}
.exhi img{
width: 100%;
height: 170px;
transition: all 0.5s;
}
.exhi .message{
width: 100%;
background: #F8F8F7;
margin-top: -5px;
overflow: hidden;
line-height: 2;
}
.message h3{
margin-left: 25px;
margin-top: 30px;
color: #333333;
font-size: 16px;
}
.message .location{
margin-left: 25px;
color: #333333;
font-size: 14px;
margin-right: 20px;
}
.location i{
margin-right: 10px;
}
.message .date{
color: #333333;
font-size: 14px;
}
.date i{
margin-right: 10px;
}
.message p{
margin-left: 25px;
margin-top: 20px;
color: #333333;
font-size: 14px;
margin-bottom: 60px;
}
.exhi:hover img{
transform: scale(1.03);
}
.exhi:hover .message{
background: #F3F2F1;
}
.news-activity .news3{
width: 31%;
height: 432px;
overflow: auto;
float: right;
background: #F8F8F7;
position: relative;
}
.news3 .tip3{
width: 65px;
height: 32px;
background: #999999;
text-align: center;
line-height: 32px;
color: #fff;
font-size: 14px;
position: absolute;
top: 0;
}
.news3 ul{
margin-top: 62px;
margin-left: 30px;
margin-right: 30px;
line-height: 1.6;
}
.news3 ul li{
margin-bottom: 30px;
}
.news3 ul li p{
color: #333333;
font-size: 16px;
font-weight: bolder;
}
.news3 ul li span{
color: #666666;
font-size: 14px;
}
.news3 li a:hover p,
.news3 li a:hover span{
color: #F70000;
}
.news3 .fog{
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
background: rgba(248, 248, 248, 0.9);
box-shadow: 0 20px 20px 30px rgba(248, 248, 248, 0.9);
}
/* 设置滚动条样式 */
.news3::-webkit-scrollbar{
width: 4px;
}
.news3::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.news3::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分;
- 所有页面相互超链接,可到三级页面,有5-10个页面组成;
- 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术;
- 菜单美观、醒目,二级菜单可正常弹出与跳转;
- 要有JS特效,如定时切换和手动切换图片新闻;
- 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用;
- 页面清爽、美观、大方,不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。