您的位置：首页 > Web前端 > CSS

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

2016-05-27 18:44 826 查看
[b]我听说最近涨粉都是因为头像啊，于是我就换了一个。[/b]

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

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

[b]用户界面样式[/b]

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

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

　　　　语法与border的使用类似。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>outline设置对象外的线条轮廓</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border:5px dashed red;
outline:10px solid green;
width:100px;
height:100px;
text-align:center;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>


运行结果：



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

　　　　使用频率常用。

　　　　语法：cursor：[<url>（使用自定义的图像作为光标类型，IE和Opera只支持.cur图片格式，火狐、谷歌和Safari也支持常见的图片格式） [<x> <y>]?,]*[ 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]

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

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CursorDemo设置鼠标光标的形状（如手型或箭头）</title>
<meta charset="utf-8" />

</head>
<body>
<ul>
<li>
<h3>cursor：default默认箭头型</h3>
<input type="button" value="箭头" style="cursor:default" />
</li>
<li>
<h3>cursor：pointer手型</h3>
<input type="button" value="手型" style="cursor:pointer" />
</li>
<li>
<h3>cursor：text文本光标</h3>
<input type="button" value="文本光标" style="cursor:text" />
</li>
</ul>
</body>
</html>


运行结果：



　　zoom 设置对象缩放比例。

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

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Zoom缩放比例</title>
<meta charset="utf-8" />
</head>
<body style="margin:50px;">
<ul>
<li style="zoom:normal">
zoom:normal缩放正常
</li>
<li style="zoom:3">
zoom:3
</li>
<li style="zoom:300%">
zoom:300%
</li>
<li style="zoom:100%">
zoom:100%
</li>
<li style="zoom:500%">
zoom:500%
</li>
</ul>
</body>
</html>


运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航