光标设置

{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. MySQL入门（参考官网）

    目录 一.登陆和退出 1. 远程主机 2. 登陆本机 3. 退出mysql 二.输入查询 三.创建和使用数据库 3.1 创建和选择数据库 3.2 创建表 3.3 将数据加载到表中 3.4 操作表格 3 ...

  2. 51nod 1215 数组的宽度

    若一个数在一段区间内作为最大值存在,那么答案应该加上这个数 若一个数在一段区间内作为最小值存在,那么答案应该减去这个数 所以我们利用单调栈,高效求出a[i]在哪个区间内作为最大/最小值存在,从而确定, ...

  3. 【转载】Pytorch tutorial 之Datar Loading and Processing

    前言 上文介绍了数据读取.数据转换.批量处理等等.了解到在PyTorch中,数据加载主要有两种方式: 1.自定义的数据集对象.数据集对象被抽象为Dataset类,实现自定义的数据集需要继承Datase ...

  4. Django之auth模块

    http://www.cnblogs.com/liwenzhou/p/9030211.html 1.首先导入auth模块 from django.contrib import auth 2.创建aut ...

  5. Windows下的wget，命令行下载url

    1.进命令行(Win + R,输入"cmd") 2.输入:start powershell 3.等待PowerShell窗口启动 4.PowerShell窗口依次输入: $clie ...

  6. linux环境部署python3+django

    1. 确定Linux安装C/C++编译器,在线安装: yum install gcc gcc-c++ autoconf automake 2. 安装依赖环境: yum -y install zlib- ...

  7. Spring 源码分析-1-启动

    Spring 源码分析-1-启动 在web项目中使用spring的时候,我们会在web.xml中加入如下配置: <listener> <listener-class>org.s ...

  8. pandas处理丢失数据-【老鱼学pandas】

    假设我们的数据集中有缺失值,该如何进行处理呢? 丢弃缺失值的行或列 首先我们定义了数据集的缺失值: import pandas as pd import numpy as np dates = pd. ...

  9. 记 Win10 + Ubuntu18.04 安装

    目录 一.准备(一)环境(二)镜像(三)优盘 (四)启动项管理软件EasyBCD(五)启动优盘制作软件(六)分区二.安装 (一)优盘启动(二)安装windows10(三)安装ubuntu18.04(四 ...

  10. HDU 5984.Pocky(2016 CCPC 青岛 C)

    Pocky Let’s talking about something of eating a pocky. Here is a Decorer Pocky, with colorful decora ...