CSS两列右侧自适应布局
CSS代码:
1 2 3 4 5 |
/* 两列右侧自适应布局 */ .g-bd1{margin:0 0 10px; } .g-sd1{position:relative;float:left;width:190px;margin-right:-190px; background:#F00;} .g-mn1{float:right;width:100%; background:#f60;} .g-mn1c{margin-left:200px;} |
HTML代码:
1 2 3 4 5 6 7 8 9 10 |
<div class="g-bd1 f-cb"> <div class="g-sd1"> <p>左侧定宽</p> </div> <div class="g-mn1"> <div class="g-mn1c"> <p>右侧自适应</p> </div> </div> </div> |
效果演示地址:点击查看演示
CSS鼠标样式
cursor:hand 是手型
1 |
<a href="#" style="cursor:hand">CSS鼠标手型效果</a><br> |
cursor:pointer 也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用。
1 |
<a href="#" style="cursor:pointer">CSS鼠标手型效果</a><br> |
cursor:crosshair 是十字型
1 |
<a href="#" style="cursor:crosshair">CSS鼠标十字型效果</a><br> |
cursor:help 是问号
1 |
<a href="#" style="cursor:help">CSS鼠标问号效果</a><br> |
下面写法都一样,这里就不一一写完了。
cursor:text 是移动到文本上的那种效果
cursor:wait 是等待的那种效果
cursor:default 是默认效果
cursor:e-resize 是向右的箭头
cursor:ne-resize 是向右上的箭头
cursor:n-resize 是向上的箭头
cursor:nw-resize 是向左上的箭头
cursor:w-resize 是向左的箭头
cursor:sw-resize 是左下的箭头
cursor:s-resize 是向下的箭头
cursor:se-resize 是向右下的箭头
cursor:auto 是由系统自动给出效果
发布者:柚子,转转请注明出处:https://ityouzi.com/archives/self-adaption-cursor.html