html css 左右滑动固定

2024-11-05

HTML和CSS实现左侧固定宽度右侧内容可滚动

在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比,然后设置它的overflow为auto或者scroll.最重要的是,需要左右滚动的内容需要设置属性white-space: nowrap(规定段落中的文本不进行换行).一般移动端左右滑动不需要显示滚动条,此时可以设置.element::-webkit-scrol

前端CSS - 相对定位,绝对定位,固定定位

前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位了 position:relative; → 必须先声明,自己要相对定位了, left:100px; → 然后进行调整. top:150px; → 然后进行调整. 1.2 相对定位的特性 - 不脱标,老家留坑,形影分离相对定位不脱标,真实位置是在老家,只不过影子出去

css设置背景固定不滚动效果的示例

css设置背景固定不滚动效果的示例背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背景不滚动的效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

js实现百度搜索框滑动固定顶部

现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不精,没读懂百度的js,有点小bug. <!DOCTYPE html> <html> <head> <title>柳絮飞祭奠</title> <meta http-equiv="keywords" content="

李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作用: >解决文字图片环绕问题 >制作网页导航栏 >网页布局清除浮动: 清除浮动的影响定位的分类: 1.2定位静态定位(static) 绝对定位(absolute)看脸型 >绝对定位绝对脱标 >行内元素转化为行内块元素 >如果父盒子没有设置定位,以浏览器左上角为基准设

李洪强和你一起学习前端之(7)定位盒子 css可见性滑动门案例

今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元素在一行上显示 ->设置了浮动的元素,影响其后面的元素作用: 解决了文字图片环绕问题制作网页导航栏网页布局清除浮动清除浮动的影响 1.2定位静态定位(static) 绝对定位(absolute)看脸型绝对定位绝对脱标(不占位置) 行内元素转化为行内块元素如果父盒子没有设置定位,以浏览器左

CSS基础(滑动门，雪碧图，网页布局）

3.11.2017 这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧 CSS可见性(元素可见性) overflow: hidden: 将超出部分隐藏(部分隐藏) display: none; 元素隐藏(全部隐藏)(隐藏元素不占位置) display: block; 显示元素 visibility: hidden: 隐藏元素(全部隐藏)(隐藏元素占位置) 然后就是关于滑动门的讲解,现在的页面中好多地

CSS 实现底部固定

在制作页面有这样一种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见. 那么如何将Web页面的 “footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部, 换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超过浏览器高度时,Web页面的footer部

CSS 实现左侧固定，右侧自适应两栏布局的方法

"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点. 常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性.另外一种思路是利用CSS中的calc()方法来动态设定宽度.还有一种思路是,利用CSS3中的新型布局flex layout与grid layout. 效果图: HTML布局: <div class="out

前端学习 -- Html&Css -- 相对定位绝对定位固定定位

相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: relative:开启元素的相对定位: absolute:开启元素的绝对定位: fixed:开启元素的固定定位(也是绝对定位的一种). 当元素的position属性设置为relative时,则开启了元素的相对定位当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化: 相对定位是相对于元素在文

HTML5+CSS把footer固定在底部

在刚开始给网页写footer的时候,我们会碰到一个让人烦躁的问题:当页面内容太少时,footer显示在了页面中间,这是我们不希望出现的,我们希望它能够永远呆在底部,不管网页的内容是多还是少.下面的代码使得footer能够固定在底部: html文件的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel

css：滑动门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS层定位——固定定位，相对定位，绝对定位

主要写关于层定位的相关知识㈠定位概述 ⑴像图像软件中的图层一样可以对每一个layer能够精确定位操作 ⑵层定位的position属性决定了当前的一个网页元素,可以叠加到另一个网页元素上面,那么我们把这个网页元素称为一层,那么外面的元素称为父层,里面嵌入的元素称为子层 ⑶position属性 (相对于谁定位) fixed 固定定位 relative 相对定位 absolute 相对定位 ⑷通过以下属性定位 (位置在哪里) ①通过position属性设定它的参照物是最外层盒子

html+js(swiper.js)+css左右滑动切换页面效果，适配移动端

demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swiper.js swiper-progress.html <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="t

理解CSS相对定位和固定定位

× 目录 [1]相对定位 [2]固定定位前面的话一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolute绝对定位的基础和应用,这篇博客介绍和梳理相对定位relative和固定定位fixed的相关知识相对定位定义可能理解起来最简单的定位机制就是相对定位了.采用这种机制时,通过使用偏移属性移动定位元素.当元素相对定位时,它会从其正常位置移走,不过,原来所占的空间并不会因此消失.相对定位元素,会为其

CSS实现底部固定

html代码结构 <body> <div class="wrap"> <div class="head"></div> <div class="main"></div> <div class="foot"></div> </div> </body> CSS代码: html, body { height: 10

利用js、css、html固定table的列头不动

1.CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2.Javascript <script type="text/javascript"> //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b =

html+css底部自动固定底部

前端在切图过程中,肯定遇见过这种情况. 页面结构由三个部分组成,头部.内容.底部. 当一个页面的内容没撑满屏幕时,底部是跟着内容而并列存在的. 这个时候如果是大屏的话,底部下面会有多余的空白区域,而网页设计需求必须要底部贴近浏览器底部. 固定定位,绝度定位都不好使. 废话不多说,直接上代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

css实现左侧固定宽，右侧自适应的7中方法

一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box1>div{float: left;} .left1{width: 100px;background: yellow;} .right1{background: #09c;width:calc(100% - 100p

原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死

需求的表格比较复杂(各种合并新增删除),elementUi的table组件无法满足需求,故而写了原生table,且与其他用了table组件的表格保持一致. 贴一下简单的代码,只实现操作按钮固定右侧以及底部滚动条功能: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

CSS粘住固定底部的5种方法

本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部.需求看下图:· 方法一:全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容.它有一个负值下边距等于底部的高度. <body> <div class="wrapper"> conte

html css 左右滑动固定

热门专题