css上下页（CSS如何实现一下页面）

本文目录

• CSS如何实现一下页面
• 只用HTML和CSS，怎么让页面上下两部分显示顺序不同
• CSS 实现 一网页上点一下显示一页再点一下继续显示下一页
• CSS控制页面的翻页功
• css如何实现上一页下一页的定义
• css可以控制页面的布局
• CSS中上一页下一页怎么做图片所示那中
• 求用CSS写一个可以跟随页面上下滚动的代码!
• CSS如何做到页面固定高度，header置顶footer固底page内容超过页面长度后可上下滚动

CSS如何实现一下页面

***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》无标题文档《/title》
《/head》
《style type="text/css"》
* {
padding: 0;
margin: 0;
}
.wp {
width: 1200px;
margin: 0 auto;
}
.z {
float: left;
}
.top,.bottom {
width: 420px;
height: 100px;
margin: 0 auto;
}
.top div,.bottom div {
width: 100px;
height: 100px;
line-height: 100px;
color: #fff;
text-align: center;
}
.top .a {
background: #a52a2a;
}
.top .b {
background: #6495ed;
}
.top .c {
background: #00008B;
}
.bottom .d {
background: #483D8B;
}
.bottom .e {
background: #1E90FF;
}
.bottom .f {
background: #008000;
}
《/style》
《body》
《div class="wp"》
《div class="top" style="margin-top: 80px;"》
《div class="a z"》A《/div》
《div class="b z"》B《/div》
《div class="c z"》C《/div》
《/div》
《div class="bottom"》
《div class="d z"》D《/div》
《div class="e z"》E《/div》
《div class="f z"》F《/div》
《/div》
《/div》
《/body》
《/html》
直接复制上方代码，保存为html放到服务器访问。
我也是新手，请问你是新手还是？写的不好，希望采纳

只用HTML和CSS，怎么让页面上下两部分显示顺序不同

只用Html+CSS的话
建议写两个B.html网页。
然后点击yes显示id=yes在前面的那个网页。
否则显示id=no在前面的网页。

CSS 实现 一网页上点一下显示一页再点一下继续显示下一页

• css只能控制样式，要实现事件的触发还需要用js才行的

• 你需要找个新闻类的源码，可以分页的，你下一个这类的源码分析一下就能用了。

CSS控制页面的翻页功

CSS 只能控制样式，事件需要js控制，

点击下一页 

 将某个css（区分当前页与其他页的css）赋值给某一页（当前页）。

css如何实现上一页下一页的定义

是实现上一页的调用链接，还是让它横排，让它横排就用float:left; margin:控制距离

css可以控制页面的布局

《!DOCTYPE html》
***隐藏网址***
3 《head》
***隐藏网址***
5 《title》网页布局练习《/title》
6
7 《link href="../EX_Asp_Net/css/div.css" rel="stylesheet" /》
8 《/head》
9 《body》
10 《h1 align="center"》利用div和css对页面的布局进行调整《/h1》《hr /》
11 《div class="d1"》
12 《h3》窗口1《/h3》
13 《/div》
14 《div class="d2"》《h3》窗口2《/h3》《/div》
15 《div class="d3"》《h3》窗口3《/h3》《/div》
16 《/body》
17 《/html》
1
2
3
4
css代码：
1 bod {
2 margin:100%;
3 padding:100%;
4
5 }
6 .d1{
7 width:200px;
8 height:600px;
9 background-color:red;
10 margin-left:20px;
11 margin-top:20px;
12 position:absolute;
13 }
14 .d2{
15 width:800px;
16 height:150px;
17 background-color:greenyellow;
18 position:absolute;
19 left:235px;
20 margin-top:20px;
21
22 }
23 .d3{
24 width:800px;
25 heigh

CSS中上一页下一页怎么做图片所示那中

发一个给你吧，
《style》
DIV.fenye {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.fenye A {
BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 1px solid; TEXT-DECORATION: underline
}
DIV.fenye A:hover {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.fenye A:active {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #f00; BORDER-BOTTOM: #000099 1px solid
}
DIV.fenye SPAN.current {
BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 1px solid; COLOR: #000; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #fff
}
DIV.fenye SPAN.disabled {
BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}
《/style》
《div class=fenye》《span class=disabled》 《 《/span》《span class=current》1《/span》《a href=2》2《/a》《a href=3》3《/a》《a href=4》4《/a》《a href=5》5《/a》《a href=6》6《/a》《a href=7》7《/a》...《a href=199》199《/a》《a href=200》200《/a》《a href=2》 》 《/a》《/div》
可以扩展许多种自己需要的。

求用CSS写一个可以跟随页面上下滚动的代码!

你的意思是固定在页面的一个地方，碎屏滚动吗？用position：fixed！定位

CSS如何做到页面固定高度，header置顶footer固底page内容超过页面长度后可上下滚动

《style type="text/css"》
html,body{height:100%;}/*定义高度为100%*/
*{margin:0;padding:0;}
.header,.footer{width:100%;height:5%;background:#000;}/*上下高度5%；中间盒子高度90%*/
.main{overflow-y:scroll;width:100%;height:90%}  
.main p{height:1500px;width:100%;text-align:center;line-height:1500px;} 
《/style》
《div class="header"》《/div》
《div class="main"》
《p》高度1500px《/p》
《/div》
《div class="footer"》《/div》

顶部和底部高度5%；中间盒子高度90%，这样刚好100%，你内容填充到中间的盒子就行，如果需要特殊样式，顶部和底部可以用position定位，main盒子加上margin-top、margin-bottom分别等于顶部和底部的高度就行

所有div的总高度不能大于100%，不然会出现2个滚动条，因为现在的滚动条是main盒子的，如果超过100%；浏览器的滚动条也会出现