`

纯css模拟淘宝详细页面底部固定

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery博客纯css模拟淘宝详细页面底部固定</title>
<meta name="keywords" content="顶部固定,css模拟" >
<meta name="description" content="jQuery吧,Write Less, Do More,注重前端开发,web前端开发">
<style type="text/css">
/*<![CDATA[*/
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto;}
#menu {right:0; top:0; width:100%; position:fixed; padding:10px; text-align:center; font-weight:bold; background:#ccc;}
* html #menu {position:absolute; right:16px; top:0;}/*only for ie*/
html {overflow:auto !important; overflow:hidden;}

/*]]>*/
</style>
</head>
<!-- -->
<body>
<div >
<div style=" height:900px;"> </div>
<div id="menu">我顶部固定啦</div>
</div>
</body>
</html>
 
分享到:
评论

相关推荐

    纯css实现固定在网页底部菜单导航

    本篇文章将详细介绍如何利用纯CSS技术来创建一个始终固定在网页底部的菜单导航。 首先,我们需要了解CSS中的定位(Positioning)属性。在CSS中,`position`属性用于定义元素的定位类型。为了使菜单导航固定在底部,...

    HTML + CSS 实现淘宝页面首屏静态网页项目练习.zip

    HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...

    HTML与CSS实现淘宝静态页面(参考版).rar

    在淘宝页面的例子中,CSS将用于定义背景色、文字样式、按钮样式、悬浮效果、响应式布局等。比如,可以使用`background-color`属性改变背景颜色,`font-family`定义字体,`padding`和`margin`调整元素间距,`float`或...

    纯css3淘宝右侧固定导航样式代码

    在本案例中,我们关注的是"纯css3淘宝右侧固定导航样式代码",这是一种实现类似淘宝网站右侧导航栏的视觉效果的技术。 首先,让我们来解析这个标题和描述。"纯css3"强调了完全依赖CSS3技术,不使用JavaScript或者...

    html5-css3仿微信底部固定响应式导航菜单代码

    在本文中,我们将深入探讨如何使用HTML5和CSS3创建一个仿微信底部固定响应式的导航菜单。这个设计模式常用于移动应用和现代网页,因为它能提供一致的用户体验,尤其是在小屏幕设备上。让我们逐步了解实现这个功能所...

    css3网页底部固定导航.zip

    【CSS3网页底部固定导航】是一种常见的网页设计技术,它利用CSS3的特性来实现在用户滚动页面时,导航栏始终保持在屏幕底部的效果。这样的设计不仅增强了用户体验,还能确保用户在浏览网页时始终能轻松访问导航链接。...

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...

    纯css3海天一色页面动画背景特效

    【纯CSS3海天一色页面动画背景特效】是一种利用CSS3的新特性来实现的网页设计技巧,旨在为用户创造视觉上引人入胜、动态的背景效果,模拟出海洋与天空相接的自然景象。这种特效通过巧妙地运用CSS3的属性,如渐变...

    4种纯CSS3超酷页面切换过渡动画特效

    这是一款4种效果非常炫酷的纯CSS3页面切换过渡动画特效。该CSS3页面过渡动画使用CSS keyframes制作而成,所有的动画效果和延时都是使用CSS属性,没有任何的javascript timeout()代码。

    纯CSS3超酷书架样式404页面动画特效.zip

    纯CSS3技术使得页面动画流畅且性能高效,而“超酷书架样式”可能包含对书籍翻页、滑动、旋转等动态效果的模拟,使404页面不再单调乏味,而是具有互动性和观赏性。这样的设计可以吸引用户停留更长时间,减轻用户在...

    详解八种方法实现CSS页面底部固定

    在Web前端开发中,CSS提供了多种方法来实现页面底部固定。接下来,我们将详细探讨这些方法。 方法一:绝对定位 绝对定位是最传统也最直接的方法,通过设置固定高度和绝对定位,让footer始终固定在页面的底部。需要...

    纯css实现的凹槽底部导航菜单,CSS凹型导航按钮效果的实现效果,适用于html5,小程序,uniapp,Vue,nvue等

    纯css实现的凹槽底部导航菜单,内凹导航栏一个好看的底部导航栏效果,CSS凹型导航按钮效果的实现效果,适用于html5,小程序,uniapp,Vue,nvue等,只要是css都适用,源码下载!纯css实现的凹槽底部导航菜单,内凹...

    css模拟title和alt的提示效果

    css模拟title和alt的提示效果,可以查看淘宝网里的产品展示页面,用于显示产品的规格和相关信息.

    纯CSS3模拟iPhone X背景切换动画

    【纯CSS3模拟iPhone X背景切换动画】 在现代网页设计中,动态效果是提升用户体验的重要手段之一。"纯CSS3模拟iPhone X背景切换动画"是一个技术主题,它旨在利用CSS3的强大功能,无需JavaScript干预,就能实现类似...

    纯CSS3实现的精致的占领月球404错误页面效果源码.zip

    这个"纯CSS3实现的精致的占领月球404错误页面效果源码"为开发者提供了一种创新且趣味的方式来处理用户遇到的404错误情况。下面,我们将深入探讨这个主题,并详细解析其背后的CSS3技术及其应用。 404错误页面是当...

    淘宝页面最新版(HTML+CSS).zip

    在本项目中,"淘宝页面最新版(HTML+CSS).zip" 提供了一个学习和实践HTML和CSS的实例,特别适用于初学者了解如何将这两种技术结合以构建一个实际的网页——这里是淘宝网的首页。这个压缩包包含了必要的HTML文件和...

    html+css仿静态淘宝页面

    【HTML+CSS 仿静态淘宝页面】是一个针对初学者的前端开发项目,旨在通过实践学习HTML和CSS的基础知识。在这个项目中,开发者将尝试模仿淘宝网站的静态界面,以理解和掌握网页布局、样式设计以及元素交互的基本原理。...

    CSS+DIV布局内容不满一屏时页底始终固定在底部_无横滚条_多浏览器兼容

    4.本例子只解决了页面不满一屏时的页底浮动问题,如果你的页面撑满一页有竖滚动条时,页底是固定不变的。 5.关于第4点本人认为,并不是这个解决方案有缺陷。因为你不应该用这个例子解决你的既要满屏居低又要超一屏还...

    纯CSS3雷达扫描模拟动画

    【纯CSS3雷达扫描模拟动画】是一种利用现代Web技术实现的动态效果,它不依赖JavaScript,完全基于CSS3属性和技巧来创建一个类似雷达探测的动画效果。这种动画在网页设计中可以用于增加互动性和视觉吸引力,比如在...

    html5+css3仿微信底部菜单(可自定义)

    在本文中,我们将深入探讨如何使用HTML5和CSS3创建一个仿微信底部菜单,并了解相关技术的细节。这个项目是一个可自定义的解决方案,适用于那些希望在自己的网站或应用中实现类似微信底部导航功能的开发者。 首先,...

Global site tag (gtag.js) - Google Analytics