0 0 8 8 - ‘局部’滚动交互操作 - 横向篇

不二如是 · 发表于 2017-3-18 16:26:31

购买主题 已有 5 人购买 本主题需向作者支付 2 鱼币 才能浏览

chip · 发表于 2017-3-18 20:17:08

新人前来学习，顶一个！

Ъγ:_小ツ雨oο · 发表于 2017-6-21 10:45:50

这种效果不好吧，版主，下面滚动条不好看，但是可以扩展见识，好神奇

莫希 · 发表于 2019-1-15 15:49:58

RE: 0 0 8 8 - ‘局部’滚动交互操作 - 横向篇 [修改]

suweixuan1998 · 发表于 2020-1-15 11:18:25

<!doctype html>
<html lang="en">
<head>
    <title>无崖</title>
    <meta charset="utf-8">
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background: #000 url("1.jpg") no-repeat;
            background-size: cover;
            margin: 0;
            padding: 0;
            font-family: "Abadi MT Condensed Light";
            position: relative;
        }
        #intro{
            position: absolute;
            top: 13%;
            left: 16%;
        }

        #intro h1{
            font-size: 66px;
            text-transform: capitalize;/*文本中的每个单词以大写字母开头。*/
            color: darksalmon;
        }

        #intro ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #intro li{
            display: inline-block;
        }

        #intro li a{
            color: deeppink;
            font-size: 55px;
            text-decoration: none;
            padding: 13px;
        }
        #content{
            width: 8000px;
            height: 350px;
            background:rgba(0,0,0,.11);

        }
        .scroll{
            display: block;
            height: 361px;
            width: 2000px;
            box-sizing: border-box;
            float: left;

        }


        .scroll h1{
            font-weight:bolder;/*更粗*/

        }
        .scroll p{
            font-size: 33px;
        }
        .scroll img{
            float: left;
            width: 333px;
        }
        #new{
            position: absolute;
            bottom: 3%;
            width: 100%;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="intro">
    <h1>无门慧开禅师</h1>
    <ul>
        <li><a href="#chun">spring</a></li>
        <li><a href="#xia">summer</a></li>
        <li><a href="#qiu">autumn</a></li>
        <li><a href="#dong">winter</a></li>
    </ul>
</div>
<div id="new">
<div id="content">
    <div class="scroll" id="chun">
        <h1>春</h1>
        <img src="春.jpg">
        <p>春有百花<br><br><br><br><br><br></p>

    </div>

    <div class="scroll" id="xia">
        <h1>夏</h1>
        <img src="夏.jpg">
        <p>夏有凉风<br><br><br><br><br><br></p>
    </div>

    <div class="scroll" id="qiu">
        <h1>秋</h1>
        <img src="秋.jpg">
        <p>秋有月<br><br><br><br><br><br></p>
    </div>

    <div class="scroll" id="dong">
        <h1>冬</h1>
        <img src="冬.jpg">
        <p>冬有雪</p>
    </div>
</div>
</div>
</body>
</html>

笋头蒜头 · 发表于 2020-3-23 10:13:48

哈哈哈哈

287187056 · 发表于 2020-4-2 15:58:32

提示: 作者被禁止或删除内容自动屏蔽

小脑斧 · 发表于 2020-4-14 17:48:26

本帖最后由小脑斧于 2020-4-14 17:50 编辑

u=14335000,2737653851&fm=26&gp=0.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>87_局部滚动</title>
    <style type="text/css">
        body{
            background: url('girl.jpg')  no-repeat center center;
            background-attachment: fixed;/*填充图片*/
            margin: 0;
            padding: 0;
            font-family: "Abadi MT Condensed Light";
            position: relative;
            /*background-size: cover;*/
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        #intro{
            position: absolute;
            top: 1%;
            left: 16%;            
        }
        #intro h1{
            font-size: 55px;
            text-transform: capitalize;
            color: darksalmon;
        }
        #intro ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #intro li{
            display: inline-block;
        }
        #intro li a{
            color: deeppink;
            font-size: 33px;
            /*text-decoration: none;下划线*/
            padding: 13px;
        }
        #content{  
            width: 6000px;
            height: 200px;
            background: rgba0,0,0,.11);      
            /*height: 100%;局部滚动*/
        }
         .scroll{
            width: 1500px;
            /*text-align: center;*/
            display: block;
            box-sizing: border-box;
            float: left;
        }
         .scroll h1{
            font-weight: bolder;            
        }
        .scroll p{
            font-size: 33px;
        }
        .scroll img{
            float: left;
        }
        #new{
            position: absolute;
            bottom: 3%;
            width: 100%;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="intro">
        <h1>无门慧开禅师</h1>
        <ul>
            <li><a href="#chun">spring</a></li> <!-- 锚点-->
            <li><a href="#xia">summer</a></li>
            <li><a href="#qiu">autumn</a></li>
            <li><a href="#dong">winter</a></li>
        </ul>
    </div>
    <div id="new">
        <div id="content">
            <div class="scroll" id="chun">
                <h1>春</h1>
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1245195671,1629212421&fm=15&gp=0.jpg">
                <p>春有百花<br><br><br><br><br><br></p>

            </div>

            <div class="scroll" id="xia">
                <h1>夏</h1>
                <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1923927927,528396586&fm=15&gp=0.jpg">
                <p>夏有凉风<br><br><br><br><br><br></p>
            </div>

            <div class="scroll" id="qiu">
                <h1>秋</h1>
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1200800732,3300049126&fm=15&gp=0.jpg">
                <p>秋有鱼<br><br><br><br><br><br></p>
            </div>

            <div class="scroll" id="dong">
                <h1>冬</h1>
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1381197364,2218742028&fm=15&gp=0.jpg">
                <p>冬有雪</p>
            </div>
        </div>
    </div>
</body>
</html>

tianyuan · 发表于 2020-6-5 21:52:29

omg123460 · 发表于 2021-11-13 20:14:18

红tea少年 · 发表于 2022-6-19 00:32:14

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57001 狗仔卡	发表于 2017-3-18 16:26:31 \| 显示全部楼层 \|阅读模式购买主题已有 5 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 36
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

287187056 287187056 当前离线 UID 104738 日志相册贡献荣誉积分 128 狗仔卡头像被屏蔽	发表于 2020-4-2 15:58:32 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报显身卡

[庖丁解牛] 0 0 8 8 - ‘局部’滚动交互操作 - 横向篇

本帖被以下淘专辑推荐:

点评

评分