CSS+DIV实例

最新推荐文章于 2021-08-03 23:27:49 发布

原创最新推荐文章于 2021-08-03 23:27:49 发布 · 373 阅读

3 ·

CC 4.0 BY-SA版权

HTML&CSS&JS 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨了CSS+DIV布局的实现原理与应用技巧，包括HTML结构、样式表链接、页面元素定位、响应式设计等方面，旨在帮助开发者构建高效、美观的网页布局。

效果图：

index.html：

<!doctype HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="copyright" content="Copyright 2014-2018">
<meta name="Author" content="">
<meta name="Robots" content="all">
<meta name="Keywords" content="网站关键字">
<meta name="Description" content="百度快照说明文字">
<meta name="renderer" content="webkit">
<title>CSS+DIV布局</title>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div id="container" >
<div id="banner">
<div id="login">您还没有登录，请
<a href="#">登录</a> 或 <a href="#">注册</a>
</div>
</div>
<div id="groballist">
<ul>
<li><a href="index.html">首页</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>
<li><a href="#">退出登录</a></li>
</ul>
</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
<div id="footer">footer</div>
</div>
</body>
</html>

index.css

@CHARSET "UTF-8";
body{
background-color: #FFE4B5;
}
#container{
width:1000px;
height:800px;
margin:0px auto;
}
#banner{
width:100%;
height:180px;
margin:0px;
padding:0px;
background: url("img/banner.jpg") no-repeat;
}

#login{
font-size:13px;
text-align:right;
padding:5px;
}
#login a:link,#login a:visited{
color:blue;
text-decoration: none;
}
#login a:hover{
text-decoration:underline;
}
#groballist{
width:100%;
height:25px;
margin:0px;
padding:0px;
}
#groballist ul{
list-style:none;
margin:0px;
padding:0px;
}
#groballist ul li{
margin:0px;
padding:0px;
display:block;
float:left;
background-color: #66b3ff;
}
#groballist a{
display:block;
margin:0px;
padding:5px 41px 2px 42.3px;
text-decoration: none;
}
#groballist a:link,#groballist a:visited{
color:blue;
display:block;
}

#groballist a:HOVER{
background-color: #369;
display:block;
text-decoration:underline;
}
#left{
width:20%;
height:500px;
background-color: #408080;
margin:0px;
float:left;
}
#middle{
width:60%;
height:500px;
background-color: #808040;
margin:0px;
float:left;
}
#right{
width:20%;
height:500px;
background-color: #808000;
margin:0px;
float:left;
}
#footer{
width:100%;
height:20px;
background-color: #808000;
margin:0px;
clear: left;
}