CSS 滚动是让您的网站更具交互性和趣味性的好方法。 下面是一些帮助您实现 CSS 滚动的简单步骤。
html,body {
height:100%;
width:100%;
margin:0;
padding:0;
overflow:hidden;
}
p {
font-size:20px;
line-height:30px;
padding:10px;
text-align:justify;
white-space:pre-wrap;
margin:0;
}
.wrapper {
height:100%;
width:100%;
position:relative;
left:0;
top:0;
}
.container {
height:100%;
width:200%;
position:absolute;
left:0;
top:0;
animation:scroll-left 25s linear infinite;
}
.container p {
float:left;
width:50%;
}
@keyframes scroll-left{
0%{left:0;}
100%{left:-100%;}
}
首先在CSS中将html和body的高度和长度设置为100%，并将margin和padding都设置为0。将overflow设置为hidden可以让页面的滚动效果更加流畅。
之后，设置段落的样式滚动css，包括字体大小、行高、段落内的行间距、文本对齐方式和换行样式。
然后，在包含该段落的容器中，将其高度设置为100%，然后设置一个相对定位的“.wrapper”类，该类允许容器相对于其包含块（即“body”元素）定位。
接下来，在容器内添加一个绝对定位的“.container”类滚动css，并将其长度设置为200%，这允许页面在水平方向滚动。 另外，将其放置在左上角（即右侧边距和顶部边距均为 0）。 在“animation”属性中定义滚动效果。
最后，设置“容器”类中的段落样式，使用“浮动”属性将它们“拆分”为左右部分，以便它们适合容器的长度。
这就是使用 CSS 创建滚动页面的简单步骤。 尝试一下，让您的网站变得独特且具有互动性！
在各种智能手机和平板电脑出现之前的很长一段时间里，网页都是通过表格来布局的。
目前使用最广泛的网页布局形式——Div+CSS
所谓Div+CSS，是指通过HTML“层”标签实现的一种网页布局形式——辅以CSS中对“层”的宽度和排列方式的定义
使用 Div 布局要灵活得多。 首先css页面，每一个都可以嵌入另外一个或几个，子孙无穷无尽。 另外，要改变某个Div的布局位置，只需要相应调整其CSS样式即可。
但所谓Div的灵活性并不是随意排列，它也是遵循一定的排列规则的
具体来说，Table的排列方法通常如下。
通常，Div的布局方式也类似，只不过没有表、行、单元格等很多层级，而只是单层。
那么问题来了，这些Div看起来一模一样，我如何让浏览器知道它们在哪里呢？ 这就是 CSS 发挥作用的地方。 我们可以通过定义CSS样式来实现Div和CSS的联系，然后在HTML中调用这个样式。
例如，如果我们在CSS中声明了一个样式——.row{width:100%;}，那么在HTML中，我们可以指明某个或个别的Div应用到这个类别来调用这个样式。 如下，第二层的Div使用row样式。
将页面分成 12 个相等的列
分栏布局是使用Div+CSS对网页进行布局的主要布局形式，主要是通过将页面分为12栏来实现
一般你听到的网站都是分为几栏的？ 柱子？ 一些。 两列？ 还有。 三列？ 这似乎是比较常见的。 四列？ 这个也比较常见。加列数也不是不可以
那么这些数字和12有什么关系呢？ 很简单css页面，可以被12整除。因此，将页面分为12栏的好处是，借助合并栏可以将页面分为2、3、4栏，如右图所示
首先我们在CSS中定义如下样式
.row {宽度：100％； 显示：柔性； /*为了将div垂直排列在同一行而不是默认的水平排列*/}
.col-1 {宽度：8.33%； }
.col-2 {宽度：16.67%； }
.col-3 {宽度：25%； }
.col-4 {宽度：33.33%；}
.col-5 {宽度：41.67%；}
.col-6 {宽度：50%；}
.col-7 {宽度：58.33%；}
.col-8 {宽度：66.64%；}
.col-9 {宽度：75%；}
.col-10 {宽度：83.33%；}
.col-11 {宽度：91.66%;}
.col-12 {宽度：100%；}
定义了不同长度的列样式后，我们就可以开始在页面中自由排列Div了。 比如假设下图中的黑框就是我们网页中要布局的图层，那么我们可以使用其他的如下代码来实现。
第一栏
第二栏
