html+css常用小笔记(持续更新)

1
去掉input点击时的蓝色边框
outline:none;
2
禁止文本选中
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge *//*说明:该属性不加前缀不支持目前所有浏览器*/
user-select: none; /* Non-prefixed version, currently not supported by any browser */

注意:

在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性

unselectable="on",否则可能不会生效哦~不过现代浏览器如果不是非得兼容一些老的浏览器也可以不加。

3
CSS前缀
  • Trident内核:前缀为-ms
  • Gecko内核:前缀为-moz
  • Presto内核:前缀为-o
  • Webkit内核:前缀为-webkit

以上为四大主流内核。

Konqueror内核:前缀为-khtml-  注: 该内核并不主流,有兴趣的可以百度做了解。

4
textarea(文本域)禁止拖拽(禁止改变大小)

有两种方式:

  1)禁止右下的拖拽按钮。(推荐这样)

resize: none;

  2)固定大小。(但是右下角的按钮还是有,只是拖拽不会改变大小)

width: 350px;
height: 150px;
max-width: 350px;
max-height: 150px;
5
块级元素背景图(background-img)拉伸填充整个元素
    background: url("Your Image URL");background-repeat: no-repeat;background-size:100% 100%;

 background-size处理auto contain cover常规值 还可以填写百分比或者尺寸。第一个值为背景图宽 第二个为背景图高。

6
背景图超长不破坏原图比例居中对齐
background-repeat: no-repeat;
background-position: center;
background-position设置背景图对齐方式,可以设两个值,第一个x轴 第二个y轴。
7
absolute元素居中(水平,垂直居中)

方法一

  margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;

适用未知尺寸元素。

方法二

position:absolute;
width:200px;
height:400px;
left:50%;
top:50%;
margin-left:-100px;  /*设置为宽度的一半*/
margin-top:-200px;   /*设置为高度的一半*/

适用已知尺寸元素

8
给table中的thead和tbody加边框

thead和tbodytbody就这么加border是不起作用的,一般的做法都是给thead和tbody里面的tr的td加边框,显然这不是个好解决方案。

table {border-collapse: collapse;
}
/*把table标签的border-collapse样式设置一下,就可以给thead设置边框样式了。*/
9
js提取汉字(也可以提取数字,替换正则就行)
var str="怎样从一个Html页面中提取所有汉字呢?不能有其它Html代码。";  
alert(str.replace(/[^\u4e00-\u9fa5]/gi,""));  
10
被忽略的一组标签——分组框
<fieldset><legend>组标题</legend><!--内容-->
</fieldset>

 

转载于:https://www.cnblogs.com/MirageFox/p/5452158.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

音视频基本概念和FFmpeg的简单入门

写在前面最近正好有音视频编辑的需求&#xff0c;虽然之前粗略的了解过FFmpeg不过肯定是不够用的&#xff0c;借此重新学习下&#xff1b;基本概念容器/文件(Conainer/File)&#xff1a;即特定格式的多媒体文件&#xff0c;一般来说一个视频文件是由视频&#xff0c;音频&#…

linux shell之paste合并文件和找到匹配的文件里面替换内容(find和-exec或xargs组合)

1 问题 1&#xff09;合并2个文件&#xff0c;这里用paste命令 2&#xff09;找到匹配的文件里面替换内容&#xff0c;这里用find 和 -exec或xargs命令组合 2 实现 1&#xff09;合并2个文件&#xff0c;这里用paste命令&#xff0c;我们在paste后面加参数-d 然后加" &…

Windows Live Writer 的昨日荣光

今天这一篇文章&#xff0c;想写一写Windows Live Writer这款博客编辑器&#xff08;最早的一个版本是2007年发布的&#xff09;。毫不夸张地说&#xff0c;这是为数不多的几款所见即所得的编辑器之一&#xff0c;当然&#xff0c;它的运行速度慢也是一个众所周知的问题。作为一…

qpython执行手机脚本精灵使用教程_Android上执行python脚本-QPython

看书&#xff0c;发现android可以跑python。尝试了一下。首先需要在手机上安装python环境&#xff0c;通过安装apk实现&#xff0c;这个apk叫QPython&#xff0c;还有同类的比如SL4A。QPython的官网&#xff1a;https://www.qpython.com/可以在官网上下载QPython的安装包&#…

猎豹MFC--CMenu菜单 设置主菜单 给主对话框设置菜单 设置快捷菜单

设置主菜单&#xff08;不是快捷菜单&#xff09;&#xff1a;给主对话框设置菜单&#xff1a;效果如下&#xff1a;修改菜单的ID使之便于记忆&#xff1a;给菜单添加消息处理&#xff1a;添加处理代码&#xff1a;设置快捷菜单&#xff1a;打开对话框&#xff0c;属性添加消息…

SQL主键简单表述

主键&#xff08;PRIMARY KEY 约束&#xff09;&#xff1a;PRIMARY KEY 约束唯一标识数据库表中的每条记录。 主键就是唯一的&#xff0c;其是索引的一种&#xff0c;并且是唯一性索引的一种。 其实主键就像我们的身份证一样&#xff0c;每一个主键的id就表示着一个特定的一…

oracle 删除空间不足,oracle表空间扩容、创建、删除(解决表空间不足问题)

前言整理一下之前使用oracle数据库遇到的表空间不足的问题&#xff0c;顺便水个博客。oracle表空间操作语句1.改变已存在的数据文件的大小ALTER TABLESPACE app_data ADD DATAFILE ‘D:\ORACLE\PRODUCT\10.2.0\ORADATA\EDWTEST\APP03.DBF‘ SIZE 20480M;2.允许已存在的数据文件…

重复数据删除:块级技术VS.字节级技术

重复数据删除技术能够识别重复的数据&#xff0c;消除冗余&#xff0c;减少需转移或存储的数据的总体容量。在本文中&#xff0c;我将分别对这两种技术加以评论。与块级技术相比&#xff0c;字节级删除技术对数据的检查更加细微&#xff0c;精度更高&#xff0c;但同时需要更加…

Mac升级到Yosemite后默认的php版本不支持imagetfftext函数问题解决

Mac升级到yosemite后&#xff0c;php也自动升级&#xff0c;运行项目的时候发现后台验证码显示不出来。调试一下发现imagetfftext这个函数不存在&#xff0c;应该gd没有安装完全&#xff0c;因为Mac上的php实现系统自带的&#xff0c;只能通过重新安装php来解决【不能通过安装扩…

linux shell之字符串的更具字符分割和删除字符和文本内容的删除以及内容是否匹配成功

1 字符串的更具字符分割 1&#xff09; xargs分割 echo "chenyu*hello*word" | xargs -d "*" chenyu hello word 2&#xff09; awk分割 echo "chenyu*hello*word" | awk -F "*" {print $1} chenyu 2 字符串的删除字符 1&#xf…

将一个正方形分成4个大小一样的小正方形,再将其中一个小正方形分成4个小正方形,如此类推,分割n次是几个正方形?

问题&#xff1a; 将一个正方形分成4个大小一样的小正方形&#xff0c;再将其中一个小正方形分成4个小正方形&#xff0c;如此类推&#xff0c;分割n次是几个正方形&#xff1f; 解答&#xff1a; 一次分割都是将一个分成4个&#xff0c;增加了3&#xff08;1*3&#xff09;个…

领域事件和集成事件没那么高大上

前言随着系统架构的演变&#xff0c;有很多名词也随之涌现&#xff0c;如&#xff1a;微服务、灰度发布、资源隔离、容器、领域/集成事件等&#xff0c;听着的确高大上&#xff0c;让很多小伙伴有一种无法征服的感觉&#xff1b;其实很多东西可能之前就已经用过了&#xff0c;只…

python截图拼接_Python实现屏幕截图有两种方式 - 小众知识

使用windows API使用PIL中的ImageGrab模块下面对两者的特点和用法进行详细解释。一、Python调用windows API实现屏幕截图好处是灵活速度快缺点是&#xff1a;写法繁琐不跨平台import timeimport win32gui, win32ui, win32con, win32apidef window_capture(filename):hwnd 0 #…

sql drop 简单操作(Mysql)

通过使用 DROP 语句&#xff0c;可以轻松地删除索引、表和数据库。 例如&#xff0c;删除一个表&#xff0c;表名为 table1 的表&#xff1a; drop table <表名>; drop table table1 ; drop删除数据库 test1: drop database <数据库名>; drop database test1…

20142335郝昊第三周学习总结

20145335郝昊 《Java程序设计》第3周学习总结 教材学习内容总结 第四章 类与对象 定义&#xff1a; 对象&#xff08;Object&#xff09;&#xff1a;存在的具体实体&#xff0c;具有明确的状态和行为。 类&#xff08;Class&#xff09;:具有相同属性和行为的一组对象的集合&…

Python面向对象编程基础

#codingutf-8class hello:def __init__(self,NAME):self.nameNAMEdef sayhello(self):print("Hello, {0}".format(self.name)) #拼接字符串&#xff0c;也可以用print("Hello "self.name)#类的继承 class hi(hello): #父类用括号括起来def sayhi(self):pr…

书生云王东临:真正的超融合产品要像“机器猫” 开箱即用

“经过6年的发展&#xff0c;我们已经为技术找到了非常好的落地产品&#xff0c;可以突出我们的优势&#xff0c;现在到了我们大展宏图的时候了。”20年前书生集团从电子公文业务起家&#xff0c;后来经营过电子书网站&#xff0c; 6年前开始进入云存储领域&#xff0c;在存储技…

NetBeans安装提示neatbeans cannot find java 1.8 or higher

1 问题 安装NetBeans的时候&#xff0c;点击bin目录下的netbeans64.exe,然后提示错误 neatbeans cannot find java 1.8 or higher 然后我在终端输入java -version是1.8 C:\Users\User>java -version java version "1.8.0_65" Java(TM) SE Runtime Environment …

hierarchyviewer

为什么80%的码农都做不了架构师&#xff1f;>>> 学习monkeyrunner&#xff0c;无奈怎么都无法启动activity&#xff0c;人家告诉我.hierarchyviewer这个工具可以&#xff0c;今天我就开始学习这个了&#xff0c;但愿有所帮助啊。http://www.xuebuyuan.com/2104811.…

ALTER 简单操作(mysql)

ALTER 语句 ALTER 语句用于在已有的表中添加、修改或删除。 删除列: ALTER TABLE 表名字 DROP 列名称 例如&#xff1a;删除test111表中的age列 ALTER TABLE test1111 DROP age 添加列&#xff1a;添加到test1111表列&#xff0c;名为age&#xff0c;约束为not null 注释…