css之目录省略号
2019-12-05 本文已影响0人
lesdom
效果
directory.png
思路
让省略号铺满一行，相对整行绝对定位。标题定位在左边，页码定位在右边，层级高出省略号的层级。
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>报告</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style mce_bogus="1" type="text/css">
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
body {
font-family: SimSun;
font-size: 14px;
}
li {
list-style: none;
}
@page {
size: A4;
margin-top: 1.0in;
-fs-flow-top: "header";
-fs-flow-bottom: "footer";
-fs-flow-left: "left";
-fs-flow-right: "right";
border-top: thin solid black;
padding: 0.325em;
}
/* 页面 */
.container {
width: 720px;
margin: 0 auto;
}
.page {
width: 720px;
height: 960px;
}
/* 第二页 */
.page-two-title {
font-size: 22px;
font-weight: bold;
padding: 95px 0 30px;
color: #2D74B5;
}
.page-two-directory p {
font-size: 12px;
margin-bottom: 25px;
font-weight: bold;
display: block;
clear: both;
}
.page-two-directory ul li {
width: 720px;
display: block;
clear: both;
overflow: hidden;
height: 20px;
line-height: 20px;
margin: 10px 0;
position: relative;
}
.page-two-directory ul li span {
background: white;
display: inline-block;
padding: 0 10px;
}
.page-two-directory ul li .page-two-theme{
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.page-two-directory ul li .page-two-page{
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
.page-two-directory ul li .page-two-point {
position: absolute;
top: 0;
left: 0;
width: 670px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<!-- 第二页 -->
<div class="page">
<div class="page-two">
<div class="page-two-title">
<p>目录</p>
</div>
<div class="page-two-directory">
<ul>
<li><span class="page-two-page">3</span><span class="page-two-theme">一、概述</span>
<p class="page-two-point">………………………………………………………………………………………………………………………………………………………………………</p>
</li>
<li><span class="page-two-page">3</span><span class="page-two-theme">二、基本情况介绍</span>
<p class="page-two-point">………………………………………………………………………………………………………………………………………………………………………</p>
</li>
<li><span class="page-two-page">3</span><span class="page-two-theme">三、资产盘点范围</span>
<p class="page-two-point">………………………………………………………………………………………………………………………………………………………………………</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
