前端之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. Mac完整卸载Android Studio的方法

    1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/Pr ...

  2. VS2010+SVN

    小乌龟版本用1.6,用1.8时老报错SVN是2.06, SVN Server是2.1.9

  3. 团体程序设计天梯赛L1-019 谁先倒 2017-03-22 17:35 33人阅读 评论(0) 收藏

    L1-019. 谁先倒 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳 ...

  4. postman的使用方法详解！最全面的教程

      文章来源:http://www.cnplugins.com/tool/specify-postman-methods.html     一 简介 Postman 是一款功能超级强大的用于发送 HT ...

  5. java中时间

    格式转化 SimpleDateFormat package day1211.common; import java.sql.Date;import java.sql.Timestamp;import ...

  6. 在MyEclipse中怎么修改Servlet模板

    原Servlet模板实例 package www.csdn.net.servlet; import java.io.IOException; import java.io.PrintWriter; i ...

  7. Android Camera的使用（一） 读书笔记

    原文地址 https://blog.csdn.net/junzia/article/details/52301199 拍照步骤1.添加权限2.开启相机时check一下是否有摄像头3.对预览大小.照片大 ...

  8. SEGGER J-Link install

    Why J-Link? In case you wonder why GNU ARM Eclipse decided to provide support to SEGGER J-Link, the ...

  9. OpenSSH服务及其相关应用

    远程登录工具: telnet,TCP/23:认证明文,数据传输明文,不够安全,所以出现了ssh ssh:Secure SHell,TCP/22,刚开始免费,后来商业化了,所以出现了Openssh,这个 ...

  10. byte[] 数组和字符串的转换，与byte[] 数组和int类型的之间的转化

    我们先来看看byte bool  int ushort  等的定义 首先时byte[]数组与string之间的转换 string 转换位byte[] 数组 string str = "1-1 ...