css
关注
分享
扫一扫
幽幽靖
Happlyjingjing
展开
-
css——宽度不固定，水平居中
宽度不固定，水平居中<div id="box"> <div id="inner">11111111111111111111</div></div>1.相对定位： #box{position:relative; left:50%; float:left;} #inner{position:relative; left:-50%;}需考虑浮动带来的问题2.利用diplay:table来解决：#box{ display:table;原创 2022-04-04 19:22:45 · 447 阅读 · 0 评论 -
css 之table td 内容超出 ... 显示，不撑开td ，不换行，... 显示样式方法
.conlistbox { position: relative; width: 100%; font-size: 14px; line-height: 40px; color: #333; table-layout: fixed; // 这里是重点！！} th, td { width: 100px; height: 40px; padding: 0 5px; box-sizing: bord原创 2020-09-06 17:46:31 · 2753 阅读 · 0 评论 -
css 之 :nth-child 选择元素！奇偶数、第n个开始的直到最后、第1个到第n个、第n个到第n个
一、选择列表中的偶数标签 :nth-child(2n)二、选择列表中的奇数标签 :nth-child(2n-1)三、选择从第6个开始的，直到最后:nth-child(n+6)四、选择第1个到第6个 :nth-child(-n+6)一、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9)参考链接：http://www.mamicode.com/info-detail-3024142.html...原创 2020-07-09 15:57:04 · 12825 阅读 · 0 评论 -
css 之 4.4清明节全站黑白显示、网页黑白显示、网页图片黑白样式效果
<!-- 复制下面的代码，放在你的网站<head></head>之间即可实现全站黑白显示。 --><style> html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1...原创 2020-04-04 09:11:29 · 691 阅读 · 0 评论 -
less学习笔记
官网：http://lesscss.cn/安装：在服务器上安装Less的最简单方法是通过node.js程序包管理器npm ，如下所示：$ npm install -g less命令行用法安装后，您可以从命令行调用编译器，如下所示：$ lessc styles.less这会将编译后的CSS输出到stdout。要将CSS结果保存到您选择的文件中，请使用：$ lessc styles...原创 2020-02-29 18:42:25 · 196 阅读 · 0 评论 -
html css (wap) 网页基础配置
wap:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">例：<!DOCTYPE html><html lang="en">...原创 2019-11-22 17:29:22 · 912 阅读 · 0 评论 -
justify-content: space-between; 最后一行元素靠左对齐
justify-content: space-between; 最后一行元素靠左对齐： ul:after { content: ""; width: 2.1rem; }给ul加样式 ；或者这样：flex布局最后的一个或者两个元素 靠左对齐.list_cai:after {content: "";flex: auto; }...原创 2019-11-11 12:10:22 · 2084 阅读 · 0 评论 -
display:flex 均等排列 一行排两列或者多列，最后的元素靠左对齐
display:flexflex-direction属性决定主轴的方向（即项目的排列方向）。flex-direction: row | row-reverse | column | column-reverse;row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴...转载 2019-10-15 11:45:53 · 13174 阅读 · 0 评论 -
vue 之动态计算ul宽度，根据li个数动态获取 ul 宽度
1、html<ul ref="ul"> <li ref="ulli"></li></ul>2、JavaScript// 获取高度值 （内容高+padding+边框）let height= this.$refs.ulli.offsetHeight; // 获取元素样式值 （存在单位）let height = window.getC...原创 2019-10-06 14:22:31 · 4380 阅读 · 3 评论 -
VUE 之 v-html 后样式不生效的问题
代码：<div v-html="newsinfo.post_content"></div>后台数据中是一段html。。所以用 v-html 来展示；但是样式不生效了 ；解决方法：去掉 样式中 scoped 就OK了。。<style lang="less">...</style>...原创 2019-09-30 18:01:47 · 6944 阅读 · 0 评论 -
jquery.mCustomScrollbar 做pc滚动条效果
PC端 overflow-y:scroll 默认的滚动条有点丑，所以百度找了一个用 jquery.mCustomScrollbar 做pc滚动条效果下载文件地址：代码如下：所需jQuery等文件请自行百度下载。。<!DOCTYPE html><html><head> <title>scroll</title> <...原创 2019-09-17 16:22:05 · 266 阅读 · 0 评论 -
css 小案例 文字超出 ... 显示、导航鼠标移入变色、鼠标移入图片放大、-webkit-overflow-scrolling : touch、单行文本 两端对齐
记录一下工作中常用的css 小案例吧。。1. 实现文字超出 … 显示div{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}借鉴于：https://www.cnblogs.com/gopark/p/8875655.html2. 导航鼠标移入变色添加动画效果，不再那么死板的直接变色...原创 2019-09-11 09:55:42 · 277 阅读 · 1 评论 -
css面试题积累
个人认为有意思的css相关面试题总结。。1.display 的属性有几种，分别是什么？常见的有：none、block、flex、默认inherit。。。额。。竟然有这么多，原谅我这只小菜鸟没用过。。。 2.list-style的属性有几种，分别是?list-style:square inside url('1.jpg');list-style-type :disc(默...原创 2019-08-16 16:18:46 · 120 阅读 · 0 评论 -
Flex 布局
flex布局学习笔记：基础代码：<ul> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li></ul> <style> * { margin: ...原创 2019-08-14 14:51:26 · 196 阅读 · 0 评论