光标设置

{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. 嵌套调用less函数时参数值的变化及提取部分-遁地龙卷风

    在a.less中导入base.lessa.less中的代码 .animate-ripple-ink{ .animation(ripple .5s linear;{ 100%{ opacity:; .t ...

  2. 解析电子墨水屏技术（工作原理与LCD的区别）【转】

    转自:https://blog.csdn.net/weixin_42509369/article/details/84646808 阅读电子书早已成为大家生活中一部分,方便轻巧的电子版书籍更便于携带, ...

  3. 用Python进行SQLite数据库操作

    简单的介绍 SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经 ...

  4. html5 - 地图

    demo截图: demo链接 代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. fiddler启用过滤规则只显示想要的接口数据

    fiddler启用过滤规则只显示想要的接口数据 比如只显示192.168.11.80站点数据 点击应用规则就可以只显示192.168.11.80了

  6. Java对象模型规约

      下面是我根据工作中项目的经验,总结的一套自己觉得比较方便的对象模型规约   model(实体模型)      -vo(与前端交互的对象模型,前端泛指页面.移动端和远程服务调用等)         ...

  7. VMware虚拟机安装Linux系统后IP配置(二)

    1.在NAT模式下自动获取IP 2.编辑网卡配置文件(通用) 3.Ctrl+L 清屏.重启网络服务后检查网络是否正常上网 修改后本机IP地址在linux中ping通本机IP 然而在本机却ping不通l ...

  8. 安装和启动tftp-server服务器及可能出现Redirecting to /bin/systemctl restart xinetd.service问题的解决方式

    安装和启动tftp-server服务器及可能出现Redirecting to /bin/systemctl restart xinetd.service问题的解决方式 1)首先,检查服务器已安装的tf ...

  9. POJ 1515 Street Directions (边双连通)

    <题目链接> 题目大意: 有m条无向边,现在把一些边改成有向边,使得所有的点还可以互相到达.输出改变后的图的所有边(无向边当成双向的有向边输出). 解题分析: 因为修改边后,所有点仍然需要 ...

  10. CF1037E. Trips

    题目链接 CF1037E. Trips 题解 每次删点后,对不满足要求的点拓扑 代码 #include<map> #include<queue> #include<vec ...