个人编写HTML常用的简单方法汇总
2018-06-05 本文已影响56人
仰望天空的人
懒得百度的属性：
text-decoration:underline;下划线，text-decoration:line-through;删除线 ， font-style:normal;去掉斜体
text-align：justify；将文本两端对齐边框，border:1px dashed #000; dashed虚线 dotted点线
list-style-image：url(“图片地址”); li样式加图片
cursor:wait 鼠标加载样式 url(可添加图片) move 拖动形状 url自己写 help鼠标带问号
box-shadow的：
box-shadow: h-shadow v-shadow blur spread color inset; 横向和纵向都设置为0 为四边都有阴影（竖向偏移，横向偏移，模糊程度，大小，颜色，内外）
box-shadow:0 0 0 #ffedd0 inset,/*左边阴影*/0 0 0 #ffedd0 inset, /*右边阴影*/0 -10px 10px #ffedd0 inset, /*上部阴影*/0 10px 10px #ffedd0 inset; /*下边阴影*/
text-shadow:2px 0px 0px #000,-2px 0px 0px #000,0px 2px 0px #000,0px -2px 0px #000; 文字描边
-webkit-text-stroke: 2px red; css3文字描边
text-shadow: 5px 5px 5px #e5829a; 文字阴影 X Y 模糊程度 颜色
// 当一个块元素里包含多个行内元素 字体之间出现间距【使用font-size：0】解决
position：static 定位 默认值 ；
CSS3动画的点：
transition:all 2s linear 1s;最后一个是等待时间 cubic-bezier(1,4,1,1)这是第三个参数 设置动画方式
border-radius: 300px 300px 300px 300px/300px 300px 300px 300px; border-radius八值大乘期
// border-radius: 左上角水平圆角半径大小 /右上角水平圆角半径大小 /右下角水平圆角半径大小 /(左下角水平圆角半径大小/左上角垂直圆角半径大小)/右上角垂直圆角半径大小 /右下角垂直圆角半径大小 /左下角垂直圆角半径大小;
transform-style ：preserve-3d
css3：旋转：rotate() 扭曲：skew(30deg,20deg) 缩放：scale(2,4) 移动：translate()
所有的2D转换方法组合在一起： matrix() matrix(scale.x ,, , scale.y , translate.x, translate.y)
综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;
@media 响应式一定要在and 和 （min-width：1400px） 中间加空格 妈的坑死老子了
控制文字行数：
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 超出的文字显示省略号
overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical; display: -webkit-box;必须加这个 三种写法 flex迭代 超出几行显示省略号......
white-space: pre-wrap;word-break:break-all; 强制换行 white-space:nowrap;强制不换行
CSS3的一些冷知识：
filter: blur(9px); css3模糊程度
backface-visibility:hidden; 转过去后隐藏，百度钱包的效果
border-image: url(../../../img/border.png) 30 30 stretch; // 后面参数为srretch的时候表示边框图片拉伸填充 为round的时候规格的铺满整个区域
// 边框图片：1.路径 2.边框向内偏移属性 可以是四个值 也可以两个 3.三个值 一个是重复repeat 一个平铺round 一个填充 st 什么东西
background:#000 url(1.jpg) 0 0/cover no-repeat/cover; background属性简写
-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 20%,rgba(250,250,250,1)); 倒影
// css3倒影必须加前缀：第一个值是倒影方向 above上below下 左右属性不变（需要给倒影留一个空白区域）， 第二个值是与原图间隔距离，第三个值是遮罩效果 可以背景图片也可以是渐变生成的透明图像
-webkit-text-stroke:2px red; css文字描边 -webkit-text-fill-color:transparent; 两个配合在一起用将形成镂空文字 <font color=#00ffff size=72> ← 无意间发现强大的很呐</font>
background-image:-webkit-linear-gradient(#eee,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent; 渐变文字
column-count:4;column-gap:140px;column-rule:20px solid #000; css3多列文本布局 // 简写：间距、样式、颜色
//> 第一个表示要分成几块 第二个表示每个块之间的间距 第三个表示在间距之间的样式 和border一样
<link rel="stylesheet" media="screen and (max-width:800px)" href="midia800.css"> 按media引入css
first-letter first-line等伪类 必须是块元素||行内块元素
filter:brightness(.5); 调整图片亮度 相当于盖个黑色背景框
mix-blend-mode: difference; 颜色差值 相当于正片叠底 具体上收藏夹看
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} 改变a链接访问过后的顺序
@medio 响应式如果是1366的分辨率 在写min-width{}写1400px
one.style.height=tu[0].offsetHeight+li[0].offsetHeight+"px"; 原声一定要加px
text-transform ：css控制字母大小写 Capitalize 英文拼音的首字母大写 Uppercase 英文拼音字母全大写 Lowercase 英文拼音字母全小写
div::-webkit-scrollbar {display:none} pc和移动端隐藏scroll滚动条
// 伪元素里after里换行：\A--------------------------white-space: pre-wrap；和这个配合使用
@font-face{font-family: "自定义";src: url('/example/css3/Sansation_Light.ttf'),url('/example/css3/Sansation_Light.eot'); } 引入css3字体
$(".box")[0].style.setProperty("--y",y)；transform: rotate(calc(20deg - 10deg * var(--y))); 必须var !!!css调用js变量的方法：
@keyframes：
animation:6个属性（名字，时间，动画方式，延迟，次数，是否反向）aa 2s ease 1s infinite [alternate normal];
animation-fill-mode:both;
animation-fill-mode: forwards;停留在最后一帧
animation-play-state:paused; 利用hover动画暂停 离开将从暂停位置继续播
js控制动画开始running both停留在动画中
jquery里需要这样写$(".clip-p").css("-webkit-animation-play-state","paused"); 属性不用大写，直接 -
HTML5：
<progress> html5加载新属性 <meter>进度条新属性
mouseenter 事件。对应mouseleave // 相当于mouseover，只有当穿过元素时才会触发
<a href="1.jpg" download="下载之后的图片名字"><img src="1.jpg" alt="W3School"></a> // html5 的下载属性 ，不兼容IE
$(".content").delegate(".div span","click",function(){}) // 与on不同的是【on是事件写在前面。这个是元素写在前面】要区分清楚
<a href="tel:13546698741">电话</a> 移动端直接拨打电话的
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
html+css乱七八糟的：
select { 去除下拉框默认样式 border: solid 1px #000;/*很关键：将默认的select选择框样式清除*/appearance:none;-moz-appearance:none;-webkit-appearance:none;}
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat calc(100% - .2rem) center/.5rem .5rem;
// *清除ie的默认选择框样式清除，隐藏下拉箭头
select::-ms-expand { display: none; }
user-select：none；禁止页面文字被选中
first-letter 在火狐下不支持￥符号 我擦 不能用了，慎用啊
vertical-align: text-top; 这个属性是给行元素设置垂直居中的，属性值较多 先在父元素上设置line-height 以免引起反作用
<link rel="SHORTCUT ICON" href="images/22.ico"/> 改变网页显示的图标icon
// 使用after伪类添加序列号 ------------------
// ol {list-style-type:none;counter-reset:sectioncounter;}
// ol li:before { content:"美女" counter(sectioncounter) "： ";counter-increment:sectioncounter;}
\\ js改变after伪类问题，给元素加一个类名，类名里添加content attr
p:after {content: "111111111111111";}
p.change:after {content: attr(aa);}
$("p").addClass('change').attr("aa","content111111111111");
// 另一种修改方法
var css=function(t,s){
s=document.createElement('style');
s.innerText=t;
document.body.appendChild(s);
};
document.onclick=function(){
css('p:after{content:"5565442321"}');
\\ }
window.open("https://www.baidu.com/s?wd=" + val ); // 网站搜索功能
// 第三方登录实现：1 注册成为QQ互联平台开发者，http://connect.qq.com/; 2 准备一个可访问的域名，如dev.foo.com;3 创建网页应用，配置必要信息，其中包括域名以及回调地址；其中域名需要验证，需确保对域名主机有足够的控制权限;4 获取应用appID、appKey进行开发;
// 360使用低版本兼容模式IE内核，加这两句转换为webkit<!--避免IE使用兼容模式--><metahttpequiv="X-UA-Compatible" content="IE=edge">
// <meta name="renderer" content="webkit"> <!--使用webkit内核-->
animate.css: 第三方动画库常用的几个类名，都要添加一个共同类名：animated
JavaScript：
window.getComputedStyle(objs[0],null).width, 获取元素的实际宽度的 null为伪元素 如果没有就null（你会用到的 哼哈）
getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称），例如：
window.getComputedStyle(element, null).getPropertyValue("float");
event.stopImmediatePropagation(); 阻止事件捕获 dom3新出的
// javascript：父元素.insertBefore(要插入的,插入到我前面);
// jquery: $("<span>插入到p元素前面</span>").insertBefore("p");
沃茨法克，
