光标设置
{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的关系的更多相关文章
-
CSS光标cursor
前面的话 在浏览器中,光标对于提供交互反馈很有用.通过在不同的场景中改变光标,就能赋予其不同的含义 定义 cursor光标 值: [<uri>,]*[auto | default | po ...
-
前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
-
CSS浮动布局与菜单栏设计
公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...
-
css浮动布局，浮动原理，清除(闭合)浮动方法
css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...
-
Css - 浮动布局
Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...
-
CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
css之浮动布局 本人博客:查看文章 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...
-
float浮动布局（慕课网CSS笔记 + css核心技术详解第四章）
---------------------------------------------------------------------- CSS中的position: CSS三种布局方式: 标准流 ...
-
CSS之浮动布局及相关问题
CSS之浮动布局及相关问题 1.什么是浮动: 在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右 ...
-
css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
随机推荐
-
Android线程管理之ThreadLocal理解及应用场景
前言: 最近在学习总结Android的动画效果,当学到Android属性动画的时候大致看了下源代码,里面的AnimationHandler存取使用了ThreadLocal,激起了我很大的好奇心以及兴趣 ...
-
SQL复制表结构或表数据
需求: 软件开发过程中,一般会部署两个数据库:一个测试数据库提供给开发和测试过程使用:一个运维数据库提供上线使用.当需求变化需增加表时,会遇到数据库表结构或表数据同步的问题,这时就要复制表结构或表数据 ...
-
VIJOS P1037搭建双塔[DP]
描述 2001年9月11日,一场突发的灾难将纽约世界贸易中心大厦夷为平地,Mr. F曾亲眼目睹了这次灾难.为了纪念“9?11”事件,Mr. F决定自己用水晶来搭建一座双塔. Mr. F有N块水晶,每块 ...
-
Ubuntu部署Jupyter
前言 Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言.在本文中,我们将介绍 Jupyter notebook 的主要特 ...
-
eval函数的用法
可以把list,tuple,dict和string相互转化. ################################################# 字符串转换成列表 >>&g ...
-
vue -- style使用scss样式报错
1.报错信息 2.解决方案(vue-li默认没有scss-loader,scss-loader)安装以下依赖 (1) npm install node-sass --save (2)npm insta ...
-
netty入门（一）
1. netty入门(一) 1.1. 传统socket编程 在任何时候都可能有大量的线程处于休眠状态,只是等待输入或者输出数据就绪,这可能算是一种资源浪费. 需要为每个线程的调用栈都分配内存,其默认值 ...
-
Atom编辑器中安装Emmet插件失败的问题
今天使用Atom编辑器安装Emmet插件的时候,刚开始的时候报错: 报错内容如下: Installing “emmet@2.4.3” failed.Show output… Compiler tool ...
-
bat 栈上限
栈耗尽,递归会导致该问题. ****** B A T C H R E C U R S I O N exceeds STACK limits ******Recursion Count=1240, St ...
-
auth.User.groups: (fields.E304)
配置用户信息的models时,如果继承Abstractuser类时,报错: ERRORS:auth.User.groups: (fields.E304) Reverse accessor for 'U ...