一、普通定位和相对定位css中的元素有两种元素,块级元素和行级元素,块级元素每定义一个,第二个会自动换行,行级元素不会换行。如下图定义了三个块级元素div和两个行级元素span。普通定位就是从上到下从左到右依次排布的布局。相对定位是在普通定位的基础上作出一些变动,如本来这个元素应该在第二行的位置,设置position:relative,bottom:20px …
css滚动条
定义骨架,写html和csshtml部分<template><div class="drag-wrapper" ref="dragDiv"><div class="drag_bg"><div><div class="drag_text f14" …
在 HTML 中实现原生表格并设置表格边框的详尽教程 在 HTML 中,表格是展示结构化数据的重要工具。为了使表格更加清晰、美观,设置表格边框是常见的需求。本文将深入探讨 两种原生方式 来实现表格边框:使用 HTML 表格边框属性 和 CSS 样式设置。通过详细的代码示例和解释,您将全面掌握在 HTML 中创建带边框的表格的方法。目录 什么是 HTML 表格 …
场景我是需要在table最后添加一行数据,然后把滚动条滚动到最后。查网上的解决方案都是读取html结构,暴力的去获取,虽能解决问题,但是不喜欢这种打补丁的解决方案,我想着官方应该有相关的定义,于是就去看table的定义。技术栈我用的是vue3+ts+elment-plus。elment-plus的table提供了滚动的方法`setScrollTop`,但是a …
在 Vue 项目里,Vue Router 的滚动行为能对路由切换时的滚动位置进行控制,下面为你介绍它的常见使用场景和配置方法:基本配置在创建 Vue Router 实例时,可以通过scrollBehavior函数来配置滚动行为: routerindex.jsconst router = createRouter({history: createWebHist …
今天应UED的要求对项目的滚动条进行美化,原生的滚动条虽然很实用,但确实不美观。用了一些css美化后::-webkit-scrollbar{height: 9px;width: 9px;}::-webkit-scrollbar-thumb {border-radius: 10px;background-color: rgba(157, 165, 183, 0 …
需求:当页面很长,有滚动条时,需要固定页面上的部分元素,便于下方元素和上方固定元素的对照。.box1{width: 100%;height: 50px;background: skyblue;}.box2{width: 100%;height: 50px;background: darkorange;position: sticky;top: 0;}.box …
css3中的transition和transform配合可以做出许多好玩的东西来,下面我们来说说这哥俩配合做出来的一个应用及其广泛而实用的干货。请拿走,不谢!这个应用在展示网站模板或者图册显示应用很广泛!一、先看效果:二、效果说明:当鼠标移动到div或者是a链接的时候,图片向上滚动,直到显示完全,当鼠标移开的时候,图片回到最开始的位置。三、效果分析:向上滚动 …
JS方法:$("body").attr('style','overflow-y:hidden') 这个是解决竖状滚动条横向 需要把overflow-y改成overflow-x即可CSS办法:一、防止图片撑破DIV方法一 原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px(像素),那你上传的图片 …
这 66 个特效,是我历时4个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱和的,都是挤出来的。我们是9点上班,我基本7点半就到公司自学了,这样我就有一个半小时的时间来做这些了。对于 CSS 评价,无论是在论坛还是身边的人,我听到最多的 …
