div页面底部悬浮显示

Myth丶恋晨 2022-06-06 00:16 342阅读 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 条评论，342人围观）

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

相关阅读

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

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

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

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

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

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

相关 bootstrap悬浮顶部或者底部

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

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

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

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

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

相关 div页面底部悬浮显示

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

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

相关 CSS网页底部悬浮代码

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

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

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

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

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

相关 mui 点击底部菜单，显示不同的页面

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N

素颜马尾好姑娘i/ 2022年04月17日 06:45/ 0 赞/ 214 阅读

相关 CSS + DIV 内容底部显示

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

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

相关隐藏DIV 显示DIV

　　昨天做项目，用到了隐藏和显示DIV，在页面加载的时候，默认隐藏，当触发一个服务器控件时，显示此DIV，然后对此操作完成后，在点击DIV上服务器控件隐藏DIV，方法很简单，可

╰+攻爆jí腚メ/ 2021年11月01日 23:02/ 0 赞/ 429 阅读