CSS+DIV布局、导航链接基础1

最新推荐文章于 2021-09-10 15:45:34 发布

ljdong

最新推荐文章于 2021-09-10 15:45:34 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： div css html class float 文档

本文链接：https://blog.youkuaiyun.com/ljdong/article/details/567375

css 专栏收录该内容

0 篇文章

订阅专栏

该博客展示了使用HTML和CSS构建页面布局的示例。通过定义不同的div元素，如top、main、left等，并使用CSS设置其样式，包括背景颜色、尺寸、浮动等，实现了一个包含顶部、主体和侧边栏的页面布局，还设置了链接的样式。

<!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>