이것이 나이고 내가 할 수 있다면, 나는 생성 된 HTML을 다시 작성하고 div의 것을 사용하는 대신 목록으로 정렬 할 것이다. 그런 의미에서 더 의미가 있습니다. 나는 뉴스 페이지를 기반으로 내가 할 일의 예를 들었다.
을 Heres 코드 :
<html>
<head>
<title></title>
<style type="text/css">
#wrapper{
height:940px;
position:relative;
}
.pages{
overflow:hidden;
display:block;
float:left;
margin:4px;
margin-left:10px;
font-family:Arial, Helvetica, sans-serif;
}
a.linksp:link{
color:#000000;
text-decoration:none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
a.linksp:visited{
color:#000000;
text-decoration:none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
a.linksp:active{
color:#000000;
text-decoration:none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
a.linksp:hover{
color:#000000;
text-decoration:none;
background-color:#FFFF00;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
.pagination{
bottom:0;
left:0;
position:absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="article">
<h2>News title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing venenatis lacus a adipiscing. Sed porta nibh a risus tempor id commodo mauris lobortis. Sed commodo rutrum quam at molestie. Sed dapibus orci non sem lobortis a tincidunt leo vulputate. Duis non risus sit amet erat pulvinar viverra tristique vel mi. In vulputate sapien nec ante faucibus rutrum. Mauris vitae dolor ac lacus suscipit vehicula nec id urna. In interdum, erat eget bibendum venenatis, libero ligula vestibulum enim, et tincidunt lectus tortor vel mauris. Morbi id vestibulum libero. Quisque nisl tellus, congue nec blandit et, feugiat ut metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fermentum dolor nec dolor fermentum luctus. Suspendisse accumsan turpis et nibh faucibus fermentum. Nulla sit amet lorem eu mi tempus condimentum vitae et turpis. Aenean lobortis, sem porttitor euismod consectetur, mi leo eleifend velit, et sagittis tortor mauris lacinia nulla. Maecenas porttitor diam at justo tincidunt ut varius lacus sodales. Suspendisse nec diam nunc.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor condimentum dolor nec porttitor. Fusce porttitor urna pharetra ante vehicula vel iaculis sem condimentum. Aliquam et sem lectus, ut semper neque. Vivamus justo magna, porta sed imperdiet in, vestibulum ut mi. Donec ultrices ullamcorper sem, eu mollis tellus vulputate non. Sed sagittis venenatis lacus fringilla varius. Etiam vestibulum dui et lorem egestas gravida. Cras cursus sodales mauris, sed suscipit tortor pharetra quis. Nulla facilisis varius commodo. Curabitur urna sem, vestibulum condimentum tincidunt eget, malesuada eu ipsum. Integer tristique, sapien sit amet sollicitudin volutpat, mauris velit sagittis urna, ut mollis purus urna quis dui. Donec neque arcu, auctor et blandit a, pretium sed leo. Ut ut elit enim. Sed eu lacus justo, nec sollicitudin erat. Nulla congue auctor nisl vel ultricies. Mauris ac luctus nisl. Phasellus sapien lectus, commodo ut interdum nec, sagittis vitae arcu. Praesent nibh eros, molestie ut condimentum eu, tristique vitae eros. </p>
</div>
<div class="article">
<h2>News title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing venenatis lacus a adipiscing. Sed porta nibh a risus tempor id commodo mauris lobortis. Sed commodo rutrum quam at molestie. Sed dapibus orci non sem lobortis a tincidunt leo vulputate. Duis non risus sit amet erat pulvinar viverra tristique vel mi. In vulputate sapien nec ante faucibus rutrum. Mauris vitae dolor ac lacus suscipit vehicula nec id urna. In interdum, erat eget bibendum venenatis, libero ligula vestibulum enim, et tincidunt lectus tortor vel mauris. Morbi id vestibulum libero. Quisque nisl tellus, congue nec blandit et, feugiat ut metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fermentum dolor nec dolor fermentum luctus. Suspendisse accumsan turpis et nibh faucibus fermentum. Nulla sit amet lorem eu mi tempus condimentum vitae et turpis. Aenean lobortis, sem porttitor euismod consectetur, mi leo eleifend velit, et sagittis tortor mauris lacinia nulla. Maecenas porttitor diam at justo tincidunt ut varius lacus sodales. Suspendisse nec diam nunc.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor condimentum dolor nec porttitor. Fusce porttitor urna pharetra ante vehicula vel iaculis sem condimentum. Aliquam et sem lectus, ut semper neque. Vivamus justo magna, porta sed imperdiet in, vestibulum ut mi. Donec ultrices ullamcorper sem, eu mollis tellus vulputate non. Sed sagittis venenatis lacus fringilla varius. Etiam vestibulum dui et lorem egestas gravida. Cras cursus sodales mauris, sed suscipit tortor pharetra quis. Nulla facilisis varius commodo. Curabitur urna sem, vestibulum condimentum tincidunt eget, malesuada eu ipsum. Integer tristique, sapien sit amet sollicitudin volutpat, mauris velit sagittis urna, ut mollis purus urna quis dui. Donec neque arcu, auctor et blandit a, pretium sed leo. Ut ut elit enim. Sed eu lacus justo, nec sollicitudin erat. Nulla congue auctor nisl vel ultricies. Mauris ac luctus nisl. Phasellus sapien lectus, commodo ut interdum nec, sagittis vitae arcu. Praesent nibh eros, molestie ut condimentum eu, tristique vitae eros. </p>
</div>
<div class="article">
<h2>News title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing venenatis lacus a adipiscing. Sed porta nibh a risus tempor id commodo mauris lobortis. Sed commodo rutrum quam at molestie. Sed dapibus orci non sem lobortis a tincidunt leo vulputate. Duis non risus sit amet erat pulvinar viverra tristique vel mi. In vulputate sapien nec ante faucibus rutrum. Mauris vitae dolor ac lacus suscipit vehicula nec id urna. In interdum, erat eget bibendum venenatis, libero ligula vestibulum enim, et tincidunt lectus tortor vel mauris. Morbi id vestibulum libero. Quisque nisl tellus, congue nec blandit et, feugiat ut metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fermentum dolor nec dolor fermentum luctus. Suspendisse accumsan turpis et nibh faucibus fermentum. Nulla sit amet lorem eu mi tempus condimentum vitae et turpis. Aenean lobortis, sem porttitor euismod consectetur, mi leo eleifend velit, et sagittis tortor mauris lacinia nulla. Maecenas porttitor diam at justo tincidunt ut varius lacus sodales. Suspendisse nec diam nunc.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor condimentum dolor nec porttitor. Fusce porttitor urna pharetra ante vehicula vel iaculis sem condimentum. Aliquam et sem lectus, ut semper neque. Vivamus justo magna, porta sed imperdiet in, vestibulum ut mi. Donec ultrices ullamcorper sem, eu mollis tellus vulputate non. Sed sagittis venenatis lacus fringilla varius. Etiam vestibulum dui et lorem egestas gravida. Cras cursus sodales mauris, sed suscipit tortor pharetra quis. Nulla facilisis varius commodo. Curabitur urna sem, vestibulum condimentum tincidunt eget, malesuada eu ipsum. Integer tristique, sapien sit amet sollicitudin volutpat, mauris velit sagittis urna, ut mollis purus urna quis dui. Donec neque arcu, auctor et blandit a, pretium sed leo. Ut ut elit enim. Sed eu lacus justo, nec sollicitudin erat. Nulla congue auctor nisl vel ultricies. Mauris ac luctus nisl. Phasellus sapien lectus, commodo ut interdum nec, sagittis vitae arcu. Praesent nibh eros, molestie ut condimentum eu, tristique vitae eros. </p>
</div>
<div class="pagination">
<div class='pages'>
[<b>1</b>]
</div>
<div class='pages'>
<a href='#' class='linksp'>2</a>
</div>
<div class='pages'>
<a href='#' class='linksp'>3</a>
</div>
<div class='pages'>
<a href='#' class='linksp'>4</a>
</div>
<div class='pages'>
<a href='#' class='linksp'>></a>
</div>
<div class='pages'>
<a href='#' class='linksp'>>></a>
</div>
</div>
</div>
</body>
</html>
먼저 내가 940px의 높이가 고정이가 내 뉴스 기사 및 페이지 매김 컨트롤을 모두 포함해야합니다 래퍼 사업부를 만들 것입니다. 래퍼 div 내부에서 기사를 표시하려면 h2 및 p 태그 주위에 div를 추가하여 각 기사의 컨테이너 역할을하고 필요에 따라 기사 사이에 여백을 쉽게 추가 할 수있게하십시오.
나는 페이지 스타일 div를 만들었습니다.이 페이지 스타일 div는 모든 페이지 스타일 컨트롤을 포함하고 있습니다.이 스타일을 래퍼 div의 맨 아래에 붙입니다.이 스타일을 적용 할 것입니다 : position:absolute; bottom:0; left:0; 래퍼 div의 크기 , 이것은 항상 그것의 바닥에 앉을 것입니다.
position:fixed이 모든 브라우저에서 인식되지 않기 때문에 페이지 번호 지정 요소에 고정 위치를 적용하는 것보다 효과적입니다.
죄송합니다. 원하시는 것이 아니라면 어떤 방법 으로든 도움이 되었기를 바랍니다.
대니
감사 ...이 문제를 해결하는 데 도움이되었습니다. 한 가지 질문 : 페이지 네이션 링크를 왼쪽 여백에서 가장 왼쪽의 100 픽셀부터 시작하려면 어떻게해야합니까? – John
안녕하세요 존 왼쪽부터 100px 이상의 페이지 매김을 이동하려면 왼쪽에 100px를 추가하고 싶다면 도움이 되니 기쁩니다. 도움이 될 것입니다! 대니 – Danny