LOFTER for ipad —— 让兴趣,更有趣

点击下载 关闭

LOFTER-网易轻博

css

5285浏览    2194参与
安

请问一下,怎么把二维码往下移动些

请问一下,怎么把二维码往下移动些

居安

Chrome浏览器设置font-size<12px无效的解决方法

  1. 在body中添加css: -webkit-text-size-adjust: none;(Chrome29版本之后无效)

  2. 使用缩放:-webkit-transform: scale(0.9);
    为了仅针对Chrome浏览器可在后面添加-moz-transform:scale(1);-khtml-transform:scale(1);此时火狐和Safari浏览器不会受缩放影响。
    此外可根据需求修改缩放中心:
    transform-origin: 50% 50% 0; /*中心点(默认值)*/
    transform-origin: 100% 100% 0; 
    /*右下角*...

  1. 在body中添加css: -webkit-text-size-adjust: none;(Chrome29版本之后无效)

  2. 使用缩放:-webkit-transform: scale(0.9);
    为了仅针对Chrome浏览器可在后面添加-moz-transform:scale(1);-khtml-transform:scale(1);此时火狐和Safari浏览器不会受缩放影响。
    此外可根据需求修改缩放中心:
    transform-origin: 50% 50% 0; /*中心点(默认值)*/
    transform-origin: 100% 100% 0; 
    /*右下角*/
    transform-origin: 0 0 0; 
    /*左上角*/

5981192
东方双子座

《CSS权威指南(第四版)》这套书实在是太厚了,差不多抵得上第三版的三本书,看得我怀疑CSS生。以前自认为CSS写得还行,读完之后,抑制不住激动的情绪:“嗯,没错了,CSS已达入门级别!”我太难了!难得我,每天夜里,明明都困得睁不开眼了,可就是——睡不着!

《CSS权威指南(第四版)》这套书实在是太厚了,差不多抵得上第三版的三本书,看得我怀疑CSS生。以前自认为CSS写得还行,读完之后,抑制不住激动的情绪:“嗯,没错了,CSS已达入门级别!”我太难了!难得我,每天夜里,明明都困得睁不开眼了,可就是——睡不着!

a  ゞ◎Please Come Back

Brackets 前端开发工具

Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe创建和维护,根据MIT许可证发布,支持 Windows、Linux 以及 OS X 平台。
  Brackets 的特点是简约、优雅、快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等。


转自:前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑

Github项目

Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe创建和维护,根据MIT许可证发布,支持 Windows、Linux 以及 OS X 平台。
  Brackets 的特点是简约、优雅、快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等。


转自:前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑

Github项目

逆风网络安全团队
落落
Yue's Blog

DEMO-MENU_Ul_Li【html/css/javascript综合运用】

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{margin...

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{margin:0;

     padding:0;

     font-size:13px;

     list-style:none;}

 

.menu{width:210px;

      margin:50px auto;

      border:1px solid #ccc;}

 

.menu p{height:25px;

        line-height:25px;

        font-weight:bold;

        background:#eee;

        border-bottom:1px solid #ccc;

        cursor:pointer;

        padding-left:5px;}

 

.menu div ul{display:none;}

 

.menu li{height:24px;

         line-height:24px;

         padding-left:5px;}

</style>

    <script type="text/javascript">

    window.onload=function(){

 

      // 将所有点击的标题和要显示隐藏的列表取出来

    var ps = document.getElementsByTagName("p");

    var uls = document.getElementsByTagName("ul");

 

     // 遍历所有要点击的标题且给它们添加索引及绑定事件

    for(var i = 0, n = ps.length; i <n; i += 1){

 

        ps[i].id = i;

        ps[i].onclick = function(){

            for(var j = 0; j < n ; j += 1){

               uls[j].style.display = "none";

            }

            uls[this.id].style.display = "block";

        }

     // 获取点击的标题上的索引属性,根据该索引找到对应的列表

    }

     // 判断该列表,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来

 }

    </script>

</head>

<body>

    <div class="menu" id="menu">

        <div>

            <p>Web前端</p>

            <ul style="display:block">

                <li>JavaScript</li>

                <li>DIV+CSS</li>

                <li>jQuery</li>

            </ul>

        </div>

        <div>

            <p>后台脚本</p>

            <ul>

                <li>PHP</li>

                <li>ASP.net</li>

                <li>JSP</li>

            </ul>

        </div>

        <div>

            <p>前端框架</p>

            <ul>

                <li>Extjs</li>

                <li>Esspress</li>

                <li>YUI</li>

            </ul>

        </div>

    </div>

</body>

</html>




不负好时光
不负好时光
刘决义 Just

css 单选、多选按钮 - mark

HTML

<!--单选-->

<label>

<input class="radio-inp" hidden="hidden" type="radio">

<span class="cur-radio"></span>

</label>

<!--多选-->

<label>

<input class="checkbox-inp" hidden="hidden"...

HTML

<!--单选-->

<label>

<input class="radio-inp" hidden="hidden" type="radio">

<span class="cur-radio"></span>

</label>

<!--多选-->

<label>

<input class="checkbox-inp" hidden="hidden" type="checkbox">

<span class="cur-checkbox"></span>

</label>



CSS

.cur-radio,.cur-checkbox{

    display: block;

    position: relative;

    font-size: 14px;

    float: left;

    cursor: pointer;

}

//单选

.cur-radio:after{

    width: 14px;

    height: 14px;

    display: block;

    position: relative;

    float: left;

    border: 1px solid rgba(0,0,0,0.2);

    background-color: #ffffff;

    border-radius: 100%;

    content: "";

    margin-right: 10px;

    box-sizing: border-box

}

.radio-inp:checked+.cur-radio:after{

    display: block;

    position: relative;

    float: left;

    border: 5px solid #0080d1;

    background-color: #ffffff;

    border-radius: 100%;

    content: ""

}

//多选

.cur-checkbox:before{

    width: 14px;

    height: 14px;

    display: block;

    position: relative;

    float: left;

    margin-right: 10px;

    border: 1px solid #c2d4df;

    background-color: #ffffff;

    content: "";

    -moz-border-radius:3px;

    -webkit-border-radius:3px;

    border-radius:3px;

}

.checkbox-inp:checked+.cur-checkbox:before{

    border: 5px solid #0080d1;

    background-color: #ffffff;

    content: ""

}

wxzob666

css中link和@import的区别

转自http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
XML/HTML代码
<style type="text/css" media="screen...

转自http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
XML/HTML代码
<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>  

两者都是外部引用CSS的方式,但是存在一定的区别:

  区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS

  区别2:link引用CSS时,在页面载入时同时加载@import需要页面网页完全载入以后加载。(记忆:link像迅雷,充了会员以后下种子能边下边看,效率更高;而@import就像是司令发号令,加载完毕后才可以行动)

  区别3:link是XHTML标签,无兼容问题@import是在CSS2.1提出的,低版本的浏览器不支持

  区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持

补充:@import最优写法
@import的写法一般有下列几种:

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

wxzob666

为什么不建议用table布局

转自https://www.html5tricks.com/why-not-table-layout.html


Table要比其它html标记占更多的字节。

(延迟下载时间,占用服务器更多的流量资源。)





Tablle会阻挡浏览器渲染引擎的渲染顺序。

(会延迟页面的生成速度,让用户等待更久的时间。)





Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。

(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)





在某些浏览器中Table里的文字的拷贝会出现问题。

(这会让用户不悦。)





Table会影响其内部的某些布局属性的生效(比...

转自https://www.html5tricks.com/why-not-table-layout.html


Table要比其它html标记占更多的字节。

(延迟下载时间,占用服务器更多的流量资源。)





Tablle会阻挡浏览器渲染引擎的渲染顺序。

(会延迟页面的生成速度,让用户等待更久的时间。)





Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。

(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)





在某些浏览器中Table里的文字的拷贝会出现问题。

(这会让用户不悦。)





Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)

(这会限制你页面设计的自由性。)





一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。

(先花时间学一些CSS知识,会省去你以后大量的时间。)





table对对于页面布局来说,从语义上看是不正确的。

(它描述的是表现,而不是内容。)





table代码会让阅读者抓狂。

(不但无法利用CSS,而且会你不知所云)





table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。





istyles

怎么画一条0.5px的边

.hr.scale-half {

    height:1px;

    transform:scaleY(0.5);

    transform-origin:50%100%;

}

.hr.scale-half {

    height:1px;

    transform:scaleY(0.5);

    transform-origin:50%100%;

}

🌬View

css家大名鼎鼎的B5玻尿酸精华和色修精华

玻尿酸精华质地黏稠但很好吸收

咻咻就吸收了超棒

色修精华质地较水

上脸有一点凉凉的

也是很好吸收之后脸会有紧绷感

这两款精华建议晚上睡前使用

不适合妆前使用因为会搓泥

总体还是很好用的

性价比也很高

css家大名鼎鼎的B5玻尿酸精华和色修精华

玻尿酸精华质地黏稠但很好吸收

咻咻就吸收了超棒

色修精华质地较水

上脸有一点凉凉的

也是很好吸收之后脸会有紧绷感

这两款精华建议晚上睡前使用

不适合妆前使用因为会搓泥

总体还是很好用的

性价比也很高

ace-jammy
cosmetic skin s...

cosmetic skin solutions

olive serum

advanced formula+

橄榄修复舒敏精华

30ml


使用感很好。

我使用的时候皮肤并没有敏感起痘之类,图个维稳。

cosmetic skin solutions

olive serum

advanced formula+

橄榄修复舒敏精华

30ml


使用感很好。

我使用的时候皮肤并没有敏感起痘之类,图个维稳。

小武

px、em、rem、rpx 用法 与 区别

这篇文章记录前端(包含小程序)开发中常用到的几个单位 px、em、rem、rpx 的区别和用法。

px

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 
1. IE无法调整那些使用px作为单位的字体大小; 
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 
3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体...

这篇文章记录前端(包含小程序)开发中常用到的几个单位 px、em、rem、rpx 的区别和用法。

px

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 
1. IE无法调整那些使用px作为单位的字体大小; 
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 
3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 EM特点 
1. em的值并不是固定的; 
2. em会继承父级元素的字体大小。

注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。 
所以我们在写CSS的时候,需要注意两点: 
1. body选择器中声明Font-size=62.5%; 
2. 将你的原来的px数值除以10,然后换上em作为单位; 
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

实例

body{  font-size:62.5%;}

.banner{  width:30em;}

rem

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。

前端使用rem的实例

functiongetInitStyle() {const width = window.document.documentElement.clientWidth > 768 ? 768 : window.document.documentElement.clientWidth;  const height = window.document.documentElement.clientHeight;  const maxWidth = (window.document.documentElement.clientWidth <= 768 || height * 2 / 3 > width) ? width : height * 2 / 3;  document.documentElement.style.fontSize = `${maxWidth / 7.5}px`;  document.body.style.width = `${maxWidth}px`;}

由于设计稿使用的屏幕宽度为750,所以此时rem与设计稿上px的换算关系为 1rem = 100px

rpx

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。 
rpx 为小程序中使用的相对单位,用法和rem类似, 1rpx = 屏幕宽度/750 px, 所以在屏幕宽度为750的设计稿中,1rpx = 1px。


小武

小程序( rpx、px、rem )

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。


无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px。


微信小程序同时也支持rem尺寸单位, rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx


rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。


无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px。




微信小程序同时也支持rem尺寸单位, rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx


LOFTER

让兴趣,更有趣

简单随性的记录
丰富多彩的内容
让生活更加充实

下载移动端
关注最新消息