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

不二如是 · 发表于 2017-3-18 11:37:43

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

庚午 · 发表于 2018-2-28 21:43:42

隨鈊乄鎍慾 · 发表于 2018-8-1 16:02:03

交作业，只是为麻我的图像有两个滚动条？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室</title>
    <style type="text/css">
        body{
            background: url(1.png) no-repeat 50% 0;
        }
        #content{
            color: #ffffff;
            position: absolute;
            right:3%;
            width:333px;
            padding:0 33px;
            background:rgba(255,255,255,.11);
            /*要实现局部滚动，必须要使用overflow属性。*/
            overflow:auto;
            height: 100%;
        }
        .scroll{
            width:333px;
            text-align:center;
        }
        .scroll h1
            font-weight:bolder;/*字体加粗*/
            size: 33px;
        }
        .scroll p{
            font-size:22px;
        }
        .scroll img{
            margin-top: 30px;
        }
        #intro{
            color: #ffffff;
        }
        li{
            color: red;
        }
        #intro{
            position: absolute;
            top:3%;
            left:16%;
        }
        #intro h1{
            font-size:66px;
            text-transform:capitalize;
        }
        #intro ul{
            margin:0;
            padding:0;
            list-style:none;
        }
        #intro li {
            display: inline-block;
        }
        #intro li a{
            color:deeppink;
            font-size: 35px;
            text-decoration:none;

        }
    </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="content">
    <div class="scroll" id="chun">
        <h1>春</h1>
        <img src="chun.png">
        <p>春有百花<br><br><br><br><br><br></p>

    </div>

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

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

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

MSK · 发表于 2018-8-7 13:08:09

本帖最后由 MSK 于 2018-8-7 13:09 编辑

交作业
ubuntu上找个录gif的软件找了好久

感觉两个滚动条不好看, 就去掉了height: 100%

floride · 发表于 2018-8-28 18:31:57

图片在哪找的

莫希 · 发表于 2019-1-15 15:22:31

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

suweixuan1998 · 发表于 2020-1-15 10:55:58

<!doctype html>
<html lang="en">
<head>
    <title>无崖</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            background: #12fffa url("1.png") no-repeat fixed 50% 0;

        }
        #intro{
            position: absolute;
            top: 3%;
            left: 16%;
        }

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

        }

        #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;
        }
        #content{

            position:absolute;
            right:3%;
            width:333px;
            padding:0 33px;
            background:rgba(255,255,255,.11);
            overflow: auto;
            height: 99%;
        }
        #content img{
            width:333px;
        }
        #content .scroll {
            width:333px;
            text-align: center;
        }
        #content .scroll h1{
            font-weight:bolder;/*更粗*/
            size: 33px;
        }
        #content .scroll p{
            font-size: 22px;
        }
        #content .scroll img{
            margin-top:3px;/*图片距离标题的距离*/
        }
    </style>
</head>
<body>
<div id="intro">
    <h1>无门慧开禅师</h1>
    <ul>
        <li><a href="#chun">spring</a></li><br>
        <li><a href="#xia">summer</a></li><br>
        <li><a href="#qiu">autumn</a></li><br>
        <li><a href="#dong">winter</a></li>
    </ul>
</div>

<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>
</body>
</html>

笋头蒜头 · 发表于 2020-3-23 09:52:23

哈哈哈哈

287187056 · 发表于 2020-4-2 14:48:28

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

小脑斧 · 发表于 2020-4-14 17:02:16

滚动条有点朴素

tianyuan · 发表于 2020-6-5 21:37:30

1041556532 · 发表于 2020-6-16 08:51:24

回复看帖

omg123460 · 发表于 2021-7-8 16:11:53

红tea少年 · 发表于 2022-6-18 21:14:38

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

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

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

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

本帖被以下淘专辑推荐:

点评

评分

浏览过的版块