前端之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. 小程序报错Do not have xx handler in current page的解决方法

    看到小程序这一大串的“Do not have bindName handler in current page: pages/card/card. Please make sure that bind ...

  2. 何时使用[self release]

    这样的语句   [self release]; 乍看上去让人很困惑. 从release方法本身的作用上来说,就是给self的引用技术减一,就像release对其他对象所做的一样. 一般来说,唯一用到, ...

  3. Android AR平台

    ARToolkit:https://baike.baidu.com/item/ARToolkit/5726883?fr=aladdin Vuforia:搭建Android AR技术开发环境(Aqume ...

  4. Linux 基础教程 42-xargs命令

        xargs是execute arguments的缩写,主要作用是从标准输入中读取内容,并将此内容传递给它要协助的命令,并作为要协助命令的参数来执行. 基本语法 xargs [选项] [命令] ...

  5. java程序无法启动：Unsupported major.minor version 51.0

    今天在sae上部署了一个项目,结果总是出现503错误:service unavailable,然后jvm出现了一大串错误日志,如下 JAVA_SAE_Fatal_error: Failed start ...

  6. Android-SurfaceView生命周期

    SurfaceView的生命周期,和 Activity生命周期,Service生命周期,BroadcastReceiver生命周期,等,不一样: 因为SurfaceView显示的是(视频画面,游戏画面 ...

  7. SQL Server数据库的基础脚本编程

    数据库脚本的基础编程 Go批量处理语句 用于同时处理多条语句 use指定数据库或表 use master --创建数据库 go use Student --创建表(Student)表示数据库 go 创 ...

  8. EasyUi控件Datagrid

    很久没有打开我的博客园,刚刚大概扫了一眼我之前写的笔记,关于Devexpress那篇居然有四千多的浏览记录,不知道对浏览过的博友有没有起到一点点作用.当然我写笔记仅仅只是给自己留个记忆,如果歪打正着帮 ...

  9. 数据库工具SQLite Expert Personal的简单使用

    官方网站: sqliteexpert官方网址 - SQLite administration | SQLite Expert 先使用SQLite Expert Personal熟悉SQLite语句 插 ...

  10. [uwp]自定义图形裁切控件

    开始之前,先上一张美图.图中的花叫什么,我已经忘了,或者说从来就不知道,总之谓之曰“野花”.只记得花很美,很香,春夏时节,漫山遍野全是她.这大概是七八年前的记忆了,不过她依旧会很准时的在山上沐浴春光, ...