div页面底部悬浮显示

Myth丶恋晨 2022-06-06 00:16 391阅读 0赞

![Center][]

为了完成页面底部显示公司和技术赞助的显示  使得在页面滚动的时候  左右两边的梯形阴影始终显示在底部

为了显示在页面底部  首先想到的是footer来设置页面的页脚  来显示页面底部的信息

<footer>
      <p>Posted by: W3School</p>
      <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
    </footer>

### 但是页脚显示不会始终显示在页面底部   ###

### 所以采用设置底部div的postion ###

**div各种postion设置的效果**

postion：fixed  //元素相对于浏览器窗口是固定的，可用于悬浮窗口

postion：relative  //相对定位元素的定位是相对其正常位置。

postion: absolute   //绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

所以设置div的postion为fixed  bottom: 0px;即可保证div保留在底部

再设置完div始终在底部显示之后开始设置div的形状为梯形

这里使用边框画出梯形

width: 290px;
    height: 0;
    border-top: none;
    border-bottom: 24px rgba(0, 0, 0, 0.7) solid;
    border-left: transparent 30px solid;
    border-right: none;

**综合以上始终底部悬浮加上梯形显示  最终的css样式为**

#footRight {
    	width: 290px;
    	height: 0;
    	border-top: none;
    	border-bottom: 24px rgba(0, 0, 0, 0.7) solid;
    	border-left: transparent 30px solid;
    	border-right: none;
    	position: fixed;
    	bottom: 0px;
    	right: 0;
    	color: rgba(256, 256, 256, 0.5);
    }

[Center]: /images/20220606/0e3a68a956a349698cf06f8f3a3c53a5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，391人围观）

还没有评论，来说两句吧...

相关阅读

相关 div居中显示(div在页面居中显示)

如何使div中div的内容居中显示 ![Image 1][] 超链接其中是为了让超链接换行 ; padding-top:\\px;是为了垂直居中，具体是多少

冷不防/ 2023年09月26日 11:56/ 0 赞/ 83 阅读

相关 div悬浮功能（已验证）

先看效果图：（鼠标放入div中就字体会改变颜色，项目在的需求） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

一时失言乱红尘/ 2023年06月27日 04:30/ 0 赞/ 26 阅读

相关 div中如何把图片始终悬浮（固定）在页面窗口底部或顶部

页面底部： css代码： .divClass { position: fixed; bottom: 0; left: 0; ri

阳光穿透心脏的1/2处/ 2022年12月19日 13:15/ 0 赞/ 163 阅读

相关 html背景图片在底部,CSS兑现固定DIV层背景图片且底部显示

CSS实现固定DIV层背景图片且底部显示 /\CSS缩写形式\/ div \{ background:url(/images/about\_bg.jpg) no-repe

痛定思痛。/ 2022年10月06日 07:57/ 0 赞/ 3 阅读

相关 bootstrap悬浮顶部或者底部

这是bootstrap提供的样式,只需要引入bootstrap.css即可. 需要使用的class样式: navbar navbar-inverse navbar

小咪咪/ 2022年08月23日 14:43/ 0 赞/ 161 阅读

相关源生实现滚动页面显示悬浮导航

很多网页中都有当我们滚动页面到一定的高度时就会显示悬浮导航，这个效果用jquery实现很简单，只要用 slideDown( )实现，今天主要分享源生JS实现这个效果； HT

Bertha 。/ 2022年06月15日 06:51/ 0 赞/ 195 阅读

相关 div页面底部悬浮显示

![Center][] 为了完成页面底部显示公司和技术赞助的显示使得在页面滚动的时候左右两边的梯形阴影始终显示在底部为了显示在页面底部首先想到的是footer

Myth丶恋晨/ 2022年06月06日 00:16/ 0 赞/ 392 阅读

相关 CSS网页底部悬浮代码

设置属性 position: fixed; 位置设置成fixed bottom: 0;———-设置成0，意思是与浏览器底部贴合，设置成10px，表示距离底部10像素

冷不防/ 2022年06月04日 06:06/ 0 赞/ 503 阅读

相关 js scroll底部悬浮和顶部悬浮（未封装）

function scrollCon(){ window.addEventListener("scroll",function(e){ $('.o

迷南。/ 2022年05月10日 20:54/ 0 赞/ 225 阅读

相关 CSS + DIV 内容底部显示

简单，，看下面代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

系统管理员/ 2022年04月17日 01:29/ 0 赞/ 212 阅读