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

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

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

{:9_232:}

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

交作业，只是为麻我的图像有两个滚动条？{:5_103:}
<!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的软件找了好久{:10_266:}
感觉两个滚动条不好看, 就去掉了height: 100%

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

图片在哪找的{:10_319:}

莫希 发表于 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

滚动条有点朴素    {:10_279:}

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

{:10_277:}

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

回复看帖

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

785

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

{:5_90:}
页: [1]
查看完整版本: 0 0 8 7 - ‘局部’滚动交互操作 - 纵向篇