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 日志相册贡献荣誉积分 62762 狗仔卡	发表于 2017-3-18 16:26:31 \| 显示全部楼层 \|阅读模式购买主题已有 5 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 38
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

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

本帖被以下淘专辑推荐:

点评

评分

浏览过的版块