☛ HTML(5)和CSS(3)
大龙Aiden
Fuck the God
展开
-
一篇文章搞懂CSS3网格布局(Grid)
<!-- div class="asset-body" --> <h2>一、概述</h2>网格布局(Grid)是最强大的 CSS 布局方案。 <!-- /div --> <!-- di...转载 2020-08-13 16:47:02 · 911 阅读 · 1 评论 -
js如何修改伪类样式如before或after
概括通过js创建一个内嵌样式表,并添加需要修改的伪类样式,覆盖原始的伪类样式。介绍html代码<ul> <li>apple</li> <li>banana</li> <li>pear</li></ul>css代码ul li{ list-style: no...原创 2019-07-29 15:46:07 · 4442 阅读 · 0 评论 -
Flex布局教程 —— 实例篇
一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明,本节的HTML模板一律如下。&amp;amp;lt;div class=&amp;quot;box&amp;quot;&amp;amp;gt; &amp;amp;lt;span class=&amp;quot;item&amp;q转载 2018-12-08 16:10:17 · 509 阅读 · 0 评论 -
Flex布局教程 —— 语法篇
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介...转载 2018-12-08 15:52:06 · 1509 阅读 · 0 评论 -
CSS3实现内容以指定行数显示,超出后显示省略号
-webkit-line-clamp 结合其他样式属性一起使用,可以实现内容指定行数来显示的效果,不过,它还是一个不规范的属性,没有被列入CSS 规范草案(不影响实现效果)。代码如下:与其他属性配合使用:-webkit-line-clamp:n; //设置行数,n为行数(必选)display: -webkit-box; //盒子模型(必选)-w...原创 2018-10-09 19:19:02 · 2233 阅读 · 0 评论 -
CSS解决中英文的换行、不换行、超出后显示省略号的问题
white-space:nowrap; //强制不换行(中英文都起作用)white-space:pre-wrap; //只对中文起作用,强制换行word-break:break-all; // 只对英文起作用,以字母作为依据,强制换行word-break:break-word; //只对英文起作用,以单词作为依据,强制换行overfl...原创 2018-09-17 18:24:31 · 7473 阅读 · 0 评论 -
pre标签里面的内容实现自动换行(默认不会自动换行)
通过css实现自动换行:pre{white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; ...原创 2018-01-29 15:51:01 · 7101 阅读 · 0 评论 -
标签ul与ol的区别及使用方法
ul是无序列表,所谓的无序列表只要举个例子,大家就会明白了。 ●这是第一个列表 ●这是第二个列表 ●这是第三个列表ol是有序列表,同样举个例子。 1、这是第一个列表 2、这是第二个列表 3、这是第三个列表 这就是ul与ol的区别。ul与ol前的符号是可以修改的。只需要修改它们的type值。ul的type属性有:disc—实心圆(...转载 2018-01-31 13:42:30 · 6021 阅读 · 0 评论