一、课程设计要求
- 精品课程网站设计网页界面
- 访问拓扑图中的web服务器，显示界面
二、网页源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk2312">
<title></title>
<style>
/*诗句展示模块*/
#poem{
opacity:0.75;
position:fixed;
top:40%;
left:7%;
width: 500px;
height: 300px;
margin: 0 auto;
text-align: center;
color: blue;
font-size: 30px;
}
p{
font-size:30px;
color:yellow;
top:1%;
left:2%;
position:fixed;
}
b{
border-radius: 80%;
background: #8AC007;
padding: 20px;
width: 300px;
height: 45px;
opacity:0.55;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
font-size: 30px;
color:white;
top:2%;
right:5%;
position:fixed;
}
.marquee {
opacity:0.65;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 25s linear 50ms infinite normal;
/*字母外框*/
border-radius: 25px;
background: #8AC007;
padding: 2px;
width: 800px;
height: 50px;
}
.marquee:hover {
animation-play-state: paused
}
/* Make it move */
@keyframes marquee {
0% {
text-indent: 27.5em }
100% {
text-indent: -105em }
}
/* Make it pretty */
.View {
padding-left: 1.5em;
}
.View:before, .View::before {
z-index: 2;
content: '';
position: absolute;
top: -1em; left: -1em;
width: .5em; height: .5em;
}
.View:after, .View::after {
z-index: 1;
content: '';
position: absolute;
top: 0; left: 0;
width: 2em; height: 2em;
}
/*背景图自动轮播模块*/
*{
margin: 0;
padding: 0
}
.div{
width: 1530px;
height:780px;
background-repeat: no-repeat;
background-image: url("JDSJ070.jpg");
animation:frams 12s infinite;
}
@keyframes frams {
0%{
background-image: url("1 (1).jpg");background-size: 1530px 780px;background-repeat: no-repeat
}
33%{
background-image: url("1 (2).jpg");background-size: 1530px 780px;background-repeat: no-repeat
}
66%{
background-image: url("1 (3).jpg");background-size: 1530px 780px;background-repeat: no-repeat
}
100%{
background-image: url("1 (4).jpg");background-size: 1530px 780px;background-repeat: no-repeat
}
}
/*下拉菜单模块*/
#a1{width: 34%;height: 700px;background: #453;float:left;margin-right:5px;}
#a2{width: 35%;height: 700px;background: purple;float:left;}
nav{
position:absolute;left:150px;top:85px;}
ul{
list-style:none;}
ul li{
float:left;}
ul li a{
opacity:0.55;
text-decoration:none;
background: #0f9;
height:40px;
line-height: 40px;
display:block;
margin-right:1px;
padding:0px 10px;
}
/*控制二级菜单*/
ul li a:hover{
background:magenta;}
ul li ul li{
margin-left:1px;clear:left;position:relative;width:100px;}
ul li ul{
display:none;}
ul li:hover ul{
display: block;}
/*控制三级菜单*/
ul li ul li a:hover{
background:pink;}
ul li ul li ul{
position:absolute;left:100%;top:0px;}
ul li ul li ul li{
clear:left;width:110px;}
ul li:hover ul li ul{
display:none;}
ul li ul li:hover ul{
display:block;}
/*用户信息录入*/
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 400px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/*控制登录块结构*/
#div1 {
opacity:0.55;
position:fixed;
top:35%;
left:55%;
width:400px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<div class="div"></div>
<body>
<header class="header-sky">
<!-- 下拉菜单具体内容 -->
<nav>
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">VIP办理</a>
<ul>
<li><a href="" >续租VIP</a></li>
<li><a href="" >暂停VIP</a></li>
<li><a href="" >充值VIP</a>
<ul>
<li><a href="" >充50送10块</a></li>
<li><a href="" >充100送25</a></li>
<li><a href="" >充240送80</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">IT行业累</a>
<ul>
<li><a href="" >直播好课</a></li>
<li><a href="" >免费课</a></li>
<li><a href="" >VIP训练营</a></li>
</ul>
</li>
<li><a href="#">开发设计类</a>
<ul>
<li><a href="">直播好课</a></li>
<li><a href="">公开体验课</a>
<ul>
<li><a href="" >电商美工</a></li>
<li><a href="" >综合平面设计</a></li>
</ul>
</li>
<li><a href="">精选付费课</a>
<ul>
<li><a href="" >摄影后期</a></li>
<li><a href="" >电商美工</a></li>
<li><a href="" >综合平面设计</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">电商学习类</a>
<ul>
<li><a href="" >电商平台</a></li>
<li><a href="" >跨境电商</a></li>
<li><a href="" >社交电商</a></li>
<li><a href="" >其他</a></li>
</ul>
</li>
<li><a href="#">职业跨考类</a>
<ul>
<li><a href="" >公考求职</a></li>
<li><a href="" >法学院</a></li>
<li><a href="" >其他</a></li>
</ul>
</li>
<li><a href="#">努力升学累</a>
<ul>
<li><a href="" >考研</a></li>
<li><a href="" >大学</a></li>
<li><a href="" >高中</a></li>
<li><a href="" >初中</a></li>
<li><a href="" >小学</a></li>
<li><a href="" >幼儿园</a></li>
<li><a href="" >胎教</a></li>
<li><a href="" >胎前教</a></li>
</ul>
</li>
<li><a href="#">语言学习累</a>
<ul>
<li><a href="">实用英语</a></li>
<li><a href="">出国留学</a></li>
<li><a href="">英语四六级</a></li>
<li><a href="">日语</a></li>
<li><a href="">其他</a></li>
</ul>
</li>
<b>祝您学习愉快，哈哈!</b>
<div></div>
<p class="View marquee"> 本站成立开发于2020年12月26日，豆豆累死了才搞的差不多，开张前一周，所有VIP免费，祝您有不错的学习体验，支持正版，本站全为正版课程！ </p>
<!--诗句展示模块-->
<div id="poem">
一研为定<br/><br/>
人生起落以意志勇怯而定。——安奈斯·妮恩<br/>
莫等闲，白了少年头，空悲切。——岳飞<br/>
非淡泊无以明志，非宁静无以致远。——诸葛亮<br/>
搏一搏，单车变骆驼。——豆豆<br/>
</div>
<!--用户登录模块-->
<div id="div1">
<form action="#">
<label for="fname">账号</label>
<input type="text" id="fname" name="账号" placeholder="请在这里输入邮箱或手机号">
<label for="lname">账户密码</label>
<input type="text" id="lname" name="账户密码" placeholder="请在这里输入密码">
<label for="country">游客登陆</label>
<select id="country" name="游客登陆">
<option value="australia">游客1</option>
<option value="canada">游客2</option>
<option value="usa">游客3</option>
<option value="vv">更多</option>
</select>
<input type="submit" value="注册 \ 登录">
</body>
</html>
源码加图片下载链接：
链接: link.