CSS+DIV布局、导航链接基础1
2005-12-31 16:38
525 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#top {
background-color: #0099CC;
height: 70px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
font-size: 12px;
color: #000000;
text-decoration: none;
}
#left {
background-color: #CCCCCC;
margin-right: 80%;
padding: 10px;
}
#main {
background-color: #FFFFCC;
float: right;
width: 78%;
padding: 10px;
font-size: 12px;
color: #000000;
text-decoration: none;
}
#sss ul a:link, #sss ul a:visited {display: block;}
#sss ul {
list-style: none;
margin: 0;
padding: 0;
}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#sss li {
border-bottom: 1px solid #666666;
line-height: 2;
}
/* fix for browsers that don't need the hack */
html>body #sss li {border-bottom: none;}
#sss{
margin: 0px;
padding: 0px;
font-size: 12px;
background-color: #CCCCCC;
}
#sss a:link{
padding: 2px 0px 2px 10px;
width: 100%;
width: auto;
text-decoration: none;
color: #000000;
}
#sss a:visited{
padding: 2px 0px 2px 10px;
text-decoration: none;
color: #000000;
}
#sss a:hover{
background-color: #F0F0F0;
padding: 2px 0px 2px 10px;
text-decoration: none;
color: #FF0000;
}
-->
</style></head>
<body>
<div id="top">此处显示 class "top" 的内容</div>
<div id="main">此处显示 class "main" 的内容</div>
<div id="left">
<div id="sss">
<ul>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
</ul>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#top {
background-color: #0099CC;
height: 70px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
font-size: 12px;
color: #000000;
text-decoration: none;
}
#left {
background-color: #CCCCCC;
margin-right: 80%;
padding: 10px;
}
#main {
background-color: #FFFFCC;
float: right;
width: 78%;
padding: 10px;
font-size: 12px;
color: #000000;
text-decoration: none;
}
#sss ul a:link, #sss ul a:visited {display: block;}
#sss ul {
list-style: none;
margin: 0;
padding: 0;
}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#sss li {
border-bottom: 1px solid #666666;
line-height: 2;
}
/* fix for browsers that don't need the hack */
html>body #sss li {border-bottom: none;}
#sss{
margin: 0px;
padding: 0px;
font-size: 12px;
background-color: #CCCCCC;
}
#sss a:link{
padding: 2px 0px 2px 10px;
width: 100%;
width: auto;
text-decoration: none;
color: #000000;
}
#sss a:visited{
padding: 2px 0px 2px 10px;
text-decoration: none;
color: #000000;
}
#sss a:hover{
background-color: #F0F0F0;
padding: 2px 0px 2px 10px;
text-decoration: none;
color: #FF0000;
}
-->
</style></head>
<body>
<div id="top">此处显示 class "top" 的内容</div>
<div id="main">此处显示 class "main" 的内容</div>
<div id="left">
<div id="sss">
<ul>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
<li><a href="#">***链接***</a></li>
</ul>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）
- DIV+CSS网页布局常用的一些基础知识整理
- 网页设计基础:Div+CSS布局入门教程
- div+css 网页布局基础
- CSS基础知识二（段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接）
- 网页设计基础：Div+CSS布局入门教程
- 网页布局基础笔记1 DIV+CSS
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
- 前端基础——CSS+DIV布局
- CSS+Div布局总结-基础篇
- css+div布局总结——基础篇
- DIV+CSS网页布局常用的一些基础知识整理
- 一个DIV+CSS代码布局的简单导航条
- 网页设计基础:Div+CSS布局
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
- 【CSS+DIV网页样式与布局】——基础知识总结
- DIV+CSS基础教程：浮动(float)页面布局
- DIV+CSS网页布局常用的一些基础知识整理
- DIV+CSS网页布局常用的一些基础知识整理
- css+div布局总结——基础篇