参考链接
- 传送门1
- 移动端HTML5 input常见问题(小结)
- Codepen Demo – sticky footer by flex margin auto
如何设计产品的空白页面?
CodePen Demo – 图片的位置dom
前端基础知识概述
图片加载失败后CSS样式处理最佳实践
CodePen Demo – 图片处理
scroll-snap-type
使用 sroll-snap-type 优化滚动
你所不知道的 CSS 动画技巧与细节
MDN - cursor
CodePen Demo – Cursor Demo
CodePen – user-selectall 示例
CodePen – user-selectall && ::selection 控制选中样式
Learn From What Leading Companies A/B Test
CSS Fonts Module Level 4 – Generic font families
Web 字体 font-family 再探秘
WCAG AA
知乎 – 助你轻松做好无障碍的15个UI设计工具推荐
W3 CSS selectors-4 规范
CodePen Demo – :focus-visible example
WAI-ARIA 标准
WAI-ARIA basics
WAI-ARIA 1.1
Web中的焦点管理
无障碍功能
提升Web用户体验的71个设计要点
公众号 – 无障碍设计小组
公众号 – CSS 如何实现多行文本展开收起效果
CSS 超出隐藏,不用js的展开收起功能
- 公众号 – CSS 如何实现多行文本展开收起效果
- 效果图
- 代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 如何实现多行文本展开收起效果</title>
</head>
<body>
<div class="content">
<input type="checkbox" id="exp" />
<div class="text">
<label class="btn" for="exp"></label>
<span>
但听得蹄声如雷,十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅,
里面玄色布衣,但见人似虎,马如龙,人既矫捷,马亦雄骏,每一匹马都是高头
长腿,通体黑毛,奔到近处,群雄眼前一亮,金光闪闪,却见每匹马的蹄铁竟然
是黄金打就。来者一共是一十九骑,人数虽不甚多,气势之壮,却似有如千军万
马一般,前面一十八骑奔到近处,拉马向两旁一分,最后一骑从中驰出</span
>
</div>
</div>
<style>
.content {
display: flex;
}
.text {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text::before {
content: '';
float: right;
height: 100%;
margin-bottom: -20px;
}
.btn {
float: right;
clear: both;
margin-right: 8px;
}
#exp {
visibility: hidden;
}
#exp:checked + .text {
-webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
}
.btn::after {
content: '展开';
}
#exp:checked + .text .btn::after {
content: '收起';
}
</style>
</body>
</html>
form表单两端对齐
-
效果图
-
代码
.test1 { text-align:justify; text-justify:distribute-all-lines;/*ie6-8*/ text-align-last:justify;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/ } @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/ .test1:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; } } html <div class="box1"> <div class="test1">姓 名</div> <div class="test1">姓 名 姓 名</div> <div class="test1">姓 名 名</div> <div class="test1">所 在 地</div> <div class="test1">工 作 单 位</div> </div>
配置H5的滚动条样式
/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-track {
background-color: #b46868;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
/* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-button {
background-color: #7c2929;
}
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
::-webkit-scrollbar-corner {
background-color: black;
}
// IE 自己的设置方法,并且是第一个可以自定义滚动条的浏览器,从IE5.5开始兼容
body {
scrollbar-face-color: #b46868;
}
举例
/* Document scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}
<div class="custom-scrollbar">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?
</p>
</div>
placeholder
::placeholder {
color: #999;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}
透明度
.haorooms{
opacity: 0;
cursor:pointer;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
CSS控制多行文字超出隐藏加省略号
.ellipsis_1 {
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
}
.ellipsis_1 {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all; /* 追加这一行代码 */
}
/*这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。*/
}
.ellipsis_2 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ellipsis_2 {
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行
}
- 跨浏览器兼容的方案 之一
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
// background:url(和网页背景颜色一样的一张背景图) repeat-y;
background-color:#fff;
}
注意:
height高度正好是line-height的3倍;
结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用…去模拟;
要支持IE8,需要将::after替换成:after;
css3flex布局实现商品列表
.goodsItem {
width: 24%;
height: 100px;
overflow: hidden;
background-color: skyblue;
margin-top: 15px;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 如果最后一行是3个元素 */
.goodsItem:last-child:nth-child(4n - 1) {
margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.goodsItem:last-child:nth-child(4n - 2) {
margin-right: calc(48% + 8% / 3);
}
/* .goodsItem:last-child {
margin-right: auto;
} */
图片懒加载
可以通过为图片文件添加loading="lazy"的属性来实现:
<img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />
输入提示
当用户在进行输入搜索功能时,如果能够给出有效的提示,这会大大提升用户体验。输入建议和自动完成功能现在到处可见,我们可以使用Javascript添加输入建议,方法是在输入框上设置事件侦听器,然后将搜索到的关键词与预定义的建议相匹配。
其实,HTML也是能够让我们来实现预定义输入建议功能的,通过标签来实现。需要注意的是,使用时这个标签的id属性需要和input元素的list属性一致。
<label for="country">请选择喜欢的国家:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
<option value="UK">
<option value="Germany">
<option value="USA">
<option value="Japan">
<option value="India">
<option value=“China”>
</datalist>
Picture标签
HTML提供了标签,允许我们来添加多张图片资源,并且根据不同的分辨率需求来展示不同的图片。
<picture>
<source media="(min-width:768px)" srcset="med_flower.jpg">
<source media="(min-width:495px)" srcset="small_flower.jpg">
<img src="high_flower" style="width: auto;" />
</picture>
Base URL
当我们的页面有大量的锚点跳转或者静态资源加载时,并且这些跳转或者资源都在统一的域名的场景时,我们可以通过标签来简化这个处理。
<head>
<base href="https://www.weibo.com/" target="_blank">
</head>
<body>
<a href="jackiechan">成龙</a>
<a href="kukoujialing">贾玲</a>
</body>
页面重定向(刷新)
当我们希望实现一段时间后或者是立即重定向到另一个页面的功能时,我们可以直接通过HTML来实现。
我们经常会遇到有些站点会有这样一个功能,“5s后页面将跳转”。这个交互可以嵌入到HTML中,直接通过标签,设置http-equiv="refresh"来实现
<meta http-equiv="refresh" content="4; URL='https://google.com' />
DIV可编辑,就是让一个div变成一个类似input输入框的效果。
可使用:before伪元素达到仿‘placeholder’的效果。传送门
<div id="div1" contentEditable="true" ></div>
<div id="div2" contentEditable="true" ></div>
<div contentEditable="true" id="div3"></div>
不让用户复制,设置div禁止选择的功能,设置如下属性:
- unselectable=“on” onselectstart=“return false;”
<div unselectable="on" onselectstart="return false;">
sdfsdfswerwer324234234234
</div>