实现固定定位简单实例-js教程-PHP中文网

固定定位

首页

web前端

js教程

实现固定定位简单实例

一个新手

Oct 07, 2017 am 11:41 AM

定位实例简单

固定定位

简单的固定定位实例

固定定位样图

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{                
            line-height: 50px;            
            }
            #dh{                
            border: 1px solid #000000;                width: 100%;                height: 50px;                background-color: #FFFFFF;                position: fixed;/*固定定位*/
                top: 0px;            }

            #dh2{                border: 1px solid #000000;                background-color: #FFFFFF;                width: 100px;                height: 300px;                position: fixed;                left: 300px;                top: 300px;            }

            a{                display: block;                margin: 20px;            }
        </style>
    </head>
    <body>

        <p id="dh2">
            <a href="#nz">女装</a>
            <a href="#man">男装</a>
            <a href="#dq">电器</a>
            <a href="">返回顶部</a>
        </p>
        <font color="red">这里是顶部</font>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <a name="nz"></a>
        <font color="red">这里是女装</font>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <a name="man"></a>
        <font color="red">这里是男装</font>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <a name="dq"></a>
        <font color="red">这里是电器</font>
    </body>    </html>

登录后复制

以上是实现固定定位简单实例的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7518

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

最简便的硬盘序列号查询方式 Feb 26, 2024 pm 02:24 PM

硬盘序列号是硬盘的一个重要标识，通常用于唯一标识硬盘以及进行硬件识别。在某些情况下，我们可能需要查询硬盘序列号，比如在安装操作系统、查找正确设备驱动程序或进行硬盘维修等情况下。本文将介绍一些简单的方法，帮助大家查询硬盘序列号。方法一：使用Windows命令提示符打开命令提示符。在Windows系统中，按下Win+R键，输入"cmd"并按下回车键即可打开命

苹果无线耳机丢了怎么定位_苹果无线耳机定位方法 Mar 23, 2024 am 08:21 AM

1、首先，我们打开手机上的【查找】App，在设备界面的列表中选择设备。2、然后，可以查看位置，还可以点击路线导航过去。

如何在uniapp中使用地图和定位功能 Oct 16, 2023 am 08:01 AM

如何在uniapp中使用地图和定位功能一、背景介绍随着移动应用的普及和定位技术的迅猛发展，地图和定位功能已经成为了现代移动应用中不可缺少的一部分。uniapp是一种基于Vue.js开发的跨平台应用开发框架，可以方便开发者在多个平台上共用代码。本文将介绍如何在uniapp中使用地图和定位功能，并提供具体的代码示例。二、使用uniapp-amap组件实现地图功能

如何使用Java编写一个简单的学生成绩报表生成器？ Nov 03, 2023 pm 02:57 PM

如何使用Java编写一个简单的学生成绩报表生成器？学生成绩报表生成器是一个可以帮助老师或教育者快速生成学生成绩报告的工具。本文将介绍如何使用Java编写一个简单的学生成绩报表生成器。首先，我们需要定义学生对象和学生成绩对象。学生对象包含学生的姓名、学号等基本信息，而学生成绩对象则包含学生的科目成绩和平均成绩等信息。以下是一个简单的学生对象的定义：public

高德地图怎么定位对方手机位置_高德地图定位对方手机位置方法 Apr 01, 2024 pm 02:11 PM

1、点击进入自己手机的高德地图软件。2、再点击右下角的我的。3、点击进入家人地图。4、点击创建我的家人地图。5、创建成功后，会出现邀请码，分享给另外一台手机。

如何通过C++编写一个简单的音乐推荐系统？ Nov 03, 2023 pm 06:45 PM

如何通过C++编写一个简单的音乐推荐系统？引言：音乐推荐系统是现代信息技术的一个研究热点，它可以根据用户的音乐偏好和行为习惯，向用户推荐符合其口味的歌曲。本文将介绍如何使用C++编写一个简单的音乐推荐系统。一、收集用户数据首先，我们需要收集用户的音乐偏好数据。可以通过在线调查、问卷调查等方式来获得用户对不同类型音乐的喜好程度。将数据保存在一个文本文件或数据库

他趣怎么改定位位置信息修改所在地址的方法 Mar 12, 2024 pm 09:52 PM

　　我们大家都是非常清楚的知道他趣APP是一款非常可靠的聊天社交的平台，现在都能够让大家好好的进行线上网络交友，这里的一些交友的形式，主要都是让大家进行位置交友的哦，就是这么的简单直接，毕竟这里都能够自动的为你们定位当前的位置信息，更好的为你们匹配到一些距离相近的同城好友，让大家都能更加聊得来，都感到特别的开心，那么很多的一些时候，大家为了想要认识更多一些别的地方的朋友们，都是产生了想要进行地址修改的想法，但是大家不知道该如何修改自己的定位位置的信息，十分困扰，所以本站小编也是收集出来了一些具体

如何通过C++编写一个简单的扫雷游戏？ Nov 02, 2023 am 11:24 AM

如何通过C++编写一个简单的扫雷游戏？扫雷游戏是一款经典的益智类游戏，它要求玩家根据已知的雷区布局，在没有踩到地雷的情况下，揭示出所有的方块。在这篇文章中，我们将介绍如何使用C++编写一个简单的扫雷游戏。首先，我们需要定义一个二维数组来表示扫雷游戏的地图。数组中的每个元素可以是一个结构体，用于存储方块的状态，例如是否揭示、是否有雷等信息。另外，我们还需要定义

See all articles

实现固定定位简单实例

固定定位

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题