<!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`或...
在本案例中，我们关注的是"纯css3淘宝右侧固定导航样式代码"，这是一种实现类似淘宝网站右侧导航栏的视觉效果的技术。 首先，让我们来解析这个标题和描述。"纯css3"强调了完全依赖CSS3技术，不使用JavaScript或者...
在本文中，我们将深入探讨如何使用HTML5和CSS3创建一个仿微信底部固定响应式的导航菜单。这个设计模式常用于移动应用和现代网页，因为它能提供一致的用户体验，尤其是在小屏幕设备上。让我们逐步了解实现这个功能所...
【CSS3网页底部固定导航】是一种常见的网页设计技术，它利用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模拟title和alt的提示效果,可以查看淘宝网里的产品展示页面,用于显示产品的规格和相关信息.
【纯CSS3模拟iPhone X背景切换动画】 在现代网页设计中，动态效果是提升用户体验的重要手段之一。"纯CSS3模拟iPhone X背景切换动画"是一个技术主题，它旨在利用CSS3的强大功能，无需JavaScript干预，就能实现类似...
这个"纯CSS3实现的精致的占领月球404错误页面效果源码"为开发者提供了一种创新且趣味的方式来处理用户遇到的404错误情况。下面，我们将深入探讨这个主题，并详细解析其背后的CSS3技术及其应用。 404错误页面是当...
在本文中，我们将深入探讨如何使用HTML5和CSS3创建一个仿微信底部菜单，并了解相关技术的细节。这个项目是一个可自定义的解决方案，适用于那些希望在自己的网站或应用中实现类似微信底部导航功能的开发者。 首先，...
divcss模拟select 下拉框 select 改变样式
【HTML+CSS 仿静态淘宝页面】是一个针对初学者的前端开发项目，旨在通过实践学习HTML和CSS的基础知识。在这个项目中，开发者将尝试模仿淘宝网站的静态界面，以理解和掌握网页布局、样式设计以及元素交互的基本原理。...
【纯CSS3雷达扫描模拟动画】是一种利用现代Web技术实现的动态效果，它不依赖JavaScript，完全基于CSS3属性和技巧来创建一个类似雷达探测的动画效果。这种动画在网页设计中可以用于增加互动性和视觉吸引力，比如在...
2. **固定底部（Footer）**： - 类似于头部，我们可以使用`position: fixed;`将底部固定在屏幕底部： ``` footer { position: fixed; bottom: 0; width: 100%; z-index: 998; /* 确保底部在头部之下，但仍然...