CSS 页面顶部阴影和给浏览器强制加上滚动条

 /*给浏览器强制加上滚动条*/
        html{height: 101%;}
        /*页面顶部阴影*/
        body:before{
            content: "";
            position: fixed;
            top:-10px;
            left:0;
            width:100%;
            height:10px;
            -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
            -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
            box-shadow: 0px 0px 10px rgba(0,0,0,.8);
            z-index: 100;
        }

IT技术和行业交流群 417691667

时间: 2024-10-10 07:55:56

CSS 页面顶部阴影和给浏览器强制加上滚动条的相关文章

网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容. 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下面去了,没有给浏览者一种平滑的感觉.所以自己就计划着能不能做一种类似的比较平滑的效果呢? 当然是可以的.这篇博客中的特效要用到如下的函数和属性,大家没见过或者见过用过已经忘了的,可以到w3cshool上恶补下: eq(index):相当于数组吧,可以根据index索引到具体的对象 scrollTo(

常用小Demo:用js/jQuery实现回到页面顶部功能

HTML代码: <div class="main">     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate 

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

html页面顶部出现一段空白,检查控制台发现body 下出现&amp;#65279字符,原因及解决办法

html页面顶部出现一段空白,检查控制台发现body 下出现&#65279字符,原因及解决办法 分析: 原来是页面编码时增加了BOM,此页面后端数据主要是PHP语言,对PHP来讲PHP在设计时没有考虑BOM问题,,不会忽略UTF-8编码的文件开头BOM的那三个字符,会把BOM作为该文件开头正文的一部分.由于必须在<?或者<?php后面的代码才会作为PHP代码执行,所以将会造成在页面上输出这三个字符,显示效果就要看浏览器了,一般是一个空行或是一个乱码.由于在html一开头有这3个字符的存

用jquery实现小火箭到页面顶部的效果

恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下 代码和布局都很简单 <!DOCTYPE HTML> <html> <head> <style> #content{ height: 2000px ; width: 960px ; margin: 0 auto ; background-color: blue ; } #rocket{ width: 50px ; height:

PHP生成HTML页面顶部出现空白部分(#65279字符?)的解决办法

最近项目使用到ThinkPHP框架,其中一个页面顶部总是一小段空白. 如下图所示: 而且只会在chrome和edge浏览器出现,ff则不会出现这个问题.由于该页面是由PHP+HTML模板拼接接,因此先后排查了html文件.JavaScript文件.php文件.均未发现问题. 使用chrome F12发现空白处是一串&#65279字符.通过搜索,了解到这原来是UTF-8的编码问题. 我使用的编码是UTF-8 + BOM,这种编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事

js网页返回页面顶部的小方法

咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop.png" class="gotop" > <div class="gotopdiv" style="display: none;"><span>返回顶部</span></div> 2.

当滚动页面到一定程度时,页顶菜单浮动固定在页面顶部

存粹是笔记呵呵 代码一: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http

【原生JS插件】LoadingBar页面顶部加载进度条

先展示一下已经实现的效果: 看到手机上的浏览器内置了页面的加载进度条,想用在pc上. 网上搜了一下,看到几种页面loading的方法: 1.在body头部加入loading元素,在body页脚写入脚本让loading元素消失. 2.基于jquery,在页面的不同位置插入脚本,设置滚动条的宽度. 简单分析一下: 第一个明显不是我想要的. 第二个要在body前加载jquery,然后还要使用到jquery的动画方法,性能肯定达不到最优的状态. 自己的解决方法:原生JS+css3 上面的方法2其实是可以