css从下到上效果 |翻书的css3动画

/* 给页面添加背景色 */
body {
background-color: #fff;
}
/* 设置页面中的标题样式 */
h1 {
font-size: 32px;
color: #333;
text-align: center;
margin-top: 100px;
}
/* 给页面中的主要内容框添加样式 */
#main {
width: 80%;
margin: 0 auto;
background-color: #f5f5f5;
padding: 20px;
margin-top: 50px;
}
/* 给主要内容框中的段落添加样式 */
#main p {
font-size: 18px;
color: #666;
line-height: 1.5;
margin-bottom: 20px;
}
/* 给页脚添加样式 */
#footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
/* 鼠标移动到页脚上时改变其背景色 */
#footer:hover {
background-color: #444;
}

上述代码中，大家先给整个页面添加了一个白色的背景色，并通过h1元素设置了页面中的标题样式，设置了字号、颜色、居中和上边距。接下来大家给页面中的主要内容框添加了样式，设置了宽度、居中、背景颜色、内边距和上边距。同时，大家还给主要内容框中的段落添加了样式，设置了字号、颜色、行高和下边距。

最后，大家给页脚添加了样式，设置了背景色、字体颜色、居中、内边距、固定在页面底部和宽度。并加入鼠标移动到页脚上时会改变其背景色的效果。

通过这样的CSS处理，网页从下到上呈现出了清晰的布局和美观的效果，用户体验也相对较佳。