<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <!--<style> /*.nav{ background-color: red;/*背景颜色*/ background-image: url(../01.jpg); /*加背景图片*/ border: 2px solid black; width: 200px; height: 200px; background-repeat:repeatrepeat ; /*背景图平铺，前面加no-是不平铺。*/ /*background-position: center;*/ /*背景图居中，设置背景图位置时，repeat必须为no-repeatrepeat*/ /*background-size: 100%; /*一张小图填满效果 */ /*background-repeat:round ;*/ /*图片拉伸*/ /*local为背景图随着字体滚动,scroll为不随字体滚动,固定*/ background-attachment:local; overflow: scroll;*/ } </style>--> <style> .nav{ width: 500px; height: 100px; border: 2px solid black; background-image: url(js/QQ图片20170815095932.png); /*background-position-y:top 0px;*/ background-position-y:top 312px ; } .d2{ border: solid 0px ; text-align: right; } .ziti{ width: 100px; height: 50; font-family: "微软雅黑"; font-style: italic; /*倾斜*/ font-weight:bold ; /*加粗*/ text-decoration: overline; /*上划线*/ line-height: 50px; } .btn{ text-align: center; /*字体居中*/ width: 50PX; height: 50PX; line-height: 50PX; /*行高要和上面设置的行高一样*/ } .btn:hover{ /*事件=hover,我的理解是标签名+事件{发生事件时具体执行操作的代码}*/ cursor: pointer; /*鼠标触碰变成手*/ background-color: red; /*背景颜色*/ color: blueviolet; /*字体颜色*/ transition: 0.5s; /*渐变时间*/ border-radius:50%; /*圆角*/ /*transform: rotate(45deg); 旋转*/ transform: rotateX(45deg); } a{ /*删除超链接里面的超链接*/ text-decoration:none; } </style> </head> <body> <!--<div class="nav"> <p>12346789<p/> <p>12346789<p/> <p>12346789<p/> <p>12346789<p/> <p>12346789<p/> <p>12346789<p/> <p>12346789<p/> <p>12346789<p/> <p>12346789<p/> <p>12346789<p/> </div>--> <div class="nav"> <div class="d2">请输入 <input type="text" /> <a href="https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=font%E6%A0%87%E7%AD%BE%E4%BB%80%E4%B9%88"target="_blank"/><input type="submit"/></a> </div> </div> <div class="ziti">文字文字文字</div> <div class="btn" translate=""><a href="http://www.biqukan.com/26_26670/9485503.html" target="_blank" />按钮</a></div> </body></html>