前言
web前端开发课程的结课作业就是三个主题三选一，我选择的是写一个关于我的学校的网站（包括了十来个网页结合css、html、js）
一、期末大作业要求
利用Visual Studio Code软件并结合html、css、js进行网站的书写。
二、我的学校网站项目的设计
1、所用的框架
我是用的bootstrap框架，首先从网页上下载框架https://v3.bootcss.com/，然后将框架导入到Visual studio中，用了这个框架后就很方便了。比如轮播图、列表等都可以用框架，然后直接填充内容就好了。
2、相关文件夹及文件介绍
图片文件夹存放着网页所需的图片，CSS文件夹内存放着css样式表文件，JS文件夹则包含了与网页相关的JavaScript文件。bootstrap文件夹存放的是框架。
3、效果展示
4、源代码
整个web网页源码我已经上传到github上面了，可以直接进行下载zip包解压使用。
GitHub - asfze5/web2: web前端大作业
4.1首页
<!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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="./jQuery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type=text/css href="./图片切换.css">
<script src="./js/jquery-1.2.6.min.js" type=text/javascript></script>
<script src="./js/dtqh.js" type=text/javascript></script>
</head>
<style>
*{
padding: 0;
margin: 0 auto;
}
body{
width: 1250px;
}
.yemian{
text-align: center;
}
#carousel-example-generic>.carousel-inner{
width: 700px;
height: 405px;
}
#carousel-example-generic{
width: 700px;
height: 405px;
margin-left: 10px;
float: left;
}
.tip{
position: relative;
height: 70px;
}
.tip-a{
position: absolute;
right: 10px;
top: 5px;
}
.tip-a>a{
color: white;
}
.tip>img{
height: 83px;
width: 100%;
}
.daohang{
width: 470px;
height: 430px;
float: left;
position: relative;
left: 40px;
}
.list-group>.list-group-item:hover,.tab-pane>.list-group-item:hover
,.col-md-8>.duanluo>p:hover{
color: rgb(27, 140, 239);
}
.row{
margin-left: -5px;
margin-top: 15px;
}
.duanluo,.shijian,.shijian1{
float: left;
}
.shijian{
margin-left: 200px;
}
.shijian1{
margin-left: 230px;
}
.duanluo>p,.shijian>p,.shijian1>p{
margin-top: 32px;
line-height: 2px;
text-align: left;
font-size: medium;
}
#bilibili_main{
width: 400px;
height: 250px;
border: #000 solid 1px;
margin: 50px auto;
}
#bilibili_main img{
cursor: pointer;
transition: all 2s;
}
#bilibili_main img:hover{
transform: scale(1.2);
}
#bilibili_item{
border: 1px white;
margin-left: 5px;
}
#bilibili_main{
border: 1px white;
}
.duanluo img:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="yemian">
<div class="tip">
<img src="./图片/头标.png" alt="">
<div class="tip-a">
<a href="./0联系我们.html" target="_blank">联系我们 |</a>
<a href="#" target="_blank">学校邮箱 |</a>
<a href="./0登录注册.html" target="_blank">登录查询</a>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="./2学校概况.html" target="_blank">学校概况</a></li>
<li><a href="./4校园生活.html" target="_blank">校园生活</a></li>
<li><a href="./0校园风光.html" target="_blank">校园风光</a></li>
<li><a href="./3学校猫猫.html" target="_blank">学校猫猫</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">学校风土 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="./1学校教学楼.html" target="_blank">教学楼</a></li>
<li><a href="./0食堂伙食.html" target="_blank">食堂美食</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">学校公众号 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="./0西石龙井青年.html" target="_blank">西石龙井青年</a></li>
<li><a href="https://www.swpu.edu.cn/dj/index.htm" target="_blank">石大先锋</a></li>
<li><a href="./0西南石油大学.html" target="_blank">西南石油大学南充校区</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">友情链接 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.chaoxing.com/?index=1" target="_blank">超星学习通</a></li>
<li><a href="https://www.swpu.edu.cn/dean/searchList.jsp?wbtreeid=1193" target="_blank">学校教务网</a></li>
<li><a href="https://www.icourse163.org/" target="_blank">MOOC中国大学</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://www.yiban.cn/" target="_blank">易班</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./图片/风景13.jpg" alt="...">
</div>
<div class="item">
<img src="./图片/风景12.jpg" alt="...">
</div>
<div class="item">
<img src="./图片/风景8.jpg" alt="...">
</div>
<div class="item">
<img src="./图片/风景15.jpg" alt="...">
</div>
<div class="item" id="item-ad">
<img src="./图片/风景16.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="daohang">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">新闻中心</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">通知公告</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">热点关注</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="list-group">
<button type="button" class="list-group-item">x1</button>
<button type="button" class="list-group-item">x2</button>
<button type="button" class="list-group-item">x3</button>
<button type="button" class="list-group-item">x4</button>
<button type="button" class="list-group-item">x5</button>
<button type="button" class="list-group-item">x6</button>
<button type="button" class="list-group-item">x7</button>
<button type="button" class="list-group-item">x8</button>
<button type="button" class="list-group-item">x9</button>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile"><button type="button" class="list-group-item">b1</button>
<button type="button" class="list-group-item">b2</button>
<button type="button" class="list-group-item">b3</button>
<button type="button" class="list-group-item">b4</button>
<button type="button" class="list-group-item">b5</button>
<button type="button" class="list-group-item">b6</button>
<button type="button" class="list-group-item">b7</button>
<button type="button" class="list-group-item">b8</button>
<button type="button" class="list-group-item">b9</button>
</div>
<div role="tabpanel" class="tab-pane" id="messages"><button type="button" class="list-group-item">q1</button>
<button type="button" class="list-group-item">q2</button>
<button type="button" class="list-group-item">q3</button>
<button type="button" class="list-group-item">q4</button>
<button type="button" class="list-group-item">q5</button>
<button type="button" class="list-group-item">q6</button>
<button type="button" class="list-group-item">q7</button>
<button type="button" class="list-group-item">q8</button>
<button type="button" class="list-group-item">q9</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6"><a href="https://www.sc.gov.cn/" target="_blank"><img src="./图片/四川省人民政府.png" alt="四川省人民政府网站" style="width: 600px;"></a></div>
<div class="col-md-6"><a href="https://gxlz.scedu.net/webuser/index.html#/Home" target="_blank"><img src="./图片/四川省高校网络理政.png" alt="四川省高校网络理政平台" style="width: 600px;"></a></div>
</div>
<div class="row">
<div class="col-md-8">
<p> <h3>合作交流</h3></p>
<div class="duanluo">
<p>w1</p>
<p>w2</p>
<p>w3</p>
<p>w4</p>
<p>w5</p>
<p>w6</p>
<p>w7</p>
</div>
<div class="shijian1">
<p>2023-4-14</p>
<p>2023-4-12</p>
<p>2023-4-10</p>
<p>2023-3-28</p>
<p>2023-3-04</p>
<p>2023-2-17</p>
<p>2023-2-01</p>
</div>
</div>
<div class="col-md-4">
<h3>石大人物</h3>
<div class="duanluo">
<a href="#"><img src="./图片/石大人物.png" style="width: 170px;height: 280px;" ></a>
<a href="#"><img src="./图片/石大人物2.jpg" style="width: 205px;height: 280px;" ></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><h3>教学科研</h3></p>
<div class="duanluo">
<p>r1</p>
<p>r2</p>
<p>r3</p>
<p>r4</p>
<p>r5</p>
<p>r6</p>
<p>r7</p>
</div>
<div class="shijian">
<p>2023-4-14</p>
<p>2023-4-12</p>
<p>2023-4-10</p>
<p>2023-3-28</p>
<p>2023-3-04</p>
<p>2023-2-17</p>
<p>2023-2-01</p>
</div>
</div>
<div class="col-md-4">
<h3>志愿活动</h3>
<div class="duanluo">
<a href="#"><img src="./图片/志愿活动 (3).jpg" style="width: 170px;height: 280px;" ></a>
<a href="#"><img src="./图片/志愿活动（1）.jpg" style="width: 205px;height: 280px;" ></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>鲑鱼计划</h3>
<a href=""><img style="height: 190px;" src="./图片/鲑鱼 (1).jpg" alt=""></a>
<a href=""><img style="height: 190px;" src="./图片/鲑鱼 (2).jpg" alt=""></a>
<a href=""><img style="height: 190px;" src="./图片/鲑鱼 (3).jpg" alt=""></a>
<a href=""><img style="height: 190px;" src="./图片/鲑鱼 (4).jpg" alt=""></a>
</div>
<div class="col-md-6">
<h3>三下乡</h3>
<a href=""><img style="height: 190px;" src="./图片/三下乡1.jpg" alt=""></a>
<a href=""><img style="height: 190px;" src="./图片/三下乡2.jpg" alt=""></a>
<a href=""><img style="height: 190px;" src="./图片/三下乡3.jpg" alt=""></a>
<a href=""><img style="height: 190px;" src="./图片/三下乡6.jpg" alt=""></a>
</div>
</div>
<div class="box" id="bilibili_item">
<div class=module-title>
<h2>校园风采</h2>
</div>
<div class="js j_index_carouseProduct" id="bilibili_main">
<ul>
<li> <a href="#"><img src="./图片/校园风采 (1).gif" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (2).gif" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (1).png" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (10).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (11).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (12).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (13).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (14).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (15).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (16).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (17).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (18).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (19).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (1).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (8).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (20).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (21).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (22).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (23).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (3).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (4).jpg" width="180" height="180" /></li>
<li> <a href="#"><img src="./图片/校园风采 (5).jpg" width="180" height="180" /></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>4.2表单CSS代码
:root {
/* 颜色 */
--white: #e9e9e9;
--gray: #333;
--blue: #095c91;
--blue-r: #315a7491;
--lightblue: #0393a3;
/* 圆角 */
--button-radius: 0.7rem;
/* 大小 */
--max-width: 758px;
--max-height: 420px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body {
align-items: center;
background-color: var(--white);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: grid;
height: 100vh;
place-items: center;
}
.form_title {
font-weight: 300;
margin: 0;
margin-bottom: 1.25rem;
}
.link {
color: var(--gray);
font-size: 0.9rem;
margin: 1.5rem 0;
text-decoration: none;
}
.container {
background-color: var(--white);
border-radius: var(--button-radius);
box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
height: var(--max-height);
max-width: var(--max-width);
overflow: hidden;
position: relative;
width: 100%;
}
.container_form {
height: 100%;
position: absolute;
top: 0;
transition: all 0.6s ease-in-out;
}
.container--signin {
left: 0;
width: 50%;
z-index: 5;
}
.container.right-panel-active .container--signin {
transform: translateX(100%);
}
.container--signup {
left: 0;
opacity: 0;
width: 50%;
z-index: 4;
}
.container.right-panel-active .container--signup {
-webkit-animation: show 0.6s;
animation: show 0.6s;
opacity: 1;
transform: translateX(100%);
z-index: 8;
}
.container_overlay {
height: 100%;
left: 50%;
overflow: hidden;
position: absolute;
top: 0;
transition: transform 0.6s ease-in-out;
width: 50%;
z-index: 100;
}
.container.right-panel-active .container_overlay {
transform: translateX(-100%);
}
.overlay {
background-color: rgba(255, 255, 255, 0.25);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
left: -100%;
position: relative;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
width: 200%;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay_panel {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
position: absolute;
text-align: center;
top: 0;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
width: 50%;
}
.overlay--left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay--left {
transform: translateX(0);
}
.overlay--right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay--right {
transform: translateX(20%);
}
.btn {
background-color: var(--blue);
background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
border-radius: 20px;
border: 0.2px solid var(--blue-r);
color: var(--white);
cursor: pointer;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: 0.1rem;
padding: 0.9rem 4rem;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
.form > .btn {
margin-top: 1.5rem;
}
.btn:active {
transform: scale(0.95);
}
.btn:focus {
outline: none;
}
.form {
background-color: var(--white);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 3rem;
height: 100%;
text-align: center;
}
.input {
background-color: #fff;
border: none;
padding: 0.9rem 0.9rem;
margin: 0.5rem 0;
width: 100%;
}
@-webkit-keyframes show {
0%,
49.99% {
opacity: 0;
z-index: 4;
}
50%,
100% {
opacity: 1;
z-index: 8;
}
}
@keyframes show {
0%,
49.99% {
opacity: 0;
z-index: 4;
}
50%,
100% {
opacity: 1;
z-index: 8;
}
}
.slidershow {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slidershow--image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 16s;
animation-duration: 16s;
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.slidershow--image:nth-child(1) {
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3;
}
.slidershow--image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.slidershow--image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.slidershow--image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}
@-webkit-keyframes kenburns-1 {
0% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
98.4375% {
opacity: 0;
-webkit-transform: scale(1.21176);
transform: scale(1.21176);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-1 {
0% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
98.4375% {
opacity: 0;
-webkit-transform: scale(1.21176);
transform: scale(1.21176);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes kenburns-2 {
23.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes kenburns-2 {
23.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-3 {
48.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes kenburns-3 {
48.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-4 {
73.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-4 {
73.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}4.3图片切换CSS代码
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{
margin:0;
padding:0;
border:0;
}
ul,ol,li{
list-style:none;
}
input,button{
margin:0;
font-size:12px;
vertical-align:middle;
}
body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0 auto;
}
table{border-collapse:collapse;
border-spacing:0;
}
p{
line-height:24px
}
button:focus{
outline: 0;
}
.hyh{
background: #fff;
border: 1px solid #e3e5e7;
border-radius: 6px;
margin-left: -26px;
}
.clearfloat{
height:0;
font-size:1px;
clear:both;
line-height:0;
}
#container{
width:1200px;
text-align:left;
margin:0 auto;
color:#9be3fc;
}
a{
color:#333;
text-decoration:none;
}
a:hover{
color:#00aeec;
}
.box{
width:1198px;
border:1px solid #dcdcdc;
padding-bottom:15px;
margin:0 auto;
margin-top:56px}
.module-title{
position: relative;
}
.module-title h3{
font-size:12px;
font-weight:normal;
color:#666666;
height:45px;
line-height:45px;
padding:0px 9px;
border-top:2px solid #999999;
margin-top:-1px;
margin-bottom:5px;
}
.module-title ul{
right:10px;
position:absolute;
top:10px;
}
.module-title li.next{
width:60px;
height:20px;
line-height:20px;
}
.module-title li a{
padding-right: 12px;
display:block;
overflow:hidden;
width:100%;
cursor:pointer;
color:#ffffff;
height:100%;
background:url(../images/more.png) no-repeat right center;
color:#999999;
}
#bilibili_item .module-title LI.next a{
height:20px;
width:60px;
}
#bilibili_main{
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
overflow: hidden;
width:1180px !important;
padding-top: 9px;
position: relative;
margin:0px auto;
}
#bilibili_main ul{
width:1180px;
}
#bilibili_main LI A.a1{
display: block;
margin: 0px auto;
width: 187px;
height: 178px;
text-align: center;
}
#bilibili_main LI A.sales-product-pic span{
display: inline-block;
vertical-align: middle;
width: 0px;
}
#bilibili_main LI SPAN.price_symbol{
font-size: 23px;
LINE-HEIGHT:20px}
#bilibili_main ul li{
width:180px;
float:left;
margin-right:20px;}
#bilibili_main ul li a{
display:block;
}
#bilibili_main ul li a span{
display:block;
height:30px;
line-height:30px;
font-size: 14px;
overflow:hidden;
color:#666666;
text-align:center;
font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
}
#bilibili_main ul li a span:hover{
color:#00aeec;
text-decoration:underline;}
#bilibili_main ul li em{
font-size:12px;
color:#9499a0;
font-weight:bold;
font-style:normal;
height:18px;
line-height:18px;
overflow:hidden;
text-align:center;
display:block;
}4.4JS代码
const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const firstForm = document.getElementById("form1");
const secondForm = document.getElementById("form2");
const container = document.querySelector(".container");
signInBtn.addEventListener("click", () => {
container.classList.remove("right-panel-active");
});
signUpBtn.addEventListener("click", () => {
container.classList.add("right-panel-active");
});
firstForm.addEventListener("submit", (e) => e.preventDefault());
secondForm.addEventListener("submit", (e) => e.preventDefault());三、个人总结
在完成大作业过程中，我慢慢的熟悉bootstrap框架，也能够熟练地应用框架，对本学期所学的知识有了更深入的了解，同时也获得了网页制作的经验。这次在制作过程中也有许多没有涉及到的内容，也更加清晰地认识到自己在学习上的不足之处。当然在编写过程中也有遇到页面效果达不到预期效果，需要不断地调试寻找最合适的时候。最后，这次网页制作收获还是很多，无论是在实践方面还是知识层面都有了很大的进步。
标签：opacity,Web,scale,1.2,--,前端,作业,transform,webkit From： https://blog.csdn.net/qq_62854679/article/details/137057666