光标设置

{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. 基于百度API+Flask实现网页版和图灵机器聊天

    开发前准备 调用百度和图灵机器人相关的 参考链接:www.cnblogs.com/changtao/p/10596385.html 下载一个网页录音的js插件 链接:https://pan.baidu ...

  2. 编译Android ROM环境搭建

    环境搭建 1 安装ubuntu 推荐12.04或13.10 2 安装jdk7和一些所需要的包安装jdk7$ sudo apt-get update$ sudo apt-get install open ...

  3. windows下nginx的简单使用

    在网上是可以查得到关于nginx的一些使用,每次要用的时候都会去查一下别人的用法.既然自己用到的频率会比较高,那何不自己做个小小的笔记呢. 我使用的是windows版nginx-1.14.0,版本对命 ...

  4. c++基础学习

    1.输入输出函数(cout,cin) #include<iostream> int main() { using namespace std; cout<<"Come ...

  5. Django模型层-多表操作

    多表操作 一.创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是 ...

  6. windows配置openssl

    下载openssl并安装,下载地址:http://slproweb.com/products/Win32OpenSSL.html 假设安装路径为C:\"Program Files" ...

  7. C++设计模式——组合模式

    问题描述 上图,是一个公司的组织结构图,总部下面有多个子公司,同时总部也有各个部门,子公司下面有多个部门.如果对这样的公司开发一个OA系统,作为程序员的你,如何设计这个OA系统呢?先不说如何设计实现, ...

  8. 关于button去掉自带阴影效果的方法

    在button的属性设置里加上: style=”?android:attr/borderlessButtonStyle” 即: <Button android:layout_width=&quo ...

  9. Mysql -- 外键的变种 三种关系

    一.介绍 因为有foreign  key的约束,  使得两张表形成了三种关系 多对一      多对多   一对一 二.如果找出两张表之间的关系 #.先站在左表的角度去找 是否左表的多条记录可以对应右 ...

  10. PYTHON-进程 子进程

    并发编程 学习目标: 见35复习 1.操作系统 什么是操作系统 操作系统的两大作用: 批处理操作系统: 操作系统发展史: 多道技术***** 产生背景: 两大核心点: 应用软件的优化的核心:***** ...