首页 >web前端 >html教程 >Web前端学习第十二天·fighting_使用CSS布局和定位(二)_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 11:16:491030浏览

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

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

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

 

用户界面样式

  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>

运行结果:

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

    使用频率常用。

    语法:cursor:[(使用自定义的图像作为光标类型,IE和Opera只支持.cur图片格式,火狐、谷歌和Safari也支持常见的图片格式) [ ]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]

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

示例代码如下:

 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>

运行结果:

 

  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>

运行结果:

 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn