CSS---光标cursor设置、浮动布局与clear的关系
光标设置
{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浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
随机推荐
- innodb表碎片处理
本次测试环境是 mysql 5.7.23,表空间为每个表单独表空间 mysql> sHOW VARIABLES LIKE 'innodb_file_per_tabl%'; +---------- ...
- python套接字解决tcp粘包问题
python套接字解决tcp粘包问题 目录 什么是粘包 演示粘包现象 解决粘包 实际应用 什么是粘包 首先只有tcp有粘包现象,udp没有粘包 socket收发消息的原理 发送端可以是一K一K地发送数 ...
- 浅析Memcache和Redis
想必开发的小伙伴们对Memcache和Redis都不陌生吧,最近正好在整理它们,于是就写一下博客吧!一方面是分享,另一方面便于自己查找. 首先,来说说Memcache和Redis是什么? 说得简单一点 ...
- element-ui修改全局样式且只作用于当前页面
1)修改组件的样式,但是只作用于当前页面,其他页面不受影响,做法有两种: 法一:使用关键字“/deep/” 1)在当前页面添加样式: <style lang="scss" s ...
- Matlab将多项式的系数设为0
符号运算时有些多项式的系数值接近于0,像这样 fun = 3.5753839759325595498222646101085e-49*x + 1.836709923159824231201150839 ...
- hihocoder 1496 寻找最大值
题解: 注意到$ai$只有$1e6$这件事情肯定要枚举和这个有关的东西 考虑枚举$ai\&aj$的值就可以了 那么这个集合一定是ai,aj的子集 于是我们对每个集合从大到小枚举丢掉一位转移就行 ...
- 微软拼音转换工具类ChnCharInfo.dll
1.简介 之前做汉字转拼音是使用各种枚举的方式,将各种情况列举,这种方式出错的机率很大,经常对不上号.(如果你想了解更多:http://www.cnblogs.com/islands/articles ...
- pandas处理丢失数据-【老鱼学pandas】
假设我们的数据集中有缺失值,该如何进行处理呢? 丢弃缺失值的行或列 首先我们定义了数据集的缺失值: import pandas as pd import numpy as np dates = pd. ...
- java.net.NoRouteToHostException: No route to host解决方法
当访问192.168.10.98上的tomcat时候,tomcat日志异常 然后查看tomcat服务器上的防火墙 查看service层的防火墙: 至此问题解决: 永久关闭防火墙: 1.首先查看防火墙状 ...
- 1.使用RNN做MNIST分类
第一次用LSTM,从简单做起吧~~ 注意事项: batch_first=True 意味着输入的格式为(batch_size,time_step,input_size),False 意味着输入的格式为( ...