CSS数据目录完成方式

2020-10-19 16:53 jianzhan

本文案例讲述了CSS数据目录完成方式。共享给大伙儿供大伙儿参照。实际剖析以下:

这是另类的CSS目录标号技能示例,具体上纯碎的这类实际效果沒有甚么好用使用价值,但是假如你将标号改成照片就大大有效了,呵,这也就变成许多网站都在用的图文导航栏,能够做为主页每一个栏目地导航栏,有照片,有文本,齐整美观大方。


拷贝编码
编码以下:

<!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>CSS目录的应用</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
font-family: Helvetica, sans-serif;
}
h2 {
font-size: 1.7em;
margin-bottom: 5px;
}
h2.number {
position: relative;
top: 0px;
left: 0px;
font-size: 10em;
color: #ccc;
float: left;
margin-right: 10px
}
#page-wrap {
width: 760px;
background: white;
margin: 0 auto;
padding: 10px 0px 50px 0px;
}
.comment-box {
margin: 0px 0px 50px 50px;
padding: 20px;
width: 240px;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<div id="page-wrap">
<div class="comment-box">
<h2 class="number">1</h2>
<p>  在松下1121单据复印机上检测并根据,立即在左边键入复印内嵌指令,
随后点一下“打颖就会实行复印姿势。另外它还能实行简易的脚本制作指令,
这样你能够操纵复印时在特定标识符处换行或輸出其它标识符的作用。。</p>
</div>
<div class="comment-box">
<h2 class="number">2</h2>
<p>  金融机构业务流程票据、支票复印系统软件Delphi控制版,用了FASTREPORT控制,
也有几个自身写的涵数,如今无私奉献给大伙儿,毫无疑问具体指导,
科学研究本程序流程对学习培训Delphi复印作用的撰写很有协助哦。</p>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>

期待本文所述对大伙儿的div+css网页页面设计方案有一定的协助。