随笔分类 -  网页常见功能

网页常见功能
使用css让图片和文字顶对齐（垂直居中，底对齐）
摘要：效果图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl 阅读全文
posted @ 2021-01-26 16:31 小茴香 阅读(1106) 评论(0) 推荐(0)
纯CSS实现table固定thead,tbody进行滚动.html
摘要：emmm。公司业务需求。所以自己写了一个表格固定,不过，网上也看到了另一种方法。都放出来。学习使用。 效果一： 代码一 <!-- * @Descripttion: * @version: * @Author: yang_ft * @Date: 2020-09-29 13:59:26 * @githu 阅读全文
posted @ 2020-10-12 09:50 小茴香 阅读(1085) 评论(0) 推荐(0)
js实现垂直向上滚动
摘要：效果图： 代码如下 <!-- * @Descripttion: * @version: * @Author: yang_ft * @Date: 2020-09-30 14:08:07 * @github: famensaodiseng * @LastEditTime: 2020-10-12 09:1 阅读全文
posted @ 2020-10-12 09:23 小茴香 阅读(919) 评论(0) 推荐(0)
使用css改变滚动条样式
摘要：我们平时在浏览页面的时候经常会看到滚动条样式，但是默认各个浏览器的样式是不一样的，所以，我们需要设置统一的滚动条样式。 自定义以后的滚动条样式效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met 阅读全文
posted @ 2020-08-21 09:29 小茴香 阅读(319) 评论(0) 推荐(0)
文字超出盒子显示省略号
摘要：我们平时经常看到的一种效果，文本内容超出后显示省略号。 效果如下 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt 阅读全文
posted @ 2020-08-19 09:26 小茴香 阅读(565) 评论(0) 推荐(0)
使用css3画三角形，菱形，平行四边形
摘要：经常见到一些面试题里面考使用css3画一个三角形，今天，给大家写一个demo,这种三角形也很常见于账号切换的时候，鼠标经过三角形旋转。 扩展一下，使用了css3的旋转和变形，写了一个菱形和平行四边形。 效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <hea 阅读全文
posted @ 2020-08-17 10:37 小茴香 阅读(520) 评论(0) 推荐(0)
使用CSS3的伪元素进行首字母下沉和首行改变样式
摘要：网页中常见的一种效果，首字改变样式或者首行改变样式，效果如下图。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, 阅读全文
posted @ 2020-08-17 10:27 小茴香 阅读(405) 评论(0) 推荐(0)
使用css设置边框背景图片
摘要：使用css的特有属性，给不同的盒子添加边框图片。 为什么会有这一场景呢。因为，UI给我们前端的边框图片可能未必适合我们当前的内容。 这里我们主要使用到的属性有： border-image-source border-image-slice border-top-width border-image- 阅读全文
posted @ 2020-08-13 17:17 小茴香 阅读(2830) 评论(0) 推荐(0)
CSS3动画旋转——（图片360°旋转）
摘要：今天在重构网页特效的时候，想着用到一个css3的旋转特效。简单来一个demo。 html <div class="box"> <img src="./yft.png" alt="" class="rotation"> </div> css <style> @-webkit-keyframes rot 阅读全文
posted @ 2020-07-28 11:54 小茴香 阅读(660) 评论(0) 推荐(0)

Live2D