DIV教程之纯CSS代码完成翻页 background,absolute,position,blank,content

仓酷云 发表于 2015-1-16 00:14:25

DIV教程之纯CSS代码完成翻页

使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
<!DOCTYPE<ahref="/keys/html/index.html"target="_blank">html</a>PUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh"lang="zh">
<headprofile="http://www.w3.org/2000/08/w3c-synd/#">
<metahttp-equiv="content-language"content="zh-cn"/>
<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<style>
dl{
position:absolute;
width:240px;
height:170px;
border:10pxsolid#eee;
}
dd{
margin:0;
width:240px;
height:170px;
overflow:hidden;
}
img{
border:1pxsolidblack
}
dt{
position:absolute;
right:3px;
top:50px;
}
a{
display:block;
margin:1px;
width:20px;
height:20px;
text-align:center;
font:70012px/20px"宋体",sans-serif;
color:#fff;
text-decoration:none;
background:#666;
border:1pxsolid#fff;
filter:alpha(opacity=40);
opacity:.4;
}
a:hover{
background:#000
}
</style>
</head>
<body>
<dl>
<dt><ahref="#a"title="">1</a><ahref="#b"title="">2</a><ahref="#c"title="">3</a></dt>
<dd>

<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh"lang="zh">
<headprofile="http://www.w3.org/2000/08/w3c-synd/#">
<metahttp-equiv="content-language"content="zh-cn"/>
<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<style>
dl{
position:absolute;
width:240px;
height:170px;
border:10pxsolid#eee;
}
dd{
margin:0;
width:240px;
height:170px;
overflow:hidden;
}
dt{
position:absolute;
right:1px;
}
ul{
margin:0;
padding:0;
width:260px;
height:170px;
list-style:none;
background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif")no-repeat75%20px;
border:1pxsolid#ccc
}
#b{
background-position:75%center
}
#c{
background-position:75%86%
}
li{
width:205px;
height:27px;
font:12px/27px"宋体",sans-serif;
white-space:nowrap;
overflow:hidden;
}
dta{
display:block;
margin:1px;
width:30px;
height:56px;
text-align:center;
font:70012px/55px"宋体",sans-serif;
color:#fff;
text-decoration:none;
background:#666;
}
dta:hover{
background:orange
}
</style>
<head/>
<body>
<dl>
<dt><ahref="#a"title="">旧事</a><ahref="#b"title="">文娱</a><ahref="#c"title="">体育</a></dt>
<dd>

<ulid="a">
<li>・<ahref=""title="">国际旧事国际旧事国际旧事</a></li>
<li>・<ahref=""title="">国际旧事国际旧事国际旧事</a></li>
<li>・<ahref=""title="">国际旧事国际旧事国际旧事</a></li>
<li>・<ahref=""title="">国际旧事国际旧事国际旧事</a></li>
<li>・<ahref=""title="">国际旧事国际旧事国际旧事</a></li>
<li>・<ahref=""title="">国际旧事国际旧事国际旧事</a></li>
</ul>
<ulid="b">
<li>・<ahref=""title="">文娱旧事文娱旧事文娱旧事</a></li>
<li>・<ahref=""title="">文娱旧事文娱旧事文娱旧事</a></li>
<li>・<ahref=""title="">文娱旧事文娱旧事文娱旧事</a></li>
<li>・<ahref=""title="">文娱旧事文娱旧事文娱旧事</a></li>
<li>・<ahref=""title="">文娱旧事文娱旧事文娱旧事</a></li>
<li>・<ahref=""title="">文娱旧事文娱旧事文娱旧事</a></li>
</ul>
<ulid="c">
<li>・<ahref=""title="">体育旧事体育旧事体育旧事</a></li>
<li>・<ahref=""title="">体育旧事体育旧事体育旧事</a></li>
<li>・<ahref=""title="">体育旧事体育旧事体育旧事</a></li>
<li>・<ahref=""title="">体育旧事体育旧事体育旧事</a></li>
<li>・<ahref=""title="">体育旧事体育旧事体育旧事</a></li>
<li>・<ahref=""title="">体育旧事体育旧事体育旧事</a></li>
</ul>
</dd>
</dl>
</body>
</html>
</p>
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。

变相怪杰 发表于 2015-1-18 05:47:18

可以使用CSS检查工具进行设计。

海妖发表于 2015-1-25 07:33:59

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

透明发表于 2015-2-2 19:03:03

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

若天明 发表于 2015-2-8 05:28:55

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

乐观发表于 2015-2-24 19:18:14

学Dreamweaver技术的过程其实是一个增加信心的过程。

小妖女 发表于 2015-3-7 13:50:54

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

若相依 发表于 2015-3-15 07:44:52

兰色精灵 发表于 2015-3-22 00:08:04

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

页: [1]

仓酷云's Archiver

DIV教程之纯CSS代码完成翻页