二列自适应宽度

2017-06-13 12:14:00
admin
原创
359
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列宽度自适应</title>
<style type="text/css">
body {
	background-color: #060;
    font-size: 9pt;		
}
#container {
	width: 80%;     /*容器的宽度80%*/
	max-width: 1260px;    /*设置最大宽度 */
	min-width: 700px;     /*设置最小宽度 */		
	margin:0px auto;  /*容器自动居中显示*/
	background:#FFF;  /*容器的背景颜色*/
	height:900px;     /*容器的高度*/
}
/*导航栏的CSS样式*/
#slidebar {
	float: right;     /*导航栏向右浮动*/
	width: 15%;    /*导航栏的宽度*/
	height:890px;    /*导航栏的高度*/
	background-color: #EADCAE;/*导航背景*/
	padding-bottom: 10px; /*底部边距*/
}
/*内容区域的CSS样式*/
#content {
	padding: 10px;
	width: 82%;
	float: right;
	height:890px;
}
</style>
</head>

<body>
<div id="container">
  <div id="slidebar">    <ul class="nav">
      <li><a href="#">链接一</a></li>
      <li><a href="#">链接二</a></li>
      <li><a href="#">链接三</a></li>
      <li><a href="#">链接四</a></li>
    </ul></div>
  <div id="content"><h2>DIV和CSS常见布局结构</h2>
  <p>这一章将来学习一些常见的DIV+CSS的布局结构,通过常握这些布局的控制方式,可以巩固在这一章前面2小节中学到的关于布局的一些知识。这些布局也是目前在网站建设中普遍使用的主流布局方式。</p>
  <p><img src="http://www.ybao.org/data/upload/201705/f_f98e04fa9ff2aed692bebb9f6c0be82e.jpg" alt="" width="109" height="112" /></p>
  <h3>二列自适应宽度</h3>
  <p>所谓一列固定宽度居中,是指内容显示在网页的中间位置,并且内容的大小固定,不会随着浏览器作口大小的调整而变化,是最基础的布局方式。在表格式布局的时代,一列固定宽度主要使用一个align属性为center的&lt;table&gt;标签来实现,通常用来实现网站的大的框架结构,本节将演示如何用CSS来实现这个布局。</p></div>
</div>
</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227