前端之HTML，CSS（九）

　　CSS高级技巧

　　CSS用户界面样式

　　用户界面样式指更改用户操作样式，如更改用户的鼠标样式、表单轮廓等。

　　鼠标样式cursor

　　cursor属性具有属性值有：default、pointer、move、text。四种属性值对应鼠标样式为：白色箭头、白色小手、四向箭头、文本键入。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>元素显示与隐藏-测试</title>

 </head>

 <body>

     <ul>

         <li style="cursor: default;">

             箭头

         </li>

         <li style="cursor: pointer;">

             白色小手

         </li>

         <li style="cursor: move;">

             四向箭头

         </li>

         <li style="cursor: text;">

             文本键入

         </li>

     </ul>

 </body>

 </html>

　　自行查看效果

　　轮廓线

　　表单控件在进行文本输入时，表单外边框会变为蓝色，可以使用outline属性对边框进行设置，一般设置取消外边框，即取消轮廓线，outline：none；

　　取消前

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>轮廓线-测试</title>

 </head>

 <body>

     <input type="text" name="">

 </body>

 </html>

　　效果

　　取消后

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>轮廓线-测试</title>

     <style type="text/css">

         input {

             outline: none;

         }

     </style>

 </head>

 <body>

     <input type="text" name="">

 </body>

 </html>

　　效果

　　防止文本域拖拽问题：用textarea设定文本域时，文本域右下角存在阴影小三角，鼠标按住小三角可以拖拽文本域使其大小变化，取消文本域拖拽使用resize属性。

　　取消文本域拖拽

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>轮廓线-测试</title>

     <style type="text/css">

         textarea {

             resize: none;  /*取消文本域拖拽*/

             outline: none;  /*取消轮廓线*/

         }

     </style>

 </head>

 <body>

     <textarea>

     </textarea>

 </body>

 </html>

　　效果

　　文字与图片垂直对齐

　　英文中存在四线三格书写方式，网页中文字也存在这种形式，按照英文书写格式一般字母都是以第三线为基准对齐，按照网页称为四线由上至下为：顶线（top line）、中线（middle line）、基线（base line）、底线（bottom line）。即网页文字和图片均按照基线对齐，但是文字书写中英文g，j，y等会超出基线，不超出底线。对于图片和文字位于一个带边框父盒子中，图片会存在白色缝隙问题。解决方法：改变vertical-align属性的默认属性值baseline，可以设置为top、middle、bottom改变垂直对齐方式。　

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>轮廓线-测试</title>

     <style type="text/css">

         div {

             width: 100%;

             border: 2px solid red;

         }

     </style>

 </head>

 <body>

     <div>

         <img src="data:images/tb.jpg">my name is snow.

     </div>

 </body>

 </html>

　　问题

　　解决方法：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>轮廓线-测试</title>

     <style type="text/css">

         div {

             width: 100%;

             border: 2px solid red;

         }

         div img {

             vertical-align: bottom;

         }

     </style>

 </head>

 <body>

     <div>

         <img src="data:images/tb.jpg">my name is snow.

     </div>

 </body>

 </html>

　　效果

认识CSS中高级技巧之用户界面样式的更多相关文章

  1. 认识CSS中高级技巧之元素的显示与隐藏

    前端之HTML,CSS(八) CSS高级技巧 元素的显示与隐藏 CSS中有三个属性可以设置元素的显示于隐藏,分别是:display.visibility和overflow. display 隐藏元素: ...

  2. css学习_css用户界面样式

    1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...

  3. CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

  4. 【CSS】381- 提升你的CSS选择器技巧

    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. ...

  5. css布局技巧

    CSS用户界面样式 鼠标样式currsor li{ cursor:pointer: } 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状 属性值 描述 default 默认 pointer ...

  6. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

  7. CSS hack技巧

    CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...

  8. CSS编码技巧

    前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...

  9. [css 揭秘]：CSS编码技巧

    CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...

随机推荐

  1. BASE64Encoder及BASE64Decoder编译器找不到问题

    编译器自带这两个类,但是会报错找不到,需要手动让编译器识别这个类 第一步.右键项目,然后选择properties 第二步,打开如图位置 第三部,选择如图位置,双击 第四部,add添加 更改值 改为如图 ...

  2. java.sql.SQLException: Access denied for user ''@'localhost' (using password: YES)

    这个问题是说明你的JDBC数据库连接位置出错了,请仔细检查 private static String url; private static String username; private sta ...

  3. centos mysql忘记密码找回（仅限mysql5.7）

    1.停掉mysql 2.执行#mysqld_safe --user=mysql --skip-grant-tables --skip-networking & 3.#mysql 4.updat ...

  4. Postgresql fillfactor

    一个表的填充因子(fillfactor)是一个介于 10 和 100 之间的百分数.100(完全填充)是默认值.如果指定了较小的填充因子,INSERT 操作仅按照填充因子指定的百分率填充表页.每个页上 ...

  5. Linux FIO

    FIO是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎,包括:sync,mmap, libaio, posixaio, SG v3, splice, null, ...

  6. Silverlight与JavaScript的交互操作

    Silverlight和JavaScript交互介绍以及简单Demo演示,主要包括JavaScript操作Silverlight数据.Silverlight操作JavaScript数据以及数据模版绑定 ...

  7. vs2008安装mvc3后新建项目报错 -- 类型“System.Web.Mvc.ModelClientValidationRule”同时存在

    解决方案: 找到主目录的.csproj文件,用文字编辑器打开你找到它找到 <Reference Include="System.Web.WebPages" />  &l ...

  8. leetcode 罗马数字转整数

    罗马数字包含以下七种字符:I,V,X,L,C,D 和M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做II ,即为两个并列的 1.1 ...

  9. iOS 优秀开源项目

    1. 界面 iCarousel: 用来做图片旋转显示效果(相册). MZTimerLabel:用来制作一个计时并显示时间的 label. MSDynamicsDrawerViewController, ...

  10. ClamAV学习【2】——clamscan入口函数浏览

    就简单给代码加上些注释,方便理解.第一次浏览,应该会有不正确的理解.后面会继续学习修改. 文件:clamscan\clamscan.c 代码如下: nt main(int argc, char **a ...