前端之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. 如何在centos环境下搭建java环境

    在CentOS上安装Java环境:[1]使用yum安装java 现阶段做企业级项目开发一般都采用Java语言.开发的项目需要放在服务器上运行测试,若以CentOS系统为服务器系统,首先要解决就是Cen ...

  2. C#使用Log4Net记录日志（转）

    出处:http://www.cnblogs.com/wangsaiming/archive/2013/01/11/2856253.html 第一步:下载Log4Net 下载地址:http://logg ...

  3. jquery中prop()和attr()的区别

    相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...

  4. 前端福利之HTML5 UTF-8 中文乱码（转）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 洛谷P4556 [Vani有约会]雨天的尾巴(线段树合并)

    题目背景 深绘里一直很讨厌雨天. 灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切. 虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了几座老房子,几棵老树被连根拔起,以及田地 ...

  6. TortoiseSVN本地版本控制管理

    TortoiseSVN 是 Subversion 版本控制系统的一个免费开源客户端.下载地址:https://tortoisesvn.net/downloads.html. 安装好TortoiseSV ...

  7. Spring学习（七）——开发Web Service的几种方式

    本文作者在学习使用Java开发Web Service(不包括Restful)时,由于不知道Java有这么多框架支持开发Web Service一度陷入迷惘,不知道这些框架各有 什么不同,各有什么优缺点. ...

  8. #测试框架推荐# test4j，数据库测试

    # 背景 后端都是操作DB的,这块的自动化测试校验的话,是需要数据库操作的,当然可以直接封装方法来操作数据,那么有没有开源框架支持数据操作,让我们关注写sql语句?或者帮我们做mysql的断言呢? # ...

  9. winform在A窗体刷新B窗体,并改变窗体的属性

    //A窗体设置B窗体的属性并刷新B窗体 Application.OpenForm["窗体名称"].Controls["控件名称"].visible=true;

  10. c语言博客作业06-文件

    1.本章总结  1.1思维导图  1.2本章学习体会 这周学了结构体和文件,结构体作为一种数据的归类方式,相比数组或变量更具有整体全面性,例如一个数组只可以放一些按照元素顺序存放的单元变量,并且我们用 ...