<!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中的定位（Positioning）属性。在CSS中，`position`属性用于定义元素的定位类型。为了使菜单导航固定在底部，...
兼容ie系列ff+google的纯css网页底部固定漂浮居中效果免费下载
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
在淘宝页面的例子中，CSS将用于定义背景色、文字样式、按钮样式、悬浮效果、响应式布局等。比如，可以使用`background-color`属性改变背景颜色，`font-family`定义字体，`padding`和`margin`调整元素间距，`float`或...
在本文中，我们将深入探讨如何使用HTML5和CSS3创建一个仿微信底部固定响应式的导航菜单。这个设计模式常用于移动应用和现代网页，因为它能提供一致的用户体验，尤其是在小屏幕设备上。让我们逐步了解实现这个功能所...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
【标题】：“纯css3模拟单张图片切角固定效果”是利用CSS3中的linear-gradient属性来实现一种独特的视觉效果，它可以将一张图片的角落进行切割，呈现出非传统的边角形状，同时保持其他部分的正常显示。这个技术在...
对于头部和底部，我们可以将它们的`position`设置为`fixed`，这会使它们始终固定在屏幕的顶部或底部，不论用户滚动页面到何处。 ```css header { position: fixed; top: 0; width: 100%; /* 添加其他样式，如...
纯CSS3技术使得页面动画流畅且性能高效，而“超酷书架样式”可能包含对书籍翻页、滑动、旋转等动态效果的模拟，使404页面不再单调乏味，而是具有互动性和观赏性。这样的设计可以吸引用户停留更长时间，减轻用户在...
在Web前端开发中，CSS提供了多种方法来实现页面底部固定。接下来，我们将详细探讨这些方法。 方法一：绝对定位 绝对定位是最传统也最直接的方法，通过设置固定高度和绝对定位，让footer始终固定在页面的底部。需要...
纯css实现的凹槽底部导航菜单，内凹导航栏一个好看的底部导航栏效果，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等，只要是css都适用，源码下载！纯css实现的凹槽底部导航菜单，内凹...
css模拟title和alt的提示效果,可以查看淘宝网里的产品展示页面,用于显示产品的规格和相关信息.
【纯CSS3模拟iPhone X背景切换动画】 在现代网页设计中，动态效果是提升用户体验的重要手段之一。"纯CSS3模拟iPhone X背景切换动画"是一个技术主题，它旨在利用CSS3的强大功能，无需JavaScript干预，就能实现类似...
这个"纯CSS3实现的精致的占领月球404错误页面效果源码"为开发者提供了一种创新且趣味的方式来处理用户遇到的404错误情况。下面，我们将深入探讨这个主题，并详细解析其背后的CSS3技术及其应用。 404错误页面是当...
在本项目中，"淘宝页面最新版（HTML+CSS）.zip" 提供了一个学习和实践HTML和CSS的实例，特别适用于初学者了解如何将这两种技术结合以构建一个实际的网页——这里是淘宝网的首页。这个压缩包包含了必要的HTML文件和...
divcss模拟select 下拉框 select 改变样式
4.本例子只解决了页面不满一屏时的页底浮动问题，如果你的页面撑满一页有竖滚动条时，页底是固定不变的。 5.关于第4点本人认为，并不是这个解决方案有缺陷。因为你不应该用这个例子解决你的既要满屏居低又要超一屏还...
【纯CSS3雷达扫描模拟动画】是一种利用现代Web技术实现的动态效果，它不依赖JavaScript，完全基于CSS3属性和技巧来创建一个类似雷达探测的动画效果。这种动画在网页设计中可以用于增加互动性和视觉吸引力，比如在...
纯CSS右下角固定微信二维码代码是一款仿嘻嘻哈哈右下角固定的二维码代码，无JS。
2. **固定底部（Footer）**： - 类似于头部，我们可以使用`position: fixed;`将底部固定在屏幕底部： ``` footer { position: fixed; bottom: 0; width: 100%; z-index: 998; /* 确保底部在头部之下，但仍然...