1.主页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站首页</title>
<link rel="stylesheet" href="./css/indext.css">
<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav w">
<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
<ul>
<li class="navd"><a href="./indext.html">网站首页</a></li>
<li class="navc"><a href="./techang.html">我的特长</a></li>
<li class="nave"><a href="./zuop.html">我的作品</a></li>
<li class="navf"><a href="./jineng.html">我的技能</a></li>
<li class="navg"><a href="./jiaol.html">留言交流</a></li>
</ul>
</div>
<div class="lunbot w">
<div class="lbt">
<img src="./img/1.jpg" alt="轮播图" id="img_u">
<div class="img_y"></div>
<button class="b1" id="bb"><</button>
<button class="b2" id="ba">></button>
</div>
</div>
<div class="js w">
<div class="gyw">
<div class="gywt">关于我</div>
<div class="touxiang">
<img src="./img/tx.jpg" alt="">
</div>
<div class="xx">
<span class="jc">姓名:</span><span>木木</span><br>
<span class="jc">电话:</span><span>180****825</span><br>
<span class="jc">邮箱:</span><span>190@qq.com</span><br>
<span class="jc">爱好:</span><span>音乐</span><span>音乐</span><span>音乐</span>
</div>
</div>
<div class="wdjn">
<div class="tou">个人介绍</div>
<div class="jies">
<div class="xg"><h2>姓名:木木</h2></div>
<div class="dr"><h2>性别:♂</h2></div>
<div class="wr"><h2>年龄:16</h2></div>
<div class="rz"><h2>电话:188****5390</h2></div>
<div class="ck"><h2>QQ:180****825</h2></div>
<div class="jz"><h2>爱好:乒乓球,台球</h2></div>
<div class="ynx"><h2>专业:计算机</h2></div>
<div class="qhl"><h2>早熟</h2></div>
</div>
<div class="jiesr">
<div class="xg"><h2>性格热情开朗</h2></div>
<div class="dr"><h2>待人友好</h2></div>
<div class="wr"><h2>为人诚实谦虚</h2></div>
<div class="rz"><h2>认真负责</h2></div>
<div class="ck"><h2>能吃苦耐劳</h2></div>
<div class="jz"><h2>尽职尽责</h2></div>
<div class="ynx"><h2>有耐心</h2></div>
<div class="qhl"><h2>具有亲和力</h2></div>
</div>
</div>
</div>
<div class="wb w">
<span>版权所有:个人网页</span>
</div>
<script src="./js/new_file.js"></script>
</body>
</html>
主页css样式
/* 首页 */
.jies{
float: left;
top: 0;
left: 0;
width: 300px;
height: 385px;
/* background-color: aquamarine; */
}
.jies .xg{
float: left;
height: 40px;
width: 200px;
background-color: aqua;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jies .xg:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jies .dr{
float: right;
height: 40px;
width: 200px;
background-color: red;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jies .dr:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jies .wr{
float: left;
height: 40px;
width: 200px;
background-color: gold;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jies .wr:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jies .rz{
float: right;
height: 40px;
width: 200px;
background-color: greenyellow;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jies .rz:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jies .ck{
float: left;
height: 40px;
width: 200px;
background-color: violet;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jies .ck:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jies .jz{
float: right;
height: 40px;
width: 200px;
background-color: darkcyan;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jies .jz:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jies .ynx{
float: left;
height: 40px;
width: 200px;
background-color: burlywood;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jies .ynx:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jies .qhl{
float: right;
height: 40px;
width: 200px;
background-color: lightpink;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jies .qhl:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jiesr{
float: right;
width: 300px;
height: 385px;
/* background-color: aquamarine; */
}
.jiesr .xg{
float: left;
height: 40px;
width: 200px;
background-color: aqua;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jiesr .xg:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jiesr .dr{
float: right;
height: 40px;
width: 200px;
background-color: red;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jiesr .dr:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jiesr .wr{
float: left;
height: 40px;
width: 200px;
background-color: gold;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jiesr .wr:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jiesr .rz{
float: right;
height: 40px;
width: 200px;
background-color: greenyellow;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jiesr .rz:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jiesr .ck{
float: left;
height: 40px;
width: 200px;
background-color: violet;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jiesr .ck:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jiesr .jz{
float: right;
height: 40px;
width: 200px;
background-color: darkcyan;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jiesr .jz:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jiesr .ynx{
float: left;
height: 40px;
width: 200px;
background-color: burlywood;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jiesr .ynx:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.jiesr .qhl{
float: right;
height: 40px;
width: 200px;
background-color: lightpink;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s;
margin: 10px 0 0 0;
border-radius: 10px;
}
.jiesr .qhl:hover{
width: 100%;
box-shadow: 2px 2px 9px 2px #333;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.navd{
background-color: #000;
opacity: 0.4;
transform: scale(0.8);
box-shadow: 1px 1px 9px 7px #fff;
}
2.我的特长
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的特长</title>
<link rel="stylesheet" href="./css/indext.css">
<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
<link rel="stylesheet" href="./css/techang.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav w">
<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
<ul>
<li class="navd"><a href="./indext.html">网站首页</a></li>
<li class="navc"><a href="./techang.html">我的特长</a></li>
<li class="nave"><a href="./zuop.html">我的作品</a></li>
<li class="navf"><a href="./jineng.html">我的技能</a></li>
<li class="navg"><a href="./jiaol.html">留言交流</a></li>
</ul>
</div>
<div class="lunbot w">
<div class="lbt">
<img src="./img/1.jpg" alt="轮播图" id="img_u">
<div class="img_y"></div>
<button class="b1" id="bb"><</button>
<button class="b2" id="ba">></button>
</div>
</div>
<div class="js w">
<div class="gyw">
<div class="gywt">关于我</div>
<div class="touxiang">
<img src="./img/tx.jpg" alt="">
</div>
<div class="xx">
<span class="jc">姓名:</span><span>木木</span><br>
<span class="jc">电话:</span><span>180****825</span><br>
<span class="jc">邮箱:</span><span>190@qq.com</span><br>
<span class="jc">爱好:</span><span>音乐</span><span>音乐</span><span>音乐</span>
</div>
</div>
<div class="wdjn">
<div class="tou">我的特长</div>
<div class="ppt">
<img src="./img/tq.jpg" alt="">
<div class="yy">
<h3>台球</h3>
</div>
</div>
<div class="tpp">
<img src="./img/ppq.jpeg" alt="">
<div class="yy">
<h3>乒乓球</h3>
</div>
</div>
</div>
</div>
<div class="wb w">
<span>版权所有:个人网页</span>
</div>
<script src="./js/new_file.js"></script>
</body>
</html>
特长css样式
.wdjn{
position: relative;
}
.ppt{
position: absolute;
top: 45px;
left: 0;
width: 100%;
height: 200px;
overflow: hidden;
}
.ppt img{
width: 100%;
height: 200px;
}
.yy{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
opacity: 0;
transition: all 0.5s;
}
.yy:hover{
opacity: 1;
}
.tpp{
position: absolute;
top: 255px;
left: 0;
width: 100%;
height: 200px;
overflow: hidden;
}
.tpp img{
width: 100%;
height: 200px;
}
.yy h3{
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
}
.navc{
background-color: #000;
opacity: 0.4;
transform: scale(0.8);
box-shadow: 1px 1px 9px 7px #fff;
}
3.我的作品
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的作品</title>
<link rel="stylesheet" href="./css/indext.css">
<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
<link rel="stylesheet" href="./css/zuop.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav w">
<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
<ul>
<li class="navd"><a href="./indext.html">网站首页</a></li>
<li class="navc"><a href="./techang.html">我的特长</a></li>
<li class="nave"><a href="./zuop.html">我的作品</a></li>
<li class="navf"><a href="./jineng.html">我的技能</a></li>
<li class="navg"><a href="./jiaol.html">留言交流</a></li>
</ul>
</div>
<div class="lunbot w">
<div class="lbt">
<img src="./img/1.jpg" alt="轮播图" id="img_u">
<div class="img_y"></div>
<button class="b1" id="bb"><</button>
<button class="b2" id="ba">></button>
</div>
</div>
<div class="js w">
<div class="gyw">
<div class="gywt">关于我</div>
<div class="touxiang">
<img src="./img/tx.jpg" alt="">
</div>
<div class="xx">
<span class="jc">姓名:</span><span>木木</span><br>
<span class="jc">电话:</span><span>180****825</span><br>
<span class="jc">邮箱:</span><span>190@qq.com</span><br>
<span class="jc">爱好:</span><span>音乐</span><span>音乐</span><span>音乐</span>
</div>
</div>
<div class="wdjn">
<div class="tou">我的作品</div>
<div class="imgs">
<a href="./img/01-电商-主页-gai.jpg"><img src="./img/01-电商-主页-gai.jpg" alt=""></a>
</div>
<div class="imgsr">
<a href="./img/律师事务所案例页768.jpg"><img src="./img/律师事务所案例页768.jpg" alt=""></a>
</div>
</div>
</div>
<div class="wb w">
<span>版权所有:个人网页</span>
</div>
<script src="./js/new_file.js"></script>
</body>
</html>
作品css样式
.imgs{
width: 300px;
height: 100%;
padding-top: 10px;
float: left;
}
.imgs img{
width: 100%;
height: 100%;
}
.imgsr{
padding-top: 10px;
width: 300px;
height: 100%;
float: right;
}
.imgsr img{
width: 100%;
height: 100%;
}
.wdjn img:hover{
box-shadow: -2px 2px 2px 2px #000;
}
.nave{
background-color: #000;
opacity: 0.4;
transform: scale(0.8);
box-shadow: 1px 1px 9px 7px #fff;
}
4.我的技能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的技能</title>
<link rel="stylesheet" href="./css/indext.css">
<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
<link rel="stylesheet" href="./css/jineng.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav w">
<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
<ul>
<li class="navd"><a href="./indext.html">网站首页</a></li>
<li class="navc"><a href="./techang.html">我的特长</a></li>
<li class="nave"><a href="./zuop.html">我的作品</a></li>
<li class="navf"><a href="./jineng.html">我的技能</a></li>
<li class="navg"><a href="./jiaol.html">留言交流</a></li>
</ul>
</div>
<div class="lunbot w">
<div class="lbt">
<img src="./img/1.jpg" alt="轮播图" id="img_u">
<div class="img_y"></div>
<button class="b1" id="bb"><</button>
<button class="b2" id="ba">></button>
</div>
</div>
<div class="js w">
<div class="gyw">
<div class="gywt">关于我</div>
<div class="touxiang">
<img src="./img/tx.jpg" alt="">
</div>
<div class="xx">
<span class="jc">姓名:</span><span>木木</span><br>
<span class="jc">电话:</span><span>180****825</span><br>
<span class="jc">邮箱:</span><span>190@qq.com</span><br>
<span class="jc">爱好:</span><span>音乐</span><span>音乐</span><span>音乐</span>
</div>
</div>
<div class="wdjn">
<div class="tou">我的技能</div>
<div class="html5">HTML5</div>
<div class="css3">CSS3</div>
<div class="python">python</div>
<div class="jss">JavaScript</div>
</div>
</div>
<div class="wb w">
<span>版权所有:个人网页</span>
</div>
<script src="./js/new_file.js"></script>
</body>
</html>
技能css样式
.wdjn{
position: relative;
}
.wdjn .html5{
position: absolute;
top: 40px;
left: 30px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50px;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #fff;
transition: all 0.5s;
background-color: deepskyblue;
}
.wdjn .css3{
position: absolute;
top: 40px;
right: 90px;
width: 160px;
height: 160px;
line-height: 160px;
border-radius: 80px;
text-align: center;
background-color: pink;
font-weight: bold;
font-size: 20px;
color: #fff;
transition: all 0.5s;
}
.wdjn .python{
position: absolute;
top: 300px;
right:70px;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 60px;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #fff;
background-color: teal;
transition: all 0.5s;
}
.wdjn .jss{
position: absolute;
top: 180px;
left: 30px;
width: 200px;
height: 200px;
line-height: 170px;
border-radius: 100px;
text-align: center;
background-color: orange;
color: #fff;
font-weight: bold;
font-size: 20px;
transition: all 0.5s;
}
.jss:hover{
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.html5:hover{
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.css3:hover{
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.python:hover{
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
}
.navf{
background-color: #000;
opacity: 0.4;
transform: scale(0.8);
box-shadow: 1px 1px 9px 7px #fff;
}
5.留言交流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言交流</title>
<link rel="stylesheet" href="./css/indext.css">
<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
<link rel="stylesheet" href="./css/jiao.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav w">
<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
<ul>
<li class="navd"><a href="./indext.html">网站首页</a></li>
<li class="navc"><a href="./techang.html">我的特长</a></li>
<li class="nave"><a href="./zuop.html">我的作品</a></li>
<li class="navf"><a href="./jineng.html">我的技能</a></li>
<li class="navg"><a href="./jiaol.html">留言交流</a></li>
</ul>
</div>
<div class="lunbot w">
<div class="lbt">
<img src="./img/1.jpg" alt="轮播图" id="img_u">
<div class="img_y"></div>
<button class="b1" id="bb"><</button>
<button class="b2" id="ba">></button>
</div>
</div>
<div class="js w">
<div class="gyw">
<div class="gywt">关于我</div>
<div class="touxiang">
<img src="./img/tx.jpg" alt="">
</div>
<div class="xx">
<span class="jc">姓名:</span><span>木木</span><br>
<span class="jc">电话:</span><span>180****825</span><br>
<span class="jc">邮箱:</span><span>190@qq.com</span><br>
<span class="jc">爱好:</span><span>音乐</span><span>音乐</span><span>音乐</span>
</div>
</div>
<div class="wdjn">
<div class="tou">留言交流</div>
<form action="">
<span>姓名:</span><input type="text" placeholder="请输入姓名"><br>
<span>手机:</span><input type="text" placeholder="请输入手机号码"><br>
<span>性别:</span><input type="radio" name="xb" id=""><span>男♂</span><input type="radio" name="xb" id=""><span>女♀</span><br>
<span>爱好:</span><input type="checkbox" name="ah"><span>音乐</span><input type="checkbox" name="ah"><span>电影</span><input type="checkbox" name="ah"><span>写作</span><input type="checkbox" name="ah"><span>运动</span><br>
<span>留言:</span><textarea name="" id="" cols="30" rows="10"></textarea><br>
<input type="submit">
</form>
</div>
</div>
<div class="wb w">
<span>版权所有:个人网页</span>
</div>
<script src="./js/new_file.js"></script>
</body>
</html>
留言交流css样式
form span{
/* float: left; */
vertical-align: middle;
display: inline-block;
/* width: 90px; */
height: 30px;
line-height: 30px;
/* text-align: center; */
font-size: 20px;
margin: 20px 10px 0 0;
font-weight: bold;
}
form{
margin: 30px auto 0;
width: 500px;
height: 400px;
}
form input{
margin: 20px 10px 0 0;
/* float: left; */
vertical-align: middle;
outline: none;
border: 2px solid #74e0f3;
}
form input:hover{
box-shadow: 2px 2px 2px 2px #999;
}
form textarea{
vertical-align: middle;
outline: none;
border: 2px solid #74e0f3;
}
form textarea:hover{
box-shadow: 2px 2px 2px 2px #999;
}
form input[type='text']{
padding-left: 20px;
height: 30px;
width: 200px;
outline: none;
border: 2px solid #74e0f3;
}
form input[type='text']:hover{
box-shadow: 2px 2px 2px 2px #999;
}
form input[type='radio']{
width: 15px;
height: 15px;
}
form input[type='radio']{
border: 2px solid #74e0f3;
}
form input[type='submit']{
margin: 20px 0 0 130px;
width: 100px;
height: 30px;
background-color: #74e0f3;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.navg{
background-color: #000;
opacity: 0.4;
transform: scale(0.8);
box-shadow: 1px 1px 9px 7px #fff;
}
公共css样式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: url("../img/R-C.jpg");
}
.w {
width: 1000px;
margin: 0 auto;
background-color: #fff;
}
/* 导航栏 */
.loog{
width: 250px;
height: 70px;
float: left;
/* background-color: red; */
}
.loog h1{
display: block;
font-size: 0;
width: 250px;
height: 70px;
background: url("../img/lo.jpg");
background-size: 250px 70px;
transition: all .5s;
border-radius: 35px;
}
.loog h1:hover{
transform: scale(0.8);
box-shadow: 1px 1px 9px 2px #333;
}
.nav{
height: 70px;
overflow: hidden;
background-color: #74e0f3;
}
.nav ul{
width: 700px;
float: right;
}
.nav li{
float: left;
list-style: none;
line-height: 70px;
}
.nav li a{
padding: 0 25px 0 25px;
display: block;
text-align: center;
height: 70px;
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: 100;
transition: all .5s;
}
.nav li a:hover{
background-color: #000;
opacity: 0.4;
transform: scale(0.8);
box-shadow: 1px 1px 9px 7px #fff;
}
.lunbot{
height: 420px;
padding-top:20px;
}
.lunbot .lbt{
position: relative;
width: 960px;
margin: 0 auto;
}
.lunbot .lbt img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 400px;
}
.lunbot .lbt .img_y{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 400px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
opacity: 0;
transition: all 0.5s;
}
.lunbot .lbt .img_y:hover {
opacity: 1;
}
.lunbot .b1{
position: absolute;
top: 155px;
left: 0;
width: 40px;
height: 90px;
border: none;
opacity: 0.4;
display: none;
cursor: pointer;
transition: all 0.5s;
border-radius: 0 45px 45px 0;
}
.lunbot .lbt:hover button{
display: block;
}
.lunbot .b2{
position: absolute;
top: 155px;
right: 0;
width: 40px;
cursor: pointer;
height: 90px;
transition: all 0.5s;
border: none;
display: none;
opacity: 0.4;
border-radius: 45px 0 0 45px;
}
/* 介绍栏 */
.js{
padding: 20px;
height: 500px;
}
.gyw{
float: left;
width: 300px;
height: 420px;
/* background-color: red; */
}
.gyw .gywt{
width: 100%;
height: 35px;
background-color: #74e0f3;
padding-left: 20px;
line-height: 35px;
font-size: 20px;
color: #fff;
}
.gyw .touxiang{
margin: 20px auto 0;
width: 200px;
height: 200px;
border-radius: 100px;
}
.gyw .touxiang img{
display: block;
width: 200px;
height: 200px;
border-radius: 100px;
border: 2px solid #74e0f3;
}
.xx{
width: 100%;
margin: 30px auto 0;
}
.xx span{
display: inline-block;
margin: 10px 0 10px 0;
}
.jc{
font-weight: bold;
}
.wdjn{
float: right;
width: 620px;
height: 420px;
/* background-color: antiquewhite; */
}
.wdjn .tou{
width: 100%;
height: 35px;
background-color: #74e0f3;
font-size: 20px;
color: #fff;
line-height: 35px;
padding-left: 20px;
}
.wb{
text-align: center;
line-height: 70px;
height: 70px;
background-color: #74e0f3;
}
.wb span{
color: #fff;
}
js轮播图
var text=1;
var img=document.querySelector('#img_u');
var b1=document.querySelector('#bb');
var b2=document.querySelector('#ba');
b1.onclick = function(){
text--;
if(text<1){
text=5;
}
img.src="./img/"+text+".jpg";
}
b2.onclick=function(){
text++;
// console.log("点");
if(text>5){
text=1;
}
img.src="./img/"+text+".jpg";
}
function lunbo(){
text++;
if(text>5){
text=1;
}
var img=document.querySelector('#img_u');
img.src="./img/"+text+".jpg";
}
setInterval(lunbo,4000);