vue 横向滑动拖动

ue 横向滚动

HTML 代码

<div class="slide-box">
      <div class="slide-within">
        <div class="slide-item" v-for="(item,index) in listData" :key="index">{{ index + item.label }}</div>
      </div>
    </div>

css 代码

.slide-box {
  margin-top: 200px;
  overflow: hidden;
}

.slide-within {
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

.slide-item {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin-right: 30px;
}

js 代码

天跟大家分享一个算可以的jQuery制作横向滑动横幅滚动，希望大家喜欢，如果不喜欢。。那算了。

打开Editplus网页编辑工具，新建一个HTML网页在body区添加如图代码。

然后在title下方添加CSS样式代码如图

最后在body结尾下添加jQuery代码，点击键盘上的ctrl+s键保存，

注意：此效果需要用到js文件，因为文件里的代码太多，我就不在这里展示了，如果需要这个效果的可以关注我后私聊我，我会分享给大家的，或者加咱们的网站前端交流群309073798，每晚都会分享最新的网站前端技术，欢迎大家的加入。最欢迎大家在留言区吐槽

页布局对网站的外观特别重要，布得好，留得住用户，增收流量；布不好，用户逃之夭夭，还顺道骂两句。大多数Web系统会借用杂志或报纸那样排版，至于为什么这样，我不说，你也懂的，就是产品经理吵架吵不过程序员时，常说的：用户教育成本低。

在HTML中，如果是数据集(像excel那种)的布局，常用<table>标签，如果是内容块(网站板块)的布局，则常用<div>标签。

5.1 表格布局

表格由<table>标签来定义。每个表格均有若干行<tr>标签和列<td>标签组成。<td>数据单元格的内容可以包含文本、图片、水平线、表格等内容。表格头由<th>标签生成。<table>标签常用的属性是border，用来指定边框宽度。<th>和<td>的属性rowspan，可指定跨行数。

如果真的不理解表格的意义，那你打开excel，好好操作一翻，横向合并一下单元格就知道什么是跨行了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第5个HTML-表格</title>
</head>
<body>
<table border="1">
    <tr>
        <th>序号</th>
        <th>产品名称</th>
        <th>编号</th>
        <th>规格</th>
    </tr>
    <tr>
        <td>1</td>
        <td>平板电脑</td>
        <td>P1010</td>
        <td>9.7英尺</td>
    </tr>
    <tr>
        <td>2</td>
        <td>笔记本电脑</td>
        <td>C2111</td>
        <td>15英尺</td>
    </tr>
</table>
</body>
</html>

输出结果

5.2 块布局

网站分块布局，常用<div>标签进行定义。常见网站布局为上中下，上放导航栏，中间放内容，底部放版权和友情链接，而它们的分割便是由<div>标签负责的。当然，用<div>布局，需要CSS的支持才行。同表格<td>标签一样，<div>标签中，也是可以嵌入<p>、<hr>等标签的。

<div style="color:blue">
    <h3>老陈说编程</h3>
    <p>一个当了10年技术总监的老家伙，分享多年的编程经验。<br/>
        想学编程的朋友，可关注：老陈说编程。<br/>
        分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。</p>
</div>

输出结果

好了，有关HTML布局的内容，老陈先讲这么多，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##Web##程序员##CSS##HTML5#

在线咨询

上一篇：前端开发-HTML5 如何拖拽上传文件？
下一篇：Apache Groovy 运行 Shell 命令

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。