标签：off padding blank mys reg image sign 导航 html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漫画</title> <link rel="stylesheet" type="text/css" href="../static/css/manhua.css" type="text/css"> <script src="../static/js/manhua.js"></script> <manhua target="_blank"/> </head> <body id="myBody"> <nav> <img src="http://news.u17i.com/images/header_bg/header_bg_1508753122_9zUfjgQKJw7A.jpg"><br> <a href="http://127.0.0.1:5000">首页</a> <a href="">下载</a> <input type="text"name="search"> <button type="submit">搜索</button> <a href="http://127.0.0.1:5000/login">登录</a> <a href="http://127.0.0.1:5000/register">注册</a> <img id="on_off" onclick="mySwitch()" src="../static/images/on.jpg" width="80px"> </nav> <div> <div class="katong"> <a href="https://baike.baidu.com/item/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E/6298?fr=aladdin" > <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=bd7d3d834734970a537e187df4a3baad/50da81cb39dbb6fd47c8108a0f24ab18962b378e.jpg" width="300" height="200"></a> <div class="desc"><a href="https://baike.baidu.com/item/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E/6298?fr=aladdin">天空之城</a></div> </div> <div class="katong"> <a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/19127928?fromtitle=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&fromid=19126915&fr=aladdin"> <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=0000a3f3583d26973ade000f3492d99e/242dd42a2834349ba3d7f0bcc0ea15ce36d3be32.jpg" width="300" height="200"></a> <div class="desc"><a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/19127928?fromtitle=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&fromid=19126915&fr=aladdin">你的名字</a></div> </div> <div class="katong"> <a href="https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6%EF%BC%9A%E4%BC%B4%E6%88%91%E5%90%8C%E8%A1%8C/13845055?fr=aladdin"> <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=e1f375ca56da81cb5aeb8b9f330fbb73/aec379310a55b319a7591f4b44a98226cffc176f.jpg" width="300" height="200"></a> <div class="desc"><a href="https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6%EF%BC%9A%E4%BC%B4%E6%88%91%E5%90%8C%E8%A1%8C/13845055?fr=aladdin">哆啦A梦</a></div> </div> </div> <div class="clearfloat"> <img src="http://p0.so.qhimgs1.com/t01b0bcf7da772c3e8c.jpg" width="500" height="500"> </div> </body> </html>
js
function mySwitch() { var myele=document.getElementById("on_off") if (myele.src.match("on")) { myele.src="../static/images/off.jpg" document.getElementById("myBody").style.background="black" document.getElementById("demo").style.color="white" } else { myele.src="../static/images/on.jpg" document.getElementById("myBody").style.background="white" document.getElementById("demo").style.color="black" } }
css
div.katong{ border:2px solid #999999;/*设置盒子的边框线条*/ width: 300px; float:left;/*设置浮动对象，往左边靠拢*/ margin:5px;/*设置边框之间的距离*/ } div.katong.img{ width: 100%; height: auto; } div.desc{ font-size: 150%; text-align: center;/*设置文字居中*/ padding:5px; /*设置文字距离边框的宽度*/ } /*设置鼠标移动到边框的反应*/ .img:hover{ border:2px solid #ffff33; } div.clearfloat{ clear: left; }
标签：off padding blank mys reg image sign 导航 html
原文地址：http://www.cnblogs.com/33333-/p/7780729.html
