怎么用html设置一个可点击的长图标悬浮在网页右边上,随网页的滚动而滚动,

怎么用html设置一个可点击的长图标悬浮在网页右边上,随网页的滚动而滚动,,第1张

悬浮按钮只需要设置按钮positi的属性为fixed即可。

例子:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>浮动按钮</title>

    <style>

        *

        {

            margin: 0px

            padding: 0px

        }

        #container

        {

            width: 1000px

            height: 3000px

            background-color: #1b6d85

            margin: auto

        }

        #div1

        {

            height: 600px

            background-color: #255625

        }

        #div2

        {

            height: 600px

            background-color: #c0a16b

        }

        #div3

        {

            height: 600px

            background-color: #b92c28

        }

        #div4

        {

            height: 600px

            background-color: #449d44

        }

        #div5

        {

            height: 600px

            background-color: #999999

        }

        .btn-style

        {

            width: 30px

            height: 120px

            position: fixed/*此处即是固定按钮位置的属性。*/

            left: 1500px

            top: 400px

        }

    </style>

</head>

<body>

<button class="btn-style">这是一个浮动按钮</button>

<div id="container">

<div id="div1">第一节</div>

    <div id="div2">第二节</div>

    <div id="div3">第三节</div>

    <div id="div4">第四节</div>

    <div id="div5">第五节</div>

</div>

</body>

</html>

效果图:

代码如下,望采纳

<head>

<style>

* {

margin: 0

padding: 0

box-sizing: border-box

}

div{

width: 300px

height: 300px

transition: all 2s

background: #3ff

}

div:hover{

transform: rotateZ(45deg)

}

</style>

</head>

<div></div>

html记事本屏幕旋转打开设置之后找到【显示与亮度】。

2.

然后进去,能看到【自动旋转屏幕】,将它打开就可以了。

3.

也可以在下拉菜单中打开旋转。

4.

浏览网页你会不会觉得手机屏幕宽度不够,看许多大的网页看不完整,缩小后字体小的看不清,很不爽很不爽。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7374121.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存