<!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>Document</title>
<style type="text/css">
/* 导航栏 */
#img0{
height: 100px;
width: 400px;
margin-left: 200px;
}
#navwrap{
background: url("images/head_01.jpg") repeat;
}
.nav1{
margin-top: 60px;
padding: 0px;
position: relative;
z-index: 2;
}
.nav1 li {
height: 30px;
width: 80px;
list-style: none;
float: left;
margin-left: 180px;
display: inline;
font: 18px Arial,Helvetica;
}
.nav2{
margin-left: -185px;
}
.nav1 li a{
color: rgb(183, 206, 129);
width: 100px;
margin: 0px;
padding: 0px 0px 0px 8px;
text-decoration: none;
display: block;
}
.nav1 li a:hover{
background: rgb(184, 128, 60);
border-bottom: 1px dashed,darkorange;
}
.nav1 li ul{
visibility: hidden;
}
.nav1 li:hover ul{
visibility: visible;
}
.nav1 li ul li a:hover{background: rgb(194, 47, 47);}
.header-top-right a{
text-decoration: none;
color: chocolate;
}
.right{
position:absolute;
top: 30px;
right:200px;
bottom: 20px;
}
.submit{
background: url(images/submit.jpg);
background-image: url(images/submit.jpg);
height: 28px;
width: 40px;
cursor: pointer;
border: none;
float: right;
}
.search{
position: absolute;
right: 200px;
top: 8%;
}
input{
outline: none;
font-family: Arial, NeeaSimsun-Regular;
}
input p {
padding: 0;
margin: 0;
}
/* 轮播图左下方横向排列图片 */
#imgbox1{
margin-left: 150px;
}
#imgbox1 img{
width: 150px;
height: 150px;
text-align: center;
margin-left: 10px;
margin-top: 10px;
}
#imgbox1 ul{
padding: 20px 0 10px;
max-width: 0;
background: #767272;
list-style: none;
}
#imgbox1 ul li{
margin: 5px 10px;
display: flex;
justify-content: flex-start;
}
#imgbox1 p{
font-size: 14px;
}
/* 轮播图右下方排列图 */
#imgbox2{
margin-left: 850px;
margin-top: -210px;
}
#imgbox2 img{
width: 50px;
height: 60px;
}
#imgbox2 ul li{
margin: 5px 10px;
display: flex;
justify-content: flex-start;
}
#imgbox2 ul li div{
margin: 5px 0px 10px 30px;
}
#imgbox2 p{
font-size: 14px;
}
/* 两列文字 */
#cent{
text-align: center;
}
.new{
margin-left: -950px;
margin-top: 0px;
border: 10px;
}
.active{
margin-top: -25px;
margin-right: -400px;
}
.table1{
margin-left:150px;
text-align: left;
}
.table1 ul li{
border: 1px solid black;
border-radius:5% ;
width: 500px;
background:url("images/a_bg8.jpg");
}
.table1 ul li a {
font: 15px;
color:rgb(65, 70, 148);
}
.table2 ul li a{
font: 15px;
color: rgb(65, 70, 148);
}
#cent h3{
background-color: brown;
text-align: center;
}
.table2{
text-align: left;
margin-left: 830px;
margin-top: -150px;
}
.table2 ul li{
border: 1px solid black;
border-radius:5% ;
width: 500px;
background:url("images/a_bg8.jpg");
}
#cent ul li a{
text-decoration: none;
}
/* 轮播图 */
*{
margin: 0;
padding: 0;
}
p{
text-align: center;
font-size: 25px;
}
.imgBox{
width: 1450px;
height: 600px;
margin: 0 auto;
/* position: relative; */
text-align: center;
z-index: 1;
}
.ul1{
list-style-type: none;
}
img{
width: 1450px;
height: 600px;
margin: 0 auto;
}
.img1{
display: block;
}
.img2,.img3,.img4,.img5{
display: none;
}
#prev{
width: 95px;
height: 95px;
/* background: url(images/arrows.png)no-repeat 0px -80px; */
position: absolute;
left: 0px;
opacity: 0.2;
}
#next{
width: 95px;
height: 95px;
/* background:url(images/arrows.png) no-repeat -164px -80px; */
position: absolute;
top: 115px;
right: 0px;
opacity: 0.2;
}
#pre:hover,#next:hover{
opacity:0.7;
}
.ul2{
position: absolute;
bottom: 20px;
left: 500px;
text-align: center;
list-style-type: none;
}
.ul2 li{
margin-left: 65px;
float: left;
}
.ul2 li div{
width: 20px;
height: 20px;
background-color: #DDDDDD;
border-radius: 10px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
footer{
text-align: center;
margin-top: 20px;
}
footer a{
text-decoration: none;
color: black;
}
footer span{
font-style: italic;
}
</style>
</head>
<body>
<!-- 右上角上 -->
<img id="img0" src="images/logo.jpg" alt="">
<div class="header-top-right">
<span class="right">
<a href="" target="_blank">中文版</a> |
<a href="" target="_blank">英文版</a> | <a href="" target="_blank">信息公开</a>
</span>
</div>
<!-- 一级二级导航栏 -->
<div id="navwrap">
<ul class="nav1">
<li><a href="#">学院概况</a>
<ul class="nav2">
<li><a href="">学校章程</a></li>
<li><a href="">学校领导</a></li>
<li><a href="">师校园文化</a></li>
</ul>
</li>
<li><a href="#">党群工作</a></li>
<li><a href="#">人才培养</a></li>
<li><a href="#">师资队伍</a></li>
<li><a href="#">学生工作</a></li>
</ul> <hr color="red" style="width:100%;"></div>
<!-- 右上角下 -->
<div class="search">
<form action="" name="searchform1">
<input type="submit" value="" class="submit">
<input type="text" name="q" onblur="if(value=='')value=='请输入关键字'"onmouseover="this.focus()"
onfocus="if(value=='请输入关键字')value='';this.select();" value="请输入关键字" class="text" style="color:#666">
</form>
</div>
<!-- 轮播图 -->
<div class="imgBox">
<div id="prev"></div>
<div id="next"></div>
<ul class="ul1">
<li><img class="img-slide img1" src="images/web-1.jpg" alt=""></li>
<li><img class="img-slide img2" src="images/web-2.jpg" alt=""></li>
Web登陆页面和三行两列轮播图
需积分: 0 27 浏览量
2023-12-21
00:40:02
上传
评论
收藏 19.99MB ZIP 举报
Web登陆页面和三行两列轮播图 （103个子文件） 
MySql2.gif 1.66MB
index.html 16KB zhc.html 5KB dl.html 3KB
Web3.jpg 822KB web-5.jpg 729KB web-2.jpg 656KB Web4.jpg 540KB head_15.jpg 465KB web-3.jpg 439KB web-4.jpg 433KB 数据结构3.jpg 314KB web-1.jpg 296KB head_20.jpg 290KB head_22.jpg 284KB head_13.jpg 272KB head_23.jpg 256KB head_12.jpg 254KB head_03.jpg 252KB head_27.jpg 242KB head_18.jpg 233KB head_06.jpg 232KB head_26.jpg 217KB head_21.jpg 212KB head_25.jpg 209KB head_17.jpg 206KB head_02.jpg 199KB head_04.jpg 191KB head_09.jpg 187KB head_11.jpg 175KB head_01.jpg 157KB 数据结构.jpg 144KB Web2.jpg 137KB head_10.jpg 133KB head_28.jpg 133KB MySql1.jpg 124KB 星空.jpg 118KB head_05.jpg 115KB 数据结构1.jpg 108KB jdgz-3.jpg 95KB 数据库Sql Server.jpg 78KB Web1.jpg 78KB head_19.jpg 76KB jdgz-2.jpg 73KB 软件工程导论.jpg 70KB FJ4.jpg 56KB head_16.jpg 50KB jdgz-1.jpg 48KB head_24.jpg 44KB head_30.jpg 40KB head_14.jpg 39KB Web前端开发技术.jpg 33KB head_29.jpg 32KB MySql.jpg 28KB FJ2-tushuguan.jpg 27KB FJ3-ximenfengguang.jpg 25KB FJ5.jpg 25KB java面向编程.jpg 24KB FJ1-yueyahu.jpg 20KB web5.jpg 11KB logo.jpg 9KB icon_05.jpg 2KB icon_03.jpg 2KB sea_bg.jpg 2KB icon_02.jpg 2KB icon_07.jpg 2KB icon_06.jpg 2KB icon_08.jpg 2KB icon_01.jpg 2KB icon_04.jpg 2KB all_img.jpg 1KB icon_10.jpg 1KB d_bg3.jpg 1KB d_bg1.jpg 1KB icon_09.jpg 1KB d_bg4.jpg 1KB d_bg2.jpg 1KB a_bg5.jpg 1KB a_bg7.jpg 1KB a_bg8.jpg 1KB a_bg6.jpg 1KB right.jpg 1KB left_bg.jpg 1KB left.jpg 1KB li_hbg.jpg 1KB nav_lihbg.jpg 1KB nav_lihbg2.jpg 1KB nav_libg.jpg 1KB li_bg.jpg 1KB li_bg2.jpg 1KB li_hbg2.jpg 1KB submit.jpg 631B submit.jpg 631B
软工.png 7.47MB v2-16cf90d6450a55b22f78a774d5f9aa2a_1440w.png 280KB 软件工程1.png 175KB 软件工程导论2.png 139KB 软件工程2.png 123KB Java创始人.png 54KB blue.png 2KB共 103 条
- 1
- 2
资源评论
