笔记

月亮也烦

月亮也烦|css3做曲边阴影

发布于 昨天 22:48 浏览:16 类型:原创 - 随笔 分类:HTML/CSS 举报

css代码效果预览<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>CSS3生成曲边阴影和翘边阴影</title><linktype="text/css"rel="stylesheet"href="css/style.css"><style>body{font-family:arial;font-size:20px;}body,ul,li{margin:0px;padding:0px;list-style:none;}. ...

lanqunliang

lanqunliang|CSS3 2D与3D转换

发布于 昨天 18:06 浏览:35 类型:原创 - 随笔 分类:HTML/CSS 举报

2D转换2D转换方法:translate()rotate()scale()skew()matrix()实例div{transform:rotate(30deg);}3D转换transition简写属性,用于在一个属性中设置四个过渡属性。transition-prope ...

君邪儿

君邪儿|收集 学习css3文本阴影

发布于 昨天 17:35 浏览:31 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">.h5course{width:700px;height:200px;line-height:200px;text-align:center;font-size:40px;font-family:"微软雅黑";background:#ccc;font-wei ...

lqm123

lqm123|canvas 爱心和彩虹雨

发布于 昨天 17:22 浏览:71 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!doctypehtml><html><head><metacharset="utf-8"><title></title></head><body><canvasid="canvas"></canvas><script>varcanvas=document.getElementById('canvas'),ctx=canvas.getContext('2d'),canvasW=canvas.width=window.innerWidth,canv ...

ShanaFang

ShanaFang|记录一下css图形(以后慢慢增加)

发布于 昨天 17:22 浏览:47 类型:原创 - 随笔 分类:HTML/CSS 举报

为了防止自己忘记,登记一下。html代码效果预览<style>.heart{position:relative;width:40px;height:40px;background-color:rgba(255,0,0,.5);margin:100pxauto;transform:rotate(45deg);}.heart:befo ...

greenhand

greenhand|瀑布流布局

发布于 昨天 17:19 浏览:65 类型:原创 - 随笔 分类:HTML/CSS 举报

折腾:瀑布流布局(基于多栏列表流体布局实现)CSS3多列实现的瀑布流html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>body{background-color:#f6f6f6;}.container{width:80%; ...

15719493082

15719493082|CSS自动换行的问题

发布于 昨天 16:55 浏览:39 类型:原创 - 随笔 分类:HTML/CSS 举报

<p>标签不设置自动换行时会继续向后写单词,可以使用word-break:break-all和word-wrap:break-word来换行两者的区别是word-break:break-all简单粗暴直接将一个完整的单词拆开显示;而word-wrap:break-word;是尝试将整个单词挪在下一 ...

892852158

892852158|38活动总结

发布于 昨天 16:51 浏览:36 类型:原创 - 随笔 分类:HTML/CSS 举报

本次的活动遇到的问题有些,现在总结一下;1.移动端的开发用的是rem单位,但是在少数手机里面,依然出现了布局乱掉的问题,最后用box-sizing,以及设置图片的宽度为100%来解决问题了,当时图片外面的li设置的是百分比,里面的图片用的是rem,所以才会出现这样的问题2.在测试库上背景图片很正常,但是在正式库上有些手机的 ...

lqm123

lqm123|图片向左循环滚动

发布于 昨天 14:39 浏览:67 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>test</title><style>.picutre_manyimg{width:100px;margin:010px;}</style></head><body><divid="list"class="picutre_many"style="overflow:hidden;height:100px;width:500px ...

lqm123

lqm123|JS实现图片的不间断连续滚动

发布于 昨天 14:22 浏览:61 类型:转载 - 随笔 分类:HTML/CSS 举报

js替代marquee实现图片无缝滚动可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动。先了解一下下面这几个属性:innerHTML:设置或获取位于对象起始和结束标签内的HTMLscrollHeight ...

小水晶

小水晶|记录自己经常用的东西

发布于 昨天 10:59 浏览:104 类型:原创 - 随笔 分类:HTML/CSS 举报

css代码效果预览.data-loading.spinner{margin:20pxauto;width:26px;height:26px;text-align:center;-webkit-animation:rotate2.0sinfinitelinear;animation:rotate2.0sinfinitelinear;}@-webkit-keyframesrotate{100%{-webkit-transform:rotate(360deg)}}@keyframesrotate{100%{ ...

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>导航栏</title><styletype="text/css"> ...

kevinzhou

kevinzhou|web前端缓存控制

发布于 昨天 10:22 浏览:87 类型:原创 - 随笔 分类:HTML/CSS 举报

对一个网站而言,css,javascript,logo,图标等静态资源更新并不是十分频繁,这些资源缓存到浏览器本地,可以极大地优化网站性能,通过设置http请求头的cache-control和expires属性,来设定浏览器缓存。cache-control写法:<metahttp-equiv="cache-control"content="no-cache">常见值有:1.private,内容只缓存到私有 ...

Silly_Bo

Silly_Bo|求传入任意多个数的最大值

发布于 前天 20:35 浏览:51 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><script>//求传入的任意多个参数的最大值functionmax(){varmax=arguments[0];for(vari=1;i<arguments.length;i++){ ...

missFanny

missFanny|全兼容多列等宽布局

发布于 前天 18:40 浏览:105 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!doctypehtml><html><head><metacharset="UTF-8"><metaname="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><metaname="format-detection"content="telephone=no,email=no,date=no,address=no"><title>多 ...

lanqunliang

lanqunliang|css3选择器介绍

发布于 前天 18:36 浏览:79 类型:原创 - 随笔 分类:HTML/CSS 举报

一、选择器1:first-of-type(:last-of-type)匹配属于其父元素的特定类型的首个子元素的每个元素例子:p:first-of-type{background:#ff0000;}2:only-of-type匹配 ...

xu1101867009

xu1101867009|1111111少时诵诗书

发布于 前天 13:47 浏览:100 类型:原创 - 随笔 分类:HTML/CSS 举报

11111html代码效果预览<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><linkhref="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css"re ...

console

console|填坑之微信web页面字体自动变大

发布于 前天 11:16 浏览:183 类型:原创 - 教程 分类:HTML/CSS 举报

微信开发,那叫一个坑爹啊,不好调试,然后还只有产品总监的6p有问题,找测试部拿了两台6p测试都没有问题,毕竟我是做的rem自适应,然后debug首先得找到为什么会产生这个问题,对比了两台手机的字体大小设置以及字体增大的设置,设置成一样,发现问题还是在,然后对比系统版本,测试的是10.2的,产品总监的是10.0的,可是 ...

qq2020

qq2020|demo 首页

发布于 前天 09:58 浏览:85 类型:原创 - 随笔 分类:HTML/CSS 举报

全选全全全全全全全全全 ...

君邪儿

君邪儿|css如何让图片不变形?

发布于 前天 09:20 浏览:209 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><linkrel="stylesheet"type="text/css"href="css/common.css"/><styletype="text/css">img.img1,img.img2{max-width:200px;max-height:100px;/*将img1img2缩放*/scale:expression((thi ...