0 0 8 8 - ‘局部’滚动交互操作 - 横向篇,Web密训营,Web开发,鱼C论坛

不二如是 发表于 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 编辑

<!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

{:10_277:}

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

{:10_277:}

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

{:5_109:}

页: [1]

鱼C论坛's Archiver