光标设置

{cursor:auto;}--光标根据需要自动变化。

{cursor:crosshair;}--光标变成“+”。

{cursor:pointer;}--光标变成手指模式。

{cursor:move;}--光标变成十字箭头，平时移动界面经常看到。

{cursor:e-resize;}--光标变成水平双向箭头，平时调整界面右边（东边）那条边经常看到。

{cursor:s-resize;}--光标变成垂直双向箭头，平时调整界面下边（南边）那条边经常看到。

{cursor:w-resize;}--光标变成水平双向箭头，平时调整界面左边（西边）那条边经常看到。

{cursor:n-resize;}--光标变成垂直双向箭头，平时调整界面上边（北边）那条边经常看到。

{cursor:ne-resize;}--(ne不能写成en,下同)光标变成东北双向箭头，平时调整界面东北角经常看到。

{cursor:nw-resize;}--光标变成西北双向箭头，平时调整界面西北角经常看到。

{cursor:se-resize;}--光标变成东南双向箭头，平时调整界面东南角经常看到。

{cursor:sw-resize;}--光标变成西南双向箭头，平时调整界面西南角经常看到。

{cursor:default;}--光标变成正常鼠标光标样子。

{cursor:text;}--光标和大写罗马数字1有点像。

{cursor:wait;}--光标变成等待模式。

{cursor:help;}--鼠标正常模式基础上加上一个问号。

浮动布局与clear

上面设置光标的代码，用浮动布局设置。

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

div{

border:2px solid red;

width:100px;

height:100px;

text-align:center;

line-height: 100px;

}

#auto{

float:left;

cursor:auto;

}

#crosshair{

float:left;

margin-left:10px;

cursor:crosshair;

}

#pointer{

float:left;

margin-left:10px;

cursor:pointer;

}

#move{

float:left;

cursor:move;

clear:left;

}

#e-resize{

float:left;

margin-left:10px;

cursor:e-resize;

}

#s-resize{

float:left;

margin-left:10px;

cursor:s-resize;

}

#w-resize{

float:left;

margin-left:10px;

cursor:w-resize;

}

#n-resize{

float:left;

margin-left:10px;

cursor:n-resize;

}

#ne-resize{

float:left;

margin-left:10px;

cursor:ne-resize;

}

#nw-resize{

float:left;

margin-left:10px;

cursor:nw-resize;

}

#se-resize{

float:left;

margin-left:10px;

cursor:se-resize;

}

#sw-resize{

float:left;

margin-left:10px;

cursor:sw-resize;

}

#default{

float:left;

cursor:default;

clear:left;

}

#text{

float:left;

margin-left:10px;

cursor:text;

}

#wait{

float:left;

margin-left:10px;

cursor:wait;

}

#help{

float:left;

margin-left:10px;

cursor:help;

}

</style>

</head>

<body>

<div id="auto">auto</div>

<div id="crosshair">crosshair</div>

<div id="pointer">pointer</div>

<div id="move">move</div>

<div id="e-resize">e-resize</div>

<div id="s-resize">s-resize</div>

<div id="w-resize">w-resize</div>

<div id="n-resize">n-resize</div>

<div id="ne-resize">ne-resize</div>

<div id="nw-resize">nw-resize</div>

<div id="se-resize">se-resize</div>

<div id="sw-resize">sw-resize</div>

<div id="default">default</div>

<div id="text">text</div>

<div id="wait">wait</div>

<div id="help">help</div>

</body>

</html>

效果如下：

如上图，主要用到“float:left”来使每个div框浮动向左，再move那个div框加入“clear:left”使其左边没有浮动元素，所以move那个div框换到下一行，default那个div框也是同样的道理；但是如果在pointer那个div框加入“clear:right”而不是在move的div框加“clear:left”，move的div框是不会换到下一行的，可以说是没有效果的；同理，如果是浮动向右的布局，就需要用到“clear:right”来使元素的右边没有浮动元素。

CSS---光标cursor设置、浮动布局与clear的关系的更多相关文章

  1. CSS光标cursor

    前面的话 在浏览器中,光标对于提供交互反馈很有用.通过在不同的场景中改变光标,就能赋予其不同的含义 定义 cursor光标 值: [<uri>,]*[auto | default | po ...

  2. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  3. CSS浮动布局与菜单栏设计

    公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...

  4. css浮动布局，浮动原理，清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

  5. Css - 浮动布局

    Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...

  6. CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）

    css之浮动布局 本人博客:查看文章   1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...

  7. float浮动布局（慕课网CSS笔记 + css核心技术详解第四章）

    ---------------------------------------------------------------------- CSS中的position: CSS三种布局方式: 标准流 ...

  8. CSS之浮动布局及相关问题

    CSS之浮动布局及相关问题   1.什么是浮动:       在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右 ...

  9. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

随机推荐

  1. springMVC源码笔记

    springMVC 设计总览 下图来源:https://www.cnblogs.com/fangjian0423/p/springMVC-directory-summary.html 下图来源:htt ...

  2. $(document).ready()和onload() html渲染时的区别

    不谈调用次数,加载先后问题,只看渲染时区别 1.都在数据绑定完加载. 2.ready可以有多个,且都执行,onload虽可以写多个,但是只执行最后一个. 3. $.ready = function ( ...

  3. JQuery EasyUI 之 messager基本使用

    ♦ 基本语法:$.messager.alert ( title , msg , icon , fn ): 其中,icon有四种设置:"error"."info" ...

  4. 【原创】大叔经验分享（1）在yarn上查看hive完整执行sql

    hive执行sql提交到yarn上的任务名字是被处理过的,通常只能显示sql的前边一段和最后几个字符,这样就会带来一些问题: 1)相近时间提交了几个相近的sql,相互之间无法区分: 2)一个任务有问题 ...

  5. 【原创】大数据基础之Kudu（2）移除dead tsever

    当kudu有tserver下线或者迁移或者修改hostname之后,旧的tserver会一直以dead状态出现,并且tserver日志中会有大量的连接重试日志,一天的错误日志会有几个G, W0322 ...

  6. python学习之numpy.ewaxis

    当多维数组的某一列时返回的是一个行向量 >>> X = np.array([[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]) >> ...

  7. Coverity代码扫描工具

    1.说明:Coverity代码扫描工具可以扫描java,C/C++等语言,可以和jenkins联动,不过就是要收钱,jenkins上的插件可以用,免费的,适用于小的java项目 2.这是Coverit ...

  8. HTML目录：

    HTML常用标签 CSS样式

  9. php html生成页面二维码

    这个方法主要是针对html页面生成二维码,因此需要一个配置文件phpqrcode.php(因内容太多所以请大家去百度网盘自己下载即可,链接: https://pan.baidu.com/s/1_2mA ...

  10. JavaScript我学之一变量类型

    本文是网易云课堂金旭亮老师的课程笔记,记录下来,以供备忘. 变量类型  只有6种 : 四种原始数据类型boolean , number, string , undefine, 其他object,fun ...