Css
"William'_
缓缓往前爬的蜗牛......
展开
-
[随笔] flex 布局使用 space-between 尾行排版效果优化
问题:有7个元素,需要排列成两行,整体要求两端对齐,尾行不足需向左对齐排列。七个元素:<ul class="the-ul" style="max-width:760px;"> <li>我是子元素</li> <li>我是子元素</li> <li>我是子元素</li> ...转载 2020-03-18 10:40:32 · 789 阅读 · 0 评论 -
[随笔] 重写 ul li 列表前面点的样式
可按照需求进行修改:清除默认点样式ul { list-style-type: none;}自行使用伪元素 ::before 添加点样式.ul li::before { display: inline-block; content: "●"; /* '\25CF' */ padding-right: 10px; color: #666; ...转载 2020-03-12 11:18:08 · 1072 阅读 · 0 评论 -
[小结] Css常用小套路(大小写、a标签、清除浮动、ul菜单)
文本相关大小写转换文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。实例:p.uppercase { text-transform: uppercase; } /*单词的所有字母转换成大写*/p.lowercase { text-transform: lowercase; } /*单词的所有字母转换成小写*/p.capita...原创 2020-01-07 18:12:58 · 340 阅读 · 0 评论 -
[随笔] 指定div内-让文字在图片上方且水平垂直居中
需求 —— 在一个指定的div(cotainer)内,要实现:图片撑满div文字水平垂直居中文字在图片上方压缩时地下图片能等比例缩小 -> 可设置最小值实现 —— 直接上代码:<div class="cotainer"> <img src="@/../static/img/img_manage_logoBg.png" alt="bg"> <...原创 2019-12-24 19:47:06 · 795 阅读 · 0 评论 -
[随笔] flex布局设置width无效
父容器设置了 flex 布局,子元素的 width 属性为:240px 会失效解决办法:使用 flex 布局子项属性:flex (flex-basis)属性flex: 1 1 240px;参考:CSNDflex布局转载 2019-12-23 20:39:45 · 1738 阅读 · 0 评论 -
[随笔] HTML/CSS-简单表格样式
一个简单的CSS表格样式表格: <div class="table-area fjcenter formating"> <table class="my-table"> <thead> <tr> <th>编号</th> ...原创 2019-11-02 23:46:03 · 1235 阅读 · 0 评论 -
[Tip] @media screen and 不起作用原因汇总(转)
@media screen and 不起作用原因汇总首先确认是不是css本身的问题,而不是媒体查询没有生效;例如div{display:flex;}/*那么div所有的display效果都将无法生效*/错误1、格式书写错误and后面必须有空格例如下面代码:@media screen and (max-width:500px){ }错误2、样式冲突;@media查询代码的样式被后面的c...转载 2019-09-22 02:44:13 · 960 阅读 · 0 评论 -
[Tip] 点击一个链接后,为什么其余没点击过链接也变成了变成了a:visited中的样式?
一:确认是否按照 a:link a:visited a:hover a:active 的顺序定义样式(联想记忆:love hate)二:如果所有链接的href属性一样(指向同一个地址),那么你点其中一个链接,其他链接也将显示被访问过————————————————原文链接:https://blog.csdn.net/weixin_39068791/article/...转载 2019-09-21 23:32:48 · 722 阅读 · 1 评论 -
[学习笔记] Css布局相关杂锦+个人补充
1、使用 max-width 替代 width可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。 顺便提下,所有的主流浏览器包括IE7+在内都支持 max-width 。#main { max-width: 600px; margin: 0 auto; }2、盒模型:当你设置了元素的宽度,有时候实际展现的元素却超出你的设置,这是因为元素的边框和内边距会撑开元素。看下...转载 2019-09-07 02:21:11 · 371 阅读 · 1 评论 -
[学习笔记] From Css to Css3(基础)
CSSCSS Id 和 Class选择器样式覆盖权重:内联样式(1000)>id选择器(100)>类选择器(10)>标签选择器(1)CSS 文本·文本的装饰:text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线:a {text-decoration:none;}·文...原创 2019-07-29 19:00:14 · 845 阅读 · 0 评论