PHP初入,div知识点整理,特效&字体等元素的使用整理

<!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>