zoukankan      html  css  js  c++  java
  • 单列布局_宽度自适应_内容居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>单列布局_宽度自适应_内容居中</title>
    	<style type="text/css">
    	.container{
    		max- 960px;/*设置最大宽度为960px*/
    		margin: 0 auto;/*设置内部的块级元素水平居中*/
    	}
    	.header{
    		height: 50px;
    		background-color: aqua
    	}
    	.main{
    		height: 600px;
    		background-color: royalblue
    	}
    	.footer{
    		height: 50px;
    		background-color: saddlebrown
    	}
    	</style>
    </head>
    <body>
    	<h2>基本思路</h2>
    	<ol>
    		<li>头部,尾部单独放在一个独立的容器中,仅设置高度即可</li>
    		<li>头部,底部的内容区仍然和主体等宽</li>
    		<li>主体仍放在一个单独的容器中,并设置水平居中</li>
    		<li>CSS样式不用修改,只需要调整一个DOM结构</li>
    	</ol>
    	<!-- DOM -->
    	<div class="header">
    		<div class="container">头部</div>
    	</div>
    	<div class="main">
    		<div class="container">主体</div>
    	</div>
    	<div class="footer">
    		<div class="container">底部</div>
    	</div>
    </body>
    </html>
  • 相关阅读:
    Active Report 3 生成图表
    js asp.net enable/disable validator
    [.net] 如何在mail的加入正文显示图片
    [javascript] 得到 javascript 的当前文件名
    Colorful Stones
    Jam的计数法

    Beautiful Matrix
    能量项链
    Maxim and Discounts
  • 原文地址:https://www.cnblogs.com/webaction/p/14873348.html
Copyright © 2011-2022 走看看