Web前端学习第十二天·fighting_使用CSS布局和定位（二）_html/css

Web前端学习第十二天·fighting_使用CSS布局和定位（二）_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:16:49

Original

1032 people have browsed it

我听说最近涨粉都是因为头像啊，于是我就换了一个。

还听说涨粉都是因为是女生啊，于是我不能再无动于衷了，就问一句，难道粉丝都是男生？

我是要成为后宫佳丽三千人的男人啊~

用户界面样式

　　outline 复合属性（outline-width、outline-style、outline-color），设置对象外的线条轮廓。outline画在border外面。

　　　　使用频率一般，在H5中不建议使用。

　　　　语法与border的使用类似。

示例代码如下：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title>outline设置对象外的线条轮廓</title> 6     <meta charset="utf-8" /> 7     <style type="text/css"> 8         div { 9             border:5px dashed red;10             outline:10px solid green;11             width:100px;12             height:100px;13             text-align:center;14         }15     </style>16 </head>17 <body>18     <div>19         20     </div>21 </body>22 </html>

Copy after login

运行结果：

　　cursor 设置在对象上移动的鼠标指针采用何种系统预定义的光标形状。

　　　　使用频率常用。

　　　　游戏中使用自定义图片做鼠标指针的情况较为常见，一般网站只是用系统预定义的。

示例代码如下：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title>CursorDemo设置鼠标光标的形状（如手型或箭头）</title> 6     <meta charset="utf-8" /> 7      8 </head> 9 <body>10     <ul>11         <li>12             <h3>cursor：default默认箭头型</h3>13             <input type="button" value="箭头" style="cursor:default" />14         </li>15         <li>16             <h3>cursor：pointer手型</h3>17             <input type="button" value="手型" style="cursor:pointer" />18         </li>19         <li>20             <h3>cursor：text文本光标</h3>21             <input type="button" value="文本光标" style="cursor:text" />22         </li>23     </ul>24 </body>25 </html>

Copy after login

运行结果：

　　zoom 设置对象缩放比例。

　　　　语法：zoom：normal（正常显示） | （制定一个值，不允许负值） | （百分比设置）

示例代码如下：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title>Zoom缩放比例</title> 6     <meta charset="utf-8" /> 7 </head> 8 <body style="margin:50px;"> 9     <ul>10         <li style="zoom:normal">11             zoom:normal缩放正常12         </li>13         <li style="zoom:3">14             zoom:315         </li>16         <li style="zoom:300%">17             zoom:300%18         </li>19         <li style="zoom:100%">20             zoom:100%21         </li>22         <li style="zoom:500%">23             zoom:500%24         </li>25     </ul>26 </body>27 </html>

Copy after login

运行结果：