前端之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. WebApi参数传递总结(转)

    出处:http://www.cnblogs.com/Juvy/p/3903974.html 在WebAPI中,请求主体(HttpContent)只能被读取一次,不被缓存,只能向前读取的流. 举例子说明 ...

  2. Gym 101201F Illumination (Two-Sat)

    题意:一个n*n的房子,有很多灯,每个格子只能被上下方向照一次.左右方向照一次,每个灯可以选择上下或是左右照,照明长度以自身位置为中心,占用2*r+1个格子.问能否安排一种方案,使所有格子满足条件. ...

  3. thinkphp ajax分页加载更多最简单的实现方法

    <div class="li_list"> <volist name="list" id="vo"> <div ...

  4. JAVA内存管理再解

    首先我们要明白一点,我们所使用的变量就是一块一块的内存空间!!   一.内存管理原理:   在java中,有java程序.虚拟机.操作系统三个层次,其中java程序与虚拟机交互,而虚拟机与操作系统间交 ...

  5. ZOJ1648 Circuit Board 2017-04-18 20:31 34人阅读 评论(0) 收藏

    Circuit Board Time Limit: 2 Seconds      Memory Limit: 65536 KB On the circuit board, there are lots ...

  6. 机器学习—SVM

    一.原理部分: 依然是图片~ 二.sklearn实现: import pandas as pd import numpy as np import matplotlib.pyplot as plt i ...

  7. 中心极限定理&&正态分布 随想

    0-前言 笔者本来周末约好朋友出去骑行,不料天公不作美!哎,闲来无事来到了实验室,本来打算看看<天天向上>,而这一期又实在不好看(偶像剧).只好来做做一些小实验,脑海里突然想到“正态分布“ ...

  8. [毕业设计][期末作业]二手闲置小程序 免费信息发布系统功能源码（小程序+php后台管理）

    最近做了一个小程序,主要是二手闲置免费信息发布系统的功能,里面包括了登录,发布商品,商品管理,违规投诉,canva商品海报生成,分享等一些基础的功能,可以说代码都是自己辛辛苦苦写出来的.可作为毕业设计 ...

  9. linux进程管理（二）

    接上[linux进程管理(一)] 终止进程的工具 kill .killall.pkill 终止一个进程或终止一个正在运行的程序,一般是通过 kill .killall.pkill.xkill 等进行. ...

  10. opencv3.3 安装环境教程以及实现个图片读取功能

    一.opencv3.3安装环境 1. 首先要安装这个opencv3.3,我们必须要安装一个python (IDLE:集成开发环境),我自己安装了IDLE3.6和pycharm2017,这些软件都可以去 ...