![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端功能实现
前端小功能点的实现
海胆Sur
本着开放共享的态度
展开
-
实现圆角表格table
:root { --border-width: .04rem;}table { border: var(--border-width) solid black; border-collapse: collapse; border-radius: .15rem;/*圆角*/}td, th { border-right: var(--border-width) solid black;}td { border-top: var(--border-width原创 2021-06-23 12:38:49 · 159 阅读 · 0 评论 -
HTML-CSS实现 | 滚动条监视显示置顶
$(".totop").hide()console.log("事件载入")$(window).scroll(function(){ var scrolltop = $(document).scrollTop(); if(scrolltop > 200){ $(".totop").show() }else{ $(".totop").hide() }})原创 2020-10-02 10:54:58 · 661 阅读 · 0 评论 -
HTML-CSS实现 | 自动轮播图实现
原理:1. 利用js定时器实现循环 or 利用动画实现循环2. 平移轮播可以通过改变水平方向上的margin值实现; 单图出现的轮播可以定位消失和隐藏/z-index来实现;原创 2020-10-02 10:18:57 · 1368 阅读 · 0 评论 -
HTML-CSS实现 | 基本样式初始化
*{margin: 0;padding: 0;}/*样式重置*/ul>*{ float: left;}ul>*::after{ clear: both;}li{ list-style: none;/*去除默认标点*/}a{ color: black; text-decoration: none;/*去除下划线*/}input[type=text]{ border: none; outline: none;}...原创 2020-09-30 16:39:13 · 157 阅读 · 0 评论 -
HTML-CSS实现 | 让文字单行显示以..省略
.text{ line-height: 40rpx; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1;}原创 2020-09-25 10:03:12 · 373 阅读 · 0 评论 -
HTML-CSS实现 | 重定义浏览器默认样式
*{margin: 0;padding: 0;}/*样式重置*/ul{ overflow: hidden;}li{ list-style: none;/*去除默认标点*/ float: left;}a{ color: black; text-decoration: none;/*去除下划线*/}input[type=text]{ /*暂定*/}原创 2020-09-18 16:34:31 · 154 阅读 · 0 评论 -
HTM-CSS实现 | 雪碧图的处理
.img { display: inline-block; width: 18px;/*小图片的尺寸*/ height: 18px;/*小图片的尺寸*/ background:口#333 url(" images/ icons_ type . png") no repeat;/*雪碧图*/ background-position-x: 18px;/*对小图进行定位*/ /*下面的样式用于居中*/ position: absolute;.原创 2020-10-02 10:19:55 · 231 阅读 · 0 评论