一、网页介绍
1、网页简介：此作品为大学生网页设计，web前端网页设计期末大作业。作品内容精简，易懂。适合水平较低学者使用。
2、网页编辑软件：此网页操作十分简单，可用Vscode完成网页的编写。
3、网页知识应用：内容简单，主要应用了网页知识中的：div+css、导航栏效果、鼠标悬停效果、table、视频效果等相关知识点。
二、网页效果
三、代码展示
代码如下：（提供部分仅供参考）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漫展浏览页</title>
<link rel="stylesheet" href="./css/1.css">
</head>
<body>
<!-- header section starts -->
<header>
<input type="checkbox" name="" id="toggler">
<label for="toggler" class=""></label>
<div class="btn">
<input id="" type="text" name="username" placeholder="请输入搜索内容" maxlength="6" >
<button class="" type="submit">搜索</button>
</div>
<div class="">
<div class="top">
<ul>
<li>
<a class="land" href="个人中心.html">个人中心</a>
</li>
<li id="land" >
<a class="land" href="登录页.html">注册/登陆</a>
</li>
</ul>
</div>
<div class="">
<div class="nav">
<ul>
<li><a href=" ">严选热推</a>
<ul>
<li><a href="详情页.html">Comic Line动漫展</a></li>
<li><a href="详情页1.html">梦乡动漫展</a></li>
</ul>
</li>
<li><a href=" ">精选展览</a>
<ul>
<li><a href="详情页.html">Comic Line动漫展</a></li>
<li><a href="详情页1.html">梦乡动漫展</a></li>
</ul>
</li>
<li><a href=" ">热门演出</a>
<ul>
<li><a href="详情页.html">Comic Line动漫展</a></li>
<li><a href="详情页1.html">梦乡动漫展</a></li>
</ul>
</li>
<li><a href=" ">相关推荐</a>
<ul>
<li><a href="详情页.html">Comic Line动漫展</a></li>
<li><a href="详情页1.html">梦乡动漫展</a></li>
</ul>
</li>
<li><a href=" ">售后</a>
<ul>
<li><a href="详情页.html">Comic Line动漫展</a></li>
<li><a href="详情页1.html">梦乡动漫展</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<!-- header section ends -->
<!--a section starts -->
<section class="a" id="a">
<div class="content">
<h3>Comic Line动漫展</h3>
<span> 2023中国国际少年博览会 </span>
<p>重庆国际博览会中心N5馆 2023 7.14-15</p>
<a href="详情页.html" class="btn">shop now</a>
</div>
</section>
<!--a section ends -->
<!-- b section starts -->
<section class="b" id="b">
<h1 class="heading"> <span>精选展览</span></h1>
<div class="row">
<div id="pp1">
<div id="pp2">
<img src="images/7.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
<img src="images/5.jpg"/>
<img src="images/6.jpg"/>
</div>
</div>
<div class="video-container">
<video src="images/1.mp4" muted autoplay="autoplay" loop="loop"></video>
<h3>时间静止......</h3>
</div>
<div class="content">
<h3>梦乡动漫展</h3>
<p>重庆·第八届梦乡动漫展</p>
<p>重庆南坪国际会展中心 2023 7.21-23</p>
<a href="详情页1.html" class="btn">learn more</a>
</div>
</div>
</section>
<!-- b section ends -->
<!-- icons section starts -->
<section class="icons-container">
<div class="icons">
<img src="C:\Users\31084\Desktop\project\images\15.jpg"alt="">
<div class="#">
<h3>订单</h3>
<span>all orders</span>
</div>
</div>
<div class="icons">
<img src="C:\Users\31084\Desktop\project\images\16.jpg"alt="">
<div class="#">
<h3>退换</h3>
<span>exchangea purchase</span>
</div>
</div>
<div class="icons">
<img src="C:\Users\31084\Desktop\project\images\17.jpg"alt="">
<div class="#">
<h3>惊喜优惠</h3>
<span>surprise offer</span>
</div>
</div>
<div class="icons">
<img src="C:\Users\31084\Desktop\project\images\18.jpg"alt="">
<div class="#">
<h3>安全支付</h3>
<span>secure payment</span>
</div>
</div>
</section>
<!-- icons section ends -->
<!-- c section starts -->
<section class="c" id="c">
<h1 class="heading"><span>热门演出</span> </h1>
<div class="box-container">
<div class="box">
<span class="discount"></span>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\2.jpg"alt="">
<div class="icons">
<a href="详情页.html" class="fas fa-heart"></a>
<a href="详情页.html" class="cart-btn">add to shopping cart</a>
<a href="详情页.html" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>重庆·爱WA动漫嘉年华01</h3>
<div class="price"> ¥58起 <span></span> </div>
</div>
</div>
<div class="box">
<span class="discount"></span>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\3.jpg"alt="">
<div class="icons">
<a href="详情页1.html" class="fas fa-heart"></a>
<a href="详情页1.html" class="cart-btn">add to shopping cart</a>
<a href="详情页1.html" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>重庆·第八届梦乡动漫展内场--茶师</h3>
<div class="price"> ¥50起 <span></span> </div>
</div>
</div>
<div class="box">
<span class="discount"></span>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\4.jpg"alt="">
<div class="icons">
<a href="详情页.html" class="fas fa-heart"></a>
<a href="详情页.html" class="cart-btn">add to shopping cart</a>
<a href="详情页.html" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>重庆·YH樱花动漫游戏文化节</h3>
<div class="price"> ¥54起<span></span> </div>
</div>
</div>
<div class="box">
<span class="discount"></span>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\5.jpg"alt="">
<div class="icons">
<a href="详情页.html" class="fas fa-heart"></a>
<a href="详情页.html" class="cart-btn">add to shopping cart</a>
<a href="详情页.html" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>重庆·国乙Only第二届我们一起约会吧！和情侣一样</h3>
<div class="price"> ¥52起 <span></span> </div>
</div>
</div>
<div class="box">
<span class="discount"></span>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\6.jpg"alt="">
<div class="icons">
<a href="详情页.html" class="fas fa-heart"></a>
<a href="详情页.html" class="cart-btn">add to shopping cart</a>
<a href="详情页.html" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>重庆·2023中国国际少年博览会-Comic Line动漫展 刘照坤内场</h3>
<div class="price"> ¥128 <span></span> </div>
</div>
</div>
<div class="box">
<span class="discount"></span>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\7.jpg"alt="">
<div class="icons">
<a href="详情页1.html" class="fas fa-heart"></a>
<a href="详情页1.html" class="cart-btn">add to shopping cart</a>
<a href="详情页1.html" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>重庆·第八届梦乡动漫展内场--文森</h3>
<div class="price"> ¥238 <span></span> </div>
</div>
</div>
<div class="box">
<span class="discount"></span>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\8.jpg"alt="">
<div class="icons">
<a href="详情页.html" class="fas fa-heart"></a>
<a href="详情页.html" class="cart-btn">add to shopping cart</a>
<a href="详情页.html" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>重庆·anisong noght-动漫音乐派对 by月背club 7.1</h3>
<div class="price"> ¥20起 <span></span> </div>
</div>
</div>
<div class="box">
<span class="discount"></span>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\9.jpg"alt="">
<div class="icons">
<a href="详情页.html" class="fas fa-heart"></a>
<a href="详情页.html" class="cart-btn">add to shopping cart</a>
<a href="详情页.html" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>重庆·西南国乙only狂欢夜</h3>
<div class="price"> ¥52起 <span></span> </div>
</div>
</div>
<div class="box">
<span class="discount"></span>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\10.jpg"alt="">
<div class="icons">
<a href="详情页.html" class="fas fa-heart"></a>
<a href="详情页.html" class="cart-btn">add to shopping cart</a>
<a href="详情页.html" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>重庆·【京都动画X春日计划】</h3>
<div class="price"> ¥60起 <span></span> </div>
</div>
</div>
</div>
</section>
<!-- c section ends -->
<!-- d section starts -->
<section class="d" id="d">
<h1 class="heading"><span>相关推荐</span> </h1>
<div class="box-container">
<div class="box">
<p>2023/8/6 地点：新海大酒店（红星路26号）</p>
<div class="user">
<img src="C:\Users\31084\Desktop\project\images\11.jpg"alt="">
<div class="user-#">
<h3>忠县·橘汽动漫游戏展</h3>
<span>会员购</span>
</div>
</div>
<span class="fas fa-quote-right"></span>
</div>
<div class="box">
<p>2023/8/11 华礼宴文化艺术宴会中心</p>
<div class="user">
<img src="C:\Users\31084\Desktop\project\images\12.jpg"alt="">
<div class="user-#">
<h3>重庆·第一届异次元动漫嘉年华</h3>
<span>会员购</span>
</div>
</div>
<span class="fas fa-quote-right"></span>
</div>
<div class="box">
<p>2023/7/23 蓝湾丽呈酒店</p>
<div class="user">
<img src="C:\Users\31084\Desktop\project\images\13.jpg"alt="">
<div class="user-#">
<h3>云阳·遇光动漫游戏展</h3>
<span>会员购</span>
</div>
</div>
<span class="fas fa-quote-right"></span>
</div>
</div>
</section>
<!-- d section ends -->
<!-- e section starts -->
<section class="e" id="e">
<h1 class="heading"> <span>售后</span></h1>
<div class="row">
<form action="">
<input type="text" placeholder="name" class="box">
<input type="number" placeholder="number" class="box">
<input type="text" placeholder="address" class="box">
<textarea name="" class="box" placeholder="message" id="" cols="30" rows="10"></textarea>
<input type="submit" value="send message" class="btn">
</form>
<div class="image">
<img src="C:\Users\31084\Desktop\project\images\14.jpg" alt="">
</div>
</div>
</section>
<!-- e section ends -->
</body>
</html>2、CSS代码如下：
*{
margin:0; padding:0; /* 外边距、内边距的设置*/
box-sizing: border-box; /*定义宽高时border与padding的参数值包含在内*/
font-family: Verdana, Geneva, Tahoma, sans-serif; /*字体*/
outline: none; border:none; /*轮廓线*/
text-decoration: none;/*无下划线，标准文本*/
text-transform: capitalize;/*将每个单词的首字母转换成大写*/
transition: .2s linear;/*动画过渡*/
}
html{/*头部*/
font-size: 60%;
scroll-behavior: smooth;/*页面平滑滚动*/
scroll-padding-top: 6rem;/*控制a标签描点距离顶部距离*/
overflow-x: hidden;/*隐藏x轴滚动条*/
}
section{/*图片上文字部分*/
padding:2rem 9%;
}
.heading{/*每个部分提示行*/
text-align: center;
font-size: 4rem;
color:#333;
padding:1rem;
margin:2rem 0;
background:rgba(255, 51, 153,.05);
}
.heading span{
color:#66FFFF;
}
.btn{/*设置光标*/
display: inline-block;/*内联和块之间提供一个中间状态*/
margin-top: 1rem;
border-radius: 5rem;
background:#333;
color:#fff;
padding:.9rem 3.5rem;
cursor: pointer;/*光标为一只手*/
font-size: 1.7rem;
}
.btn:hover{/*光标悬停色*/
background:#66FFFF;
}
.top {/*注册登录*/
height: 0px;
width: 50%;
}
.land {
cursor: pointer;
line-height: 27px;
font-size: 13px;
color: #a2a2a2;
}
.land:hover {
color: black;
}
header #toggler{
display: none;/*将元素的显示设为无，不显示*/
}
.nav{/*下拉菜单*/
width: 1000px;
height: 60px;
margin: 0 auto;
}
.nav ul{
list-style-type: none;/*列表项前无标记*/
background-color: #fff;
line-height: 60px;
text-align: center;
}
.nav ul li{
display: inline-block;/*既可设置宽高又可不换行*/
padding: 0 50px;
position: relative;
}
.nav ul li a{
text-decoration: none;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: rgb(113, 105, 106);
}
.nav ul li ul{
display: none;
position: absolute;
left: 0;
text-align: center;
line-height: 60px;
}
.nav ul li:hover ul{
display: block;
}
.nav ul li ul li{
width: 60px;
padding: 0 20px;
border-bottom: 2px solid transparent;
}
.nav ul li ul li:hover{
border-bottom: 2px solid #66FFFF;
}
.nav ul li ul li a{
font-size: 15px;
}
.nav ul li ul li a:hover{
color: #66FFFF;
}
.a{/*设置严选热推*/
display: flex;
align-items: center;
min-height: 100vh;/*视窗高度撑开与屏幕一致*/
background:url(../images/1.jpg) no-repeat;/*图片位于上部居中位置，不会被重复*/
background-size: cover;
background-position: center;
}
.a .content{
max-width: 50rem;
}
.a .content h3{/*文字部分*/
font-size: 6rem;
color:#333;
}
.a .content span{
font-size: 3.5rem;
color:#66FFFF;
padding:1rem 0;
line-height: 1.5;
}
.a .content p{
font-size: 1.5rem;
color:black;
padding:1rem 0;
line-height: 1.5;
}
#pp1{/*轮播图*/
width:100%;
height:400px;
overflow:hidden;/*隐藏溢出*/
}
#pp2{
width:9999px;
height:9999px;
animation:switch 40s infinite;/*动画执行时间*/
}
@keyframes switch{/*构建动画，把样式从一个状态慢慢转变为另一个状态*/
0%{};
20%{transform:translateX(0px);}/*水平与垂直方向移动的距离*/
40%{transform:translateX(-820px);}
60%{transform:translateX(-1640px);}
80%{transform:translateX(-2460px);}
100%{transform:translateX(-3280px);}
}
.b .row{/*设置精选展览*/
display: flex;
align-items: center;
gap:2rem;/*距离*/
flex-wrap: wrap;/*换行，第一行在上方*/
padding:2rem 0;
padding-bottom: 3rem;
}
.b .row .video-container{/*设置视频*/
flex:1 1 40rem;
position: relative;
}
.b .row .video-container video{
width:100%;
border:1.5rem solid #fff;
border-radius: .5rem;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
height: 100%;
object-fit: cover;/*防止图片挤压变形*/
}
.b .row .video-container h3{
position: absolute;
top:50%;
transform: translateY(-30%);/*y轴方向上位移*/
font-size: 3rem;
background:#fff;
width:100%;
padding:1rem 2rem;
text-align: center;
mix-blend-mode: screen;/*过滤掉字体颜色*/
}
.b .row .content{
flex:1 1 40rem;/*放大、缩小、剩余空间本身大小*/
}
.b .row .content h3{
font-size: 3rem;
color:#333;
}
.b .row .content p{
font-size: 1.5rem;
color:#999;
padding:.5rem 0;
padding-top: 1rem;
line-height: 1.5;
}
.icons-container{/*图标内容部分*/
background:#eee;
display: flex;
flex-wrap: wrap;
gap:1.5rem;
padding-top: 5rem;
padding-bottom: 5rem;
}
.icons-container .icons{
background:#fff;
border:.1rem solid rgba(0,0,0,.1);
padding:2rem;
display: flex;
align-items: center;
flex:1 1 25rem;
}
.icons-container .icons img{
height:5rem;
margin-right: 2rem;
}
.icons-container .icons h3{
color:#333;
padding-bottom: .5rem;
font-size: 1.5rem;
}
.icons-container .icons span{
color:#555;
font-size: 1.3rem;
}
.c .box-container{/*设置热门演出*/
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}
.c .box-container .box{
flex:1 1 30rem;
box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
border-radius: .5rem;
border:.1rem solid rgba(0,0,0,.1);
position: relative;
}
.c .box-container .box .discount{
position: absolute;
top:1rem; left:1rem;
padding:.7rem 1rem;
font-size: 2rem;
color:#66FFFF;
background:rgba(255, 51, 153,.05);
border-radius: .5rem;
}
.c .box-container .box .image{
position: relative;
text-align: center;
padding-top: 2rem;
overflow:hidden;
}
.c .box-container .box .image img{
height:25rem;
}
.c .box-container .box:hover .image img{
transform: scale(1.1);/*鼠标悬停图片放大*/
}
.c .box-container .box .image .icons{
position: absolute;
bottom:-7rem;
left:0;
right:0;
display: flex;/*弹性布局，能扩展和收缩flex容器内的元素*/
}
.c .box-container .box:hover .image .icons{
bottom:0;
}
.c .box-container .box .image .icons a{/*图标内容*/
height: 5rem;
line-height: 5rem;
font-size: 2rem;
width:50%;
background:#66FFFF;
color:#fff;
}
.c .box-container .box .image .icons .cart-btn{
border-left: .1rem solid #fff7;
border-right: .1rem solid #fff7;
width:100%;
}
.c .box-container .box .image .icons a:hover{
background:#333;
}
.c .box-container .box .content{/*图标内容*/
padding:2rem;
text-align: center;
}
.c .box-container .box .content h3{/*标题*/
font-size: 2.5rem;
color:#333;
}
.c .box-container .box .content .price{/*价格*/
font-size: 2.5rem;
color:#66FFFF;
font-weight: bolder;
padding-top: 1rem;
}
.c .box-container .box .content .price span{
font-size: 1.5rem;
color:#999;
font-weight: lighter;
text-decoration: line-through;
}
.d .box-container{/*设置相关推荐*/
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}
.d .box-container .box{
flex:1 1 30rem;
box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
border-radius: .5rem;
padding:3rem 2rem;
position: relative;
border:.1rem solid rgba(0,0,0,.1);
}
.d .box-container .box .fa-quote-right{
position: absolute;
bottom:3rem;
right:3rem;
font-size: 6rem;
color:#eee;
}
.d .box-container .box p{
color:#999;
font-size: 1.5rem;
line-height: 1.5;
padding-top: 2rem;
}
.d .box-container .box .user{
display: flex;
align-items: center;
padding-top: 2rem;
}
.d .box-container .box .user img{
height:6rem;
width:6rem;
border-radius: 50%;
object-fit: cover;
margin-right: 1rem;
}
.d .box-container .box .user h3{/*标题*/
font-size: 2rem;
color:#333;
}
.d .box-container .box .user span{/*会员购*/
font-size: 1.5rem;
color:#999;
}
.e .row{/*设置售后*/
display: flex;
flex-wrap: wrap-reverse;
gap:1.5rem;
align-items: center;
}
.e .row form{
flex:1 1 40rem;
padding:2rem 2.5rem;
box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
border:.1rem solid rgba(0,0,0,.1);
background: #fff;
border-radius: .5rem;
}
.e .row .image{
flex:1 1 40rem;
}
.e .row .image img{
width: 100%;
}
.e .row form .box{
padding:1rem;
font-size: 1.7rem;
color:#333;
text-transform: none;
border:.1rem solid rgba(0,0,0,.1);
border-radius: .5rem;
margin:.7rem 0;
width: 100%;
}
.e .row form .box:focus{
border-color:#66FFFF;
}
.e .row form textarea{
height: 15rem;
} 四、个人总结
以上就是本次网页项目的全部内容，有很多不足，欢迎指正，也希望能给大家带去很多思考及帮助。（图片可自行修改，此项目图片均为网上所找）谢谢！！！
扫一扫
2440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
