CSS
zhang-php
自己选择的路,自己喜欢的事,无论如何都可以坚持下去……
展开
-
php \n 符号换行无法输出
从接口拿到的json数组,数组中文字部分有换行,用json_decode转php数组后,输出在html页面竟然没有换行,一开始我以为是转数组后换行符号被删除了,后面用字符替换各种办法试了一遍,最后搜到了一个CSS样式:white-space属性指定元素内的空白怎样处理,默认值normal(空白会被浏览器忽略).........原创 2022-06-17 17:24:48 · 407 阅读 · 0 评论 -
css – Chrome中的圆角不起作用(图片元素)
加个边框border: 1px solid transparent; /*就是我,加我*/border-radius: 50%;原创 2022-05-27 14:29:16 · 212 阅读 · 0 评论 -
CSS动态循环指示箭头
.scrollarrows { width: 14px; height: 40px; margin-top: 10px; margin-left: 10px; }.scrollarrows path.a1 { animation-delay: -1s; -webkit-animation-delay: -1s; }.scrollarrows path.a2 { animation-delay: -0.5s; -webkit-animation-delay: -0.5s; }.scrollarrows.原创 2021-07-22 11:33:32 · 2380 阅读 · 5 评论 -
css 原生代码写loading圆环
.loader{ height: 50px; width: 50px; margin: 20% auto 0 auto; }.loader::after,.loader::before{ content: ""; width: 50px; height: 50px; position: absolute; border: solid 8px transparent; border-radius: 50%; -webkit-animation: circles 1.4s linear infinite; .原创 2020-10-30 10:11:26 · 555 阅读 · 0 评论 -
css控制文本只显示两行
text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;原创 2020-04-06 14:16:59 · 4244 阅读 · 0 评论 -
php把文章的px转换成rem
最近项目中写移动端,因为编辑器的内置样式,需要在移动端输出的时候改变字号以及单位,所以需要替换所有包含“px”,参考原文:http://www.thinkphp.cn/topic/59967.html我自己稍微做了一些修改,代码如下:/* * 替换移动端单位px --- rem * $content 文章内容 * $fontsize 手动指定字号*/public functio...原创 2019-04-04 16:44:56 · 347 阅读 · 0 评论 -
css强制水平垂直居中
/** flex **/div{ width: 100px; height: 100px; display: flex; justify-content: center; align-items: center;}原创 2019-03-20 11:53:31 · 1982 阅读 · 1 评论 -
web前端背景图填充问题,小图怎样填充到大分辨率页面的问题
首先来一个对比图,图片本身尺寸是宽 1440px 的,在本地(我的电脑是 1366px 的)背景填充正常,但是使用响应式调到1920px后变了,仔细一检查,样式写的有些问题,background-size 的cover属性可以拉伸图片,我写的 center是为了定位图片拉伸的位置,从哪个部分等比拉伸原:<div class="intro-main" style="background:...原创 2019-03-09 17:12:52 · 2203 阅读 · 0 评论 -
css写提示框(带小三角样式的)
第一种写法:<style type="text/css">/**样式**/.tooltip-boxs{ margin-top: 10px; width:180px; background: #666; border-radius: 8px; text-align:center; padding: 15px 1px; }.tooltip-boxs:after{ content...原创 2019-01-09 14:43:38 · 4501 阅读 · 0 评论 -
css写小三角形
<!DOCTYPE html><html><head> <meta charset="utf-8"> <tittle>三角形</tittle> <style> /*白色 #fff 可以替换成 transparent 透明色更好一些*/原创 2019-01-09 10:49:54 · 523 阅读 · 0 评论