光标设置

{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. Python 概念小屋

     Python 中的 if __name__ == '__main__' 该如何理解 python多进程的理解 multiprocessing Process join run      

  2. Easy RM to MP3 Converter栈溢出定位及漏洞利用

    本文主要是Easy RM to MP3 Converter(MFC++编写)栈溢出的定位及windows下shellcode编写的一些心得. 用到的工具及漏洞程序下载地址https://github. ...

  3. 帆软报表（finereport） 折叠树

    在进行展现数据时,希望模板的数据是可以动态折叠的,即点击数据前面的加号才展开对应下面的数据,可通过树节点按钮实现折叠树效果 实现思路: 1.这里建立一个内置数据集 添加数据 设置模板样式,添加颜色和对 ...

  4. 洛谷P5280 [ZJOI2019]线段树 [线段树，DP]

    传送门 无限Orz \(\color{black}S\color{red}{ooke}\)-- 思路 显然我们不能按照题意来每次复制一遍,而多半是在一棵线段树上瞎搞. 然后我们可以从\(modify\ ...

  5. springboot配置文件priperties大全

    flyway.baseline-description 执行基线时标记已有Schema的描述. flyway.baseline-on-migrate 在没有元数据表的情况下,针对非空Schema执行迁 ...

  6. CodeForces 528D Fuzzy Search 多项式 FFT

    原文链接http://www.cnblogs.com/zhouzhendong/p/8782849.html 题目传送门 - CodeForces 528D 题意 给你两个串$A,B(|A|\geq| ...

  7. 【Linux】Linux简介

    思维导图 什么是Linux? Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统. Linux能运行主要的UNIX工 ...

  8. 设计模式之架构型MVC，MVP，MVVM模式

    一.MVCMVC,Model View Controller,是软件架构中最常见的一种设计模式,简单来说就是通过Controller的控制去操作Model层的数据,并且返回给view层展示.View跟 ...

  9. 翻转 -- CodeForces - 56B

    题目链接: https://cn.vjudge.net/problem/25167/origin 思路: 这是一道水题,但是一开始思路有点问题.. 1000的数据大小,直接暴搜左开始第一个与i不等的下 ...

  10. 如果往错误的NEO地址转账会发生什么

    昨天聊天有人用NEO往错误地址转账丢钱了 我的第一反应是这不可能   Neo使用的地址带有验证功能 最下面ARPP-.G6ce这一串是个base58编码 把他解开就是17-.151f7b5f这一串 红 ...