CTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base</title>
<link rel="stylesheet" href="../static/css/base.css" type="text/css">
<script src="../static/JS/base.js"></script>
</head>
<body>黑怕不怕黑
<div class="box">
<h2></h2>
</head>
<body id="myBody">
<nav>
<div class="layui-col-md4">
<div class="layui-row" style="padding-top:10px;">
<img id="myOnOff" onclick="myswitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"
style="padding-left: 10px;">
<a href="http://localhost:63342/denglu1.1/templates/shouye.html?_ijt=qijfc55i74avkg8umf7nn7oqt7">首页</a>
<a href="http://localhost:63342/denglu1.1/templates/denglu1.1.html?_ijt=7qkhljvviqhhrvp78f6nv1jtqn">登陆</a>
<a href="http://localhost:63342/denglu1.1/templates/%E6%B3%A8%E5%86%8C.html?_ijt=bpr6ikepnp2sh7actb82n1m3dt">注册</a>
</div>
</div>
<br>
<form method="get" action="#">
<div class="layui-row">
<div class="layui-col-md3" style="padding-left: 50px;">
<input type="text" name="title" required lay-verify="required"
placeholder="search"
autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md3" style="padding-left: 50px;">
<button type="submit" class="layui-btn layui-btn-primary">搜索</button>
</div>
</div>
</form>
</div></nav>
<div class="area">
</div>
<div class="area1">
<div class="img">
<a href="https://baike.so.com/doc/5745670-7588181.html"><img
src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1729633867,1959059777&fm=27&gp=0.jpg"></a>
<div class="desc"><a
href="https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E7%BA%A2%E8%8A%B1%E4%BC%9A&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=1729633867,1959059777&os=1008792393,2240249322&pn=15&rn=1&di=64540285260&ln=1851&fr=&fmq=1509679553319_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&pi=0&gsm=0&objurl=http%3A%2F%2Fwww.51555.net%2Fhome%2Fuploads%2Fallimg%2F170814%2F315-1FQ4113322-51.jpg&rpstart=0&rpnum=0&adpicid=0">红花会</a>
</div>
</div>
<div class="img">
<a href="https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E7%BA%A2%E8%8A%B1%E4%BC%9A&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=3381239166,3118041247&os=1589004043,3298055897&pn=5&rn=1&di=74670806130&ln=1851&fr=&fmq=1509679553319_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=11&pi=0&gsm=0&objurl=http%3A%2F%2Fimg3.utuku.china.com%2F650x0%2Fent%2F20170928%2F8370eb69-ed10-4482-909b-da06110e61d1.jpg&rpstart=0&rpnum=0&adpicid=0">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3381239166,3118041247&fm=11&gp=0.jpg"></a>
<div class="desc"><a href="http://www.heyhou.com/index.html">HHH</a></div>
</div>
</div>
<br>
<br>
<footer>
<div class="footer_box">
Copyright@ 2017-2027 yangjlee
</div>
</footer>
</body>
</html>
.img {
border: 1px solid #cccccc;
width: 250px;
margin: 5px;
float: left;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
text-align: center;
padding: 5px;
}
div.img:hover {
border: 1px solid #000000;
}
.area {
height: 300px;
}
.area1 {
height: 300px;
}
.area2 {
height: 300px;
nav{
position:fixed;
top:0px;
height: 58px;
background-color:#FCFCFC;
border-bottom:1px solid #DDDDDD;
width:100%;
}
footer.footer_box{
background-color: #002D54;
padding: 10px;
color : #FFFFFF;
text-align: center;
}
function myswitch() {
var oBody = document.getElementById("myBody");
var oOnoff = document.getElementById("myOnOff");
if(oOnoff.src.match("bulbon")){
oOnoff.src="http://www.runoob.com/images/pic_bulboff.gif";
oBody.style.background="black";
oBody.style.color ="white";
}else{
oOnoff.src="http://www.runoob.com/images/pic_bulbon.gif";
oBody.style.background="white";
oBody.style.color ="black";
}
}