CSS3
文章平均质量分 60
xiaobing_hope
这个作者很懒,什么都没留下…
展开
-
浏览器缓存小结
浏览器缓存是前端优化的一个重要手段,缓存可以带来很多好处:减少冗余数据传输,节省带宽减轻服务器的请求负担,有缓存就可以减少向服务器发送请求资源从缓存中读取,无需向服务器发送请求再等待返回,加快了客户端的访问速度但缓存带了了一个问题,就是如果文件更新了,但用户访问时浏览器读取的是缓存资源,则用户就获取不到最新的页面,影响用户使用。这种情况如何解决呢?浏览器缓存主要是指http缓存,其机制是根据http报文的缓存标识进行相应的操作。状态码含义200 from memory c原创 2021-04-01 15:09:27 · 240 阅读 · 0 评论 -
前端应用--工程化主题切换功能
随着各个应用平台和网站都开始支持深色模式,相较于传统的页面配色方案,深色模式具有较好的降噪性,也能让用户的眼睛看内容更加舒适。那么对于前端开发来说,如何高效的支持深色模式呢?这里的高效指的是工程化、自动化方案,不需要在开发过程中hard coding。PostCSS原理及相关插件能力postcss是一款使用JavaScript编写的用于编译css的工具,具有良好的插件性,非常有利于开发者扩展。原理: PostCSS接受一个css文件,并提供了插件机制,提供给开发者分析、修改css规则,具体实现方式是原创 2021-03-28 22:47:19 · 978 阅读 · 0 评论 -
css相关
css的优先级 行内样式(inline style)> ID选择符 > 样式(class)> 伪类(pseudo-class)和属性选择符(attribute)> 标签选择符伪类: a:link; a:visited等 伪对象选择器:div:first-letter; li: first-child(选择属于其父元素的首个子元素的第一个 li 元素)多重css样...原创 2017-10-25 17:34:26 · 274 阅读 · 0 评论 -
css3制作各种箭头及心形图的制作
css3制作各种箭头,桃心制作原创 2017-01-17 16:20:25 · 7621 阅读 · 0 评论 -
实现一个div,左边固定div宽度200px,右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left"></div> <div class="rigth"></div></div><style>/*方法一: BFC(块级格式化上下文)*/ .container{ width:10原创 2016-11-01 15:01:35 · 13726 阅读 · 3 评论 -
position:absolute详解
position:absolute日常开发中经常涉及元素的定位,我们都知道,绝对定位相对于最近position不为static的父级元素来定位,但其中定位的位置还是有细微的差别的。绝对定位根据left和top属性来规定绝对定位元素的位置。 但这个位置实际上与padding和父级相对定位的box-sizing有关的。* 默认盒子的box-sizing为content-box(即盒子所占据的宽度=wi原创 2016-12-13 14:52:08 · 115885 阅读 · 12 评论 -
css等比例分割父级容器(完美三等分)
css等比例分割父级容器(完美三等分) 父级容器的宽度一定,要实现子元素等比例完美均分父级宽度,实现方式有哪些?html部分代码:方法一: 浮动布局+百分比 (将子元素依次左浮动,根据子元素的个数,设定每个子元素的宽度百分比)方法二:行内元素(inline-block)+百分比方法三: 父元素 display:t原创 2016-04-30 11:30:13 · 76468 阅读 · 3 评论 -
css3溢出文本属性------text-overflow
css3溢出文本属性 text-overflow在网页制作中,经常遇到内容溢出的问题,如文章列表标题过长,而其宽度又受到限制,此时超出宽度的内容就会以省略标记(...)显示。以前实现这种效果是通过后台程序截取一定数量的字符在前端显示,或者是用js截取一定数量字符数显示,但是这两种方式都存在不足之处,如中文和英文的计算字符宽度不同等。css3新增的text-overflow属性就解决了这样的原创 2016-01-13 18:09:53 · 2972 阅读 · 0 评论 -
CSS3自定义滚动条样式 -webkit-scrollbar
CSS3自定义滚动条样式 -webkit-scrollbar有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢?Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。当然,兼容所有浏览器的滚动条样式目前是不存在的。滚动条的组成: ::-webkit-scrollbar 滚动条原创 2016-01-26 12:22:15 · 52347 阅读 · 0 评论 -
去掉点击出现的透明阴影--&&--去除iphone、ipad页面button默认样式--元素垂直居中
做好的页面在手机端测试时,发现部分浏览器,tap后会出现一个半透明的灰色背景,(被批...),起初以为是outline作怪,加上后发现没反应,最后发现是tap后的背景高亮,要重设这个表现,则需要设置-webkit-tap-highlight-color为所需色彩,直接透明吧:a,img,button,input,textarea{-webkit-tap-highlight-color:rgba原创 2015-12-04 14:53:08 · 2906 阅读 · 0 评论 -
浮动元素无法撑开父元素--解决方法
浮动元素无法撑开父元素--解决方法定义div元素浮动之后,无法撑开父级元素,当定义父级宽度足够时里面的元素才能够浮动显示如何解决不用定义父级元素宽度,里面的子元素可以浮动并且自动撑开父级框:方法一:将父元素也设置为浮动style="float: left" class="div0"> class="div1" style="float: left原创 2015-12-14 16:05:36 · 5566 阅读 · 0 评论 -
移动端css基本知识点
移动端css基本知识点PPI(Pixels per inch)也叫DPI(Dots Per Inch),表示的是每英寸所拥有的像素(pixel)数目。数值越高,代表显示屏能够以越高的密度显示图像。适用于移动端的DTD:<!DOCTYPEhtml PUBLIC"-//WAPFORUM//DTD XHTML Mobile1.0//EN" "http:/原创 2015-11-24 17:52:33 · 457 阅读 · 0 评论 -
3d相册弹出效果02
3d相册弹出效果02在3d相册基本的布局完成之后,接下来需要完成的是鼠标拖拽的效果。描述:鼠标向右移动,整个相册跟随鼠标旋转,向下移动时,整个相册的视角向下倾斜。主要涉及到鼠标按下,移动和抬起三个事件:鼠标按下事件:$(document).mousedown(function(e){var x = e.clientX; //获取鼠标按下点的坐标va原创 2015-09-13 16:35:00 · 525 阅读 · 0 评论 -
获取鼠标点击坐标等__颜色选择器的制作
获取鼠标点击坐标等__颜色选择器的制作效果图:做该效果的难点是js实现点击颜色选择器跟随鼠标移动。 这里使用jQuery实现该效果1. 编写html页面,放置页面所需要的元素。Index.html部分代码2.css样式因为颜色选择器要实现的是随着鼠标拖动移动的效果,所以初期需要将颜色选择器的position属性设置为absolute3.js动态效原创 2015-09-13 11:56:19 · 3026 阅读 · 1 评论 -
3d相册弹出效果01
3d相册弹出效果01效果图:效果描述:图片一张张从中间的一个图片相框中弹出,然后排布成圆形,鼠标拖拽,图片跟着动。 常规网页中,鼠标点击拖动的效果是:选中网页上的文字或者图片。而我们需要的是:鼠标点击拖动网页,相册整体跟随鼠标移动。这时,就需要禁止掉网页默认的鼠标选中属性。解决方案为:在标签中加入 onselectstart =”return false”原创 2015-09-12 12:12:11 · 752 阅读 · 0 评论 -
在CSS3中制作小三角形效果代码
使用CSS3实现小三角的制作:html代码: CSS3样式部分: .arrow-up{ width:0; height:0; border-left:30px solid transparent; border-right:30p转载 2015-05-26 16:38:06 · 4791 阅读 · 0 评论