标签 css 下的文章
css两端对齐布局
先上个Demo<!DOCTYPE html><html><head><title>两端对齐</title></head> <style type="text/css"> *{margin: 0;padding: 0;font-size: 18px;} .zuoyou{text-align:justify;text-align-last:justify;} ul{text-align:justify; text-align-last:justify;} li{display:inline-block;} </style> <body> <div class="zuoyou">这是一段测试文字</div> <ul> <li>第一</li> <li>第二</li> <li>第三</li> </ul> </body></html>实际效果一、div下的文本左右两端对齐让<div class="zuoyou">这是一段测试文字</div>这段文字左右端对齐，最开始只用text-align:justify;发现并没有效果，后来查资料说这个东西要求文字超过一行，于是就又加了句text-align-last:justify;。text-align:justify;→句子除了倒数第一句外，其他句子两端对齐text-align-last:justify;→句子的倒数第一句两端对齐二、列表元素的两端对齐这里那ul li举例，其中text-align:justify;和text-align-last:justify;同上，li的display:inline-block;是让三个li标签在同一行。display:inline-block;→不独占一行的块级元素注意li标签和li标签之间需要有回车或者空格，demo中三个li标签，用了一个空格和一个回车，测试都没问题。也就是说不能这么写<li>第一</li><li>第二</li><li>第三</li>要这么写<li>第一</li> <li>第二</li> <li>第三</li>不仅如此，对于IE8浏览器，列表元素不能处在font-size:0的环境下，至少code>font-size:1px，因为IE8浏览器font-size:0或直接把换行空格或普通空格抹掉而无法实现两端对齐效果。如果纠结ie6/7的话，可以看看真正大佬的文章http://www.zhangxinxu.com/wordpress/2011/03/displayinline-blocktext-alignjustify%E4%B8%8B%E5%88%97%E8%A1%A8%E7%9A%84%E4%B8%A4%E7%AB%AF%E5%AF%B9%E9%BD%90%E5%B8%83%E5%B1%8...
阅读文章
纯CSS显示JS/HTML等源代码行数
代码如下.code { padding: 10px 10px 10px 40px; font-size: 13px; line-height: 18px; background-color: #eee; font-family: "Lucida Console", Consolas, Monaco; white-space: pre-wrap; word-break: break-all; position: relative; overflow: hidden; } .code::before { content: '01.\A 02.\A 03.\A 04.\A 05.\A 06.\A 07.\A 08.\A 09.\A 10.\A 11.\A 12.\A 13.\A 14.\A 15.\A 16.\A 17.\A 18.\A 19.\A 20.\A 21.\A 22.\A 23.\A 24.\A 25.\A 26.\A 27.\A 28.\A 29.\A 30.\A 31.\A 32.\A 33.\A 34.\A 35.\A 36.\A 37.\A 38.\A 39.\A 40.\A 41.\A 42.\A 43.\A 44.\A 45.\A 46.\A 47.\A 48.\A 49.\A 50.\A 51.\A 52.\A 53.\A 54.\A 55.\A 56.\A 57.\A 58.\A 59.\A 60.\A 61.\A 62.\A 63.\A 64.\A 65.\A 66.\A 67.\A 68.\A 69.\A 70.\A 71.\A 72.\A 73.\A 74.\A 75.\A 76.\A 77.\A 78.\A 79.\A 80.\A 81.\A 82.\A 83.\A 84.\A 85.\A 86.\A 87.\A 88.\A 89.\A 90.\A 91.\A 92.\A 93.\A 94.\A 95.\A 96.\A 97.\A 98.\A 99'; position: absolute; top: 10px; bottom: 10px; left: 0; text-align: right; background-color: #fbfbfb; color: #333; outline: 100px solid #fbfbfb; clip: rect(-100px 2em 9999px 0); /* IE9+ */ clip: rect(-100px 3.5ch 9999px 0); overflow: hidden; }CSS构建代码行数的原理如下：使用::before伪元素content属性生成，这样不用担心网页框选复制代码的时候行数序号会污染。使用A控制字符的换行。::before伪元素绝对定位在左侧，祖先元素设置overflow:hidden隐藏多余的行数。核心CSS代码示意如下：.code { position: relative; overflow: hidden; } .code::before { content: '01.\A 02.\A 03.\A 04.\A 05.\A 06.\A 07.\A 08.\A 09.\A 10.\A 11.\A 12.\A 13.\A 14.\A 15.\A 16.\A 17.\A 18.\A 19.\A 20.\A 21.\A 22.\A 23.\A 24.\A 25.\A 26.\A 27.\A 28.\A 29.\A 30.\A 31.\A 32.\A 33.\A 34.\A 35.\A 36.\A 37.\A 38.\A 39.\A 40.\A 41.\A 42.\A 43.\A 44.\A 45.\A 46.\A 47.\A 48.\A 49.\A 50.\A 51.\A 52.\A 53.\A 54.\A 55.\A 56.\A 57.\A 58.\A 59.\A 60.\A 61.\A 62.\A 63.\A 64.\A 65.\A 66.\A 67.\A 68.\A 69.\A 70.\A 71.\A 72.\A 73.\A 74.\A 75.\A 76.\A 77.\A 78.\A 79.\A 80.\A 81.\A 82.\A 83.\A 84.\A 85.\A 86.\A 87.\A 88.\A 89.\A 90.\A 91.\A 92.\A 93.\A 94.\A 95.\A 96.\A 97.\A 98.\A 99'; position: absolute; }对，方法比较傻，就是一口气把99行序号在CSS中埋伏好。CSS方法实现的优缺点优点：简单，高效，性能十足，即使代码变来变去布局也OK。缺点：支持的行数有限，例如上面的demo最多支持99行代码。如果代码行数惊人，例如上千行，则建议辅助JS去生成序号，例如构建一段包含content内容的<style>插入到页面中。兼容性方法至少IE9+浏览器支持，IE8浏览器理论上支持。声明：以上内容转自http://www.zhangxinxu.com/wordpress/2018/02/pure-css-js-html-code-line-number/下面说说我是如何将其投入使用的吧！1，如何解决上文提到的→支持的行数有限，例如上面的demo最多支持99行代码？我是直接用php循环语句写了个循环，直接输出了个支持到8000行的css代码，理论上足够够用了【因为基本上没人会在网页上写上万行代码！】，css文件最终定格60多k的大小(捂脸)。2，为什么想用纯css的？在给博客代码高亮换成prismjs时，prismjs官网虽然可以选择行号组建，但是总会出现些问题（博主忘记问题是啥了，毕竟过去好几天了），然后就百度纯css的看看有没有前辈折腾过，没想到还真有，而且文章还挺新鲜的（2018年发表的），于是就想尝鲜3，感受文章开始处的padding-left 40px参数是给行号挪位置的，最初弄时可以设置的小一点，这样就方便看行号是否和代码对应上，没有错位！.code::before的top参数和bottom参数和.code的padding的top和bottom参数一...
阅读文章
模板层面向typecho编辑器页面插入代码
上篇文章《模板层面向 typecho 编辑器页面插入 css js》中讲到一种向编辑器中插入css的奇葩方式，某些时候那么写确实能解决不少问题。但是但是，文章编辑界面源代码中是加载了jquery的，但是在页面偏底部，而上篇文章中讲到的方法是插在jquery代码之上的，也就是说那种方法如果插入js代码的话，就不能依赖jquery，除非在引用一个。基于以上原因，我又想到中方式，插件的那种方式，经过试验我发现插件上的方法在模板中也完全可以。在模板functions.php中加入以下代码即可Typecho_Plugin::factory('admin/write-post.php')->bottom = array('myyodu', 'one'); Typecho_Plugin::factory('admin/write-page.php')->bottom = array('myyodu', 'one'); class myyodu { public static function one() { ?> 你的css代码或者js代码，js可以依赖jquery来书写 <?php } }例如实现上篇文章《模板层面向 typecho 编辑器页面插入 css js》的代码Typecho_Plugin::factory('admin/write-post.php')->bottom = array('myyodu', 'one'); Typecho_Plugin::factory('admin/write-page.php')->bottom = array('myyodu', 'one'); class myyodu { public static function one() { ?> style>.wmd-button-row {height:auto;}.copyright p:after {content: "YoDu魔法优化中";margin-left: 6px;font-size: 12px;}</style> <?php } }当然这样可玩性就高了，下图展示个我的一个小成果，模板层面向编辑器中加入字数统计功...
阅读文章
css视口单位vw,vh的妙用(embed篇)
视频demo 如上视频[av9214469]，使用的是embed标签，大家都知道embed的播放器很难自适应，不是过分拉伸改变视频比例，就是写死播放器长宽，导致不能随网页大小的变化自由变换尺寸。前天，在往博客上折腾B站视频时，无意间灵机一动，想到了个好主意，就是使用vw单位，配合使用calc。只需级行css就解决了核心css代码，锁死视频比例16:9embed { height: calc(9 * 100vw/ 16);width: 100%; }宽度设置为100%,宽度铺满父级div【假设父级div就是真个屏幕】，高度设置为屏幕的宽度乘以9/16。因为刚刚【假设父级div就是真个屏幕】这样假设了下，实际用起来肯定是多种情况的，比如我的博客电脑端是有侧边栏的，文章的div也是有边距的，而手机端只有边距没有侧边栏。其实只需要做个数学题就好。这里我得电脑端测栏加边距的宽度大约是330px,手机端的边距太小就忽略不算了对应的css就是这样@media only screen and (min-width:768px){ embed{height: calc(9 * (100vw - 330px)/ 16); width: 100%;} } @media only screen and (max-width:767px){ embed{ height: calc(9 * 100vw/ 16);width: 100%;} }其实就是对于电脑端设备，在宽度设置上，提前减去330px，然后在乘9/16。原理就是这样，因为我也没有去仔细计算我的模板边距测栏宽度总和是多少，所以比例不可能特别精准，还有就是现在iframe同样可以用上述方法。本来，文章写道这里就应该结束了，但是突然想到了香菇社长那个超宽的屏幕，仅仅是上述代码肯定会导致一个问题，视频高度可能会超出屏幕的高度。怎么办呢？想了一下，觉得这样比较简单！在电脑端css加入下面的东东max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/ max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度的16/9*/这样不管屏幕多奇葩，应该也能保证视频播放器尺寸16:9了哈！如果想要其他尺寸对应的数字改一下就好了。至于有黑边问题，这个原因有很多，视频素材比例问题？embed播放器尺寸问题？...
阅读文章
CSS视口单位的一次深度使用
什么是视口单位？在CSS规范中，有4种类型的可用视口单位：vw — 1vw 等于视口宽度的 1%vh — 1vh 等于视口高度的 1%vmin — vw 和 vh 中的较小值vmax — vw 和 vh 中的较大值视口，即浏览器屏幕大小，1vw 等于浏览器宽度的 1%，100vw 即整个浏览器的宽度。简单来说，它和px,rem一样就是个单位，适当的使用这种单位有时候能出奇效。注：IE9使用vm代替vmin。它不支持vmax。澄清：1vmax等于1vh在纵向模式，而在横向模式下，1vmax将等于1vw。个人建议：使用视口给元素设置宽高时，为了避免比例不协调，使用同一个单位比较好，如vmin、vmax。兼容性IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持博主使用情况我在 https://tool.qqdie.com/ 上就深度使用了这个单位，甚至字体大小都用这个设置的。费了很久的时间去调试，现在在我电脑上看已经感觉可以了但是，如果你的显示器很大，那么字体也会超乎寻常的大还有就是高度设置成100vh在一些手机浏览器上显示上有些奇怪，100vh应该是铺满全屏，但是在手机浏览器上却可以滚动，相当于高度设置多了，猜测原因是视口可能计算了手机整个屏幕的视口，而不是浏览器视口。yodu模板上只有一处使用了视口单位，因为写模板时已经忘记这个单位了，后来因为模板有个地方不是很美观求助香菇时，他提到了这个才想起来，于是用上了下。博主评价正常写模板建议还是主要用px，rem等传统单位，视口单位作为辅助单位比较好。视口单位，解决某些问题会有奇效，但是如果作为主要单位使用时会很坑....
阅读文章
简单仿腾讯TIM界面
昨天下午，突然想用css写出个腾讯TIM的界面，于是开始搞，只写了个单页，没有javascript。预览地址：https://qqdie.com/areyouok/tim/为了保证美观度我限制了屏幕尺寸宽度低于800px或者高于1920px不会显示，大屏幕的需要调小窗口才能看哈。断断续续的撸了五个小时才撸出来的，并没有严格按照tim的比例来仿，只是单纯用肉眼来仿。一些小细节的地方我真的暂时做不出来。以上一个来自渣渣的作品，后续可能完善也可能弃坑，因为发现并无卵...
阅读文章
多说css的本地化教程
为什么要本地化css？因为我发现在某些网络下，https渠道的多说的css无法加载，所以我就本地化了多说的css。多说js本地化的教程大家都很熟悉了吧，其实本地化css也很类似。步骤一首先让自己的网站不再加载多说的css，需要将多说代码中的var duoshuoQuery = {short_name:"多说缩略名"};改为var duoshuoQuery = {short_name:"多说缩略名",theme:"none"};这样你的网站的多说就不会加载多说的默认主题了，不影响多说的自定义css哦。步骤二下载多说的css，首先去多说后台找到设置→外观，看一下自己用的是哪个主题外观，对应的下载下面的链接地址。默认主题：http://static.duoshuo.com/styles/embed.default.css暗色线框主题：http://static.duoshuo.com/styles/embed.dark.cssBlueBox：http://static.duoshuo.com/styles/embed.bluebox.css步骤三将多说自定义css里面的css剪切到步骤二下载好的css的后面，然后你将得到一份完整的的属于自己的css。将这个css传到自己的主机，然后让网站引用该css即可。补充说明多说css里面有很多的多说相关的图片，这个根据需要也可以将图片下载下来，然后传到主机，再将原本css里引用的图片改成自己的图片地址，不去依赖多说。因为图片很多这里就不一一说明...
阅读文章
多说显示博主[纯css实现]
多说显示博主标记也不是什么新鲜东西了，大多说都是改动js的，好麻烦的说。前两天@Hran分享给我了无公害的纯 css 实现方法就是在多说自定义的css中加入下面的代码，除判断部分均可自行更改#ds-thread #ds-reset a.ds-user-name[data-user-id='这里是你的多说id']:after { content: "博主"; margin-left: 6px; font-size: 12px; color: #13BF20; background: rgba(255, 255, 255, .35); border-radius: 4px; padding: 0 3px; }拓展你也可以用它判断别人的id，可以加些称号神马的。如图:+感谢Hran：https://hran.m...
阅读文章