鱼C论坛

 找回密码
 立即注册
查看: 2712|回复: 14

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

[复制链接]
发表于 2017-3-18 11:37:43 | 显示全部楼层 |阅读模式
购买主题 已有 5 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-2-28 21:43:42 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-1 16:02:03 | 显示全部楼层
交作业,只是为麻我的图像有两个滚动条?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: url(1.png) no-repeat 50% 0;
  9.         }
  10.         #content{
  11.             color: #ffffff;
  12.             position: absolute;
  13.             right:3%;
  14.             width:333px;
  15.             padding:0 33px;
  16.             background:rgba(255,255,255,.11);
  17.             /*要实现局部滚动,必须要使用overflow属性。*/
  18.             overflow:auto;
  19.             height: 100%;
  20.         }
  21.         .scroll{
  22.             width:333px;
  23.             text-align:center;
  24.         }
  25.         .scroll h1
  26.             font-weight:bolder;/*字体加粗*/
  27.             size: 33px;
  28.         }
  29.         .scroll p{
  30.             font-size:22px;
  31.         }
  32.         .scroll img{
  33.             margin-top: 30px;
  34.         }
  35.         #intro{
  36.             color: #ffffff;
  37.         }
  38.         li{
  39.             color: red;
  40.         }
  41.         #intro{
  42.             position: absolute;
  43.             top:3%;
  44.             left:16%;
  45.         }
  46.         #intro h1{
  47.             font-size:66px;
  48.             text-transform:capitalize;
  49.         }
  50.         #intro ul{
  51.             margin:0;
  52.             padding:0;
  53.             list-style:none;
  54.         }
  55.         #intro li {
  56.             display: inline-block;
  57.         }
  58.         #intro li a{
  59.             color:deeppink;
  60.             font-size: 35px;
  61.             text-decoration:none;

  62.         }
  63.     </style>
  64. </head>
  65. <body>

  66. <div id="intro">
  67.     <h1>无门慧开禅师</h1>
  68.     <ul>
  69.         <li><a href="#chun">spring</a></li>
  70.         <li><a href="#xia">summer</a></li>
  71.         <li><a href="#qiu">autumn</a></li>
  72.         <li><a href="#dong">winter</a></li>
  73.     </ul>
  74. </div>

  75. <div id="content">
  76.     <div class="scroll" id="chun">
  77.         <h1>春</h1>
  78.         <img src="chun.png">
  79.         <p>春有百花<br><br><br><br><br><br></p>

  80.     </div>

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

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

  91.     <div class="scroll" id="dong">
  92.         <h1>冬</h1>
  93.         <img src="dong.png">
  94.         <p>冬有雪</p>
  95.     </div>
  96. </div>
  97. </body>
  98. </html>
复制代码

87.gif

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-8-1 16:18

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-7 13:08:09 | 显示全部楼层
本帖最后由 MSK 于 2018-8-7 13:09 编辑

交作业
ubuntu上找个录gif的软件找了好久
感觉两个滚动条不好看, 就去掉了height: 100%
y.gif
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-28 18:31:57 | 显示全部楼层
图片在哪找的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-15 15:22:31 | 显示全部楼层
RE: 0 0 8 7 - ‘局部’滚动交互操作 - 纵向篇 [修改]
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-15 10:55:58 | 显示全部楼层
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <title>无崖</title>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         body{
  8.             background: #12fffa url("1.png") no-repeat fixed 50% 0;

  9.         }
  10.         #intro{
  11.             position: absolute;
  12.             top: 3%;
  13.             left: 16%;
  14.         }

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

  18.         }

  19.         #intro ul{
  20.             margin: 0;
  21.             padding: 0;
  22.             list-style: none;
  23.         }

  24.         #intro li{
  25.             display: inline-block;
  26.         }

  27.         #intro li a{
  28.             color: deeppink;
  29.             font-size: 55px;
  30.             text-decoration: none;
  31.         }
  32.         #content{

  33.             position:absolute;
  34.             right:3%;
  35.             width:333px;
  36.             padding:0 33px;
  37.             background:rgba(255,255,255,.11);
  38.             overflow: auto;
  39.             height: 99%;
  40.         }
  41.         #content img{
  42.             width:333px;
  43.         }
  44.         #content .scroll {
  45.             width:333px;
  46.             text-align: center;
  47.         }
  48.         #content .scroll h1{
  49.             font-weight:bolder;/*更粗*/
  50.             size: 33px;
  51.         }
  52.         #content .scroll p{
  53.             font-size: 22px;
  54.         }
  55.         #content .scroll img{
  56.             margin-top:3px;/*图片距离标题的距离*/
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61. <div id="intro">
  62.     <h1>无门慧开禅师</h1>
  63.     <ul>
  64.         <li><a href="#chun">spring</a></li><br>
  65.         <li><a href="#xia">summer</a></li><br>
  66.         <li><a href="#qiu">autumn</a></li><br>
  67.         <li><a href="#dong">winter</a></li>
  68.     </ul>
  69. </div>

  70. <div id="content">
  71.     <div class="scroll" id="chun">
  72.         <h1>春</h1>
  73.         <img src="春.jpg">
  74.         <p>春有百花<br><br><br><br><br><br></p>

  75.     </div>

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

  81.     <div class="scroll" id="qiu">
  82.         <h1>秋</h1>
  83.         <img src="秋.jpg">
  84.         <p>秋有雪<br><br><br><br><br><br></p>
  85.     </div>

  86.     <div class="scroll" id="dong">
  87.         <h1>冬</h1>
  88.         <img src="冬.jpg">
  89.         <p>冬有雪</p>
  90.     </div>
  91. </div>
  92. </body>
  93. </html>
复制代码
1579056917(1).jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-23 09:52:23 | 显示全部楼层
哈哈哈哈
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

头像被屏蔽
发表于 2020-4-2 14:48:28 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-4-14 17:02:16 | 显示全部楼层
u=14335000,2737653851&amp;fm=26&amp;gp=0.jpg 滚动条有点朴素   
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-5 21:37:30 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-16 08:51:24 | 显示全部楼层
回复看帖
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-8 16:11:53 | 显示全部楼层
785
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-6-18 21:14:38 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 00:14

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表