css
关注
分享
扫一扫
文章平均质量分 62
gaoqiang1112
转前端了
展开
-
nth-child 和 nth-of-type 的区别 换个更合适的例子
nth-child<html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style> span:nth-child(4),span:nth-child(7){ color:red; } ...原创 2020-04-09 12:51:29 · 190 阅读 · 0 评论 -
css特效 波浪 技术=> css里的border-radio+旋转+位移
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #contant { position: relative; ...原创 2019-12-31 16:11:45 · 748 阅读 · 0 评论 -
css特效 变异电池 技术=> css的filter 中hue-rotate
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { width: 10...原创 2019-12-31 16:10:29 · 1002 阅读 · 1 评论 -
css 隐藏滚动条 ios中长按不选中页面内容兼容input可以正常输入
1 隐藏掉滚动条.diTuPage::-webkit-scrollbar { width: 0 !important }.diTuPage { -ms-overflow-style: none; }.diTuPage { overflow: -moz-scrollbars-none; }2 ios中长按不选中页面内容*{ -webkit-touch-callout:none...原创 2019-06-21 17:32:12 · 318 阅读 · 0 评论 -
如何给浏览器设置滚动条样式
/*覆盖默认滚动条样式*/ ::-webkit-scrollbar,scrollbar { border-radius: 15px; width: 10px; height: 130px; background-color: #fff; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track{ ...原创 2018-09-28 17:27:19 · 736 阅读 · 0 评论 -
css display：grid布局
简介CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。如我们所知，CSS 总是用于网页的样式设置，但它并没有起到很好的作用。刚开始的时候我们使用表格(table)，然后使用浮动(float)、 定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如...转载 2018-05-10 13:12:32 · 33332 阅读 · 3 评论 -
IE6常见兼容性问题
1、盒模型问题（1）DTD问题DTD：文档定义类型，规定了要遵循的书写规范。如果不写DTD，高级浏览器还是可以正常加载，IE6会以怪异模式进行加载。盒模型：正常应该是外扩的（实际占位会因为加了padding和border变大），IE6不写DTD是内减的（实际占位不变，padding和border的占位是向内的）。这也是HTML5的兼容性问题之一。 解决方法：必须写DTD。<!DOCTYPE...转载 2018-03-19 13:27:32 · 400 阅读 · 0 评论 -
兼容ie浏览器的写法
用户使用的浏览器五花八门，我们要保证每一种浏览器都能兼容我们的代码，不能要求用户去改变浏览器，那么就得在我们的代码上下功夫。此时我们要用到hack。HACK就是针对不同的浏览器写不同的HTML、CSS样式，从而使各种浏览器达到一致的渲染效果。下面我们就分别了解一下HTML的hack和CSS的hack。（一）、HTML的hackHTML的hack由注释<!-- -->演变而来，在高级浏...转载 2018-03-19 13:26:50 · 2012 阅读 · 0 评论 -
css3 制作手机常见的右上角响应式的折叠菜单效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { margin: 200px; border: 1px solid r原创 2018-03-01 15:18:23 · 2110 阅读 · 0 评论 -
css的兼容性写法
各浏览器兼容性css写法 /* 针对Chrome谷歌浏览器内核支持的CSS样式 */@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 /* 例如 .font1 {color:red} */} 针对Firefox浏览器的内核CSS写法： @-moz-document url-prefix(){ 样式 /* 例如 .f转载 2018-01-30 11:34:27 · 400 阅读 · 0 评论 -
px/em/rem的区别
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 px像素（Pixel）。相对长度单位。像素px是...转载 2018-02-09 11:51:41 · 447 阅读 · 0 评论 -
到底什么是响应式布局,响应式布局如何去写
即第一个问题--如何解决浏览器的兼容性被我们处理了之后,我们开始学习,如何解决响应式布局,到底什么是响应式布局其实响应式布局.说的通俗点,就是浏览你写的网站或者说页面的容器不同,大小不同,有人用手机.有人用平板,有人用笔记本电脑,有人用台式.由于你写的代码,在初期测试的时候,都是根据你的电脑尺寸设计的,所以,当浏览你写的页面的人的电脑和你的不一样时,页面就会发生变化,从而导致页面崩溃.那么原创 2017-09-08 14:07:38 · 13566 阅读 · 0 评论 -
css中一些小常识
一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边转载 2017-09-04 16:54:00 · 471 阅读 · 0 评论 -
web前端人员到底如何处理浏览器兼容,到底什么是浏览器兼容问题
浏览器兼容问题一直是一个难缠的问题,从你开始想成为一名程序员,到深入学习,从最开始什么都会懂,到开始写代码.从你研究页面到最后的面试.你经常能听到这个2个问题? 1.你是如何处理浏览器兼容问题的. 2.什么是响应式布局.这2个问题是提及最高,已经被问到最多的问题,是的,前端程序员这个是避免不了的.所以我才决定,放下学习其他js的时间,来写一个博客,让我们共同克服的这个问题这个博客,先说...原创 2017-09-08 10:40:44 · 17163 阅读 · 3 评论 -
css优先级
标签：1、相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。 2、权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式。下面是权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高原创 2017-09-04 14:56:44 · 207 阅读 · 0 评论