HTML5--页面自动居中

注意:

  margin:0 auto;/**0:上下    auto:左右**/

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #wrap{
            width:800px;
            margin:0 auto;
            border:3px solid yellow;
        }
        #header{
            width:100%;
            border:3px solid red;
        }
        #main{
            width:100%;
            border:3px solid green;
        }
        #footer{
            width:100%;
            border:3px solid grey;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="header">
        <div>this is header</div>
    </div>
    <div id="main">
        <div>this is main</div>
        <div>red</div>
        <div>red</div>
    </div>
    <div id="footer">
        <div>this is footer</div>
    </div>
</div>
</body>
</html>

  

时间: 2024-11-03 21:46:54

HTML5--页面自动居中的相关文章

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议

我保证你一分钟就能看完这篇文章! 真的.. 角色解释: 需求方:有钱大爷 设计人员:美工殿下 前端工程师:前端文艺青年 一个HTML5页面从提出到完成上线的流程: 1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给予反馈 5.设计人员与H5人员根据反馈进行适当调整 6.发布推广 如何提出一个合理的微信HTML5页面设计诉求? 合理分析诉求与公司团队拥有的资源: 1.需求完成时间: 时间给的越多,项目做的

Bootstrap浏览器支持下载页面 判断当前IE浏览器小于等于IE8时页面自动跳转到浏览器支持下载页面

Bootstrap浏览器支持下载HTML页面 : <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta chars

元素自动居中显示

我们在写页面时经常会遇到让一个元素自动居中显示的需求,这个元素有可能是块级元素,有可能是行内元素,也可能是文字等等,而居中的需求有可能是水平居中,垂直居中或者两者同时居中. 据我目前了解,居中有四种方式:1. 利用table表格特性: 2. 使用table-cell属性以table方式渲染: 3. margin自动居中: 4. 使用absolute配合margin负值居中:以下逐个讲解: 1. 利用table表格特性 这 种方式可以让内容垂直居中(valign="middle")和水平

移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class="mui-content"> <input .../> </div> 注意:在有些情况下不适用,当把input标签放入mui-scroll中就不行了,也就是说mui-content和mui-scroll同时存在时不适用 <div class="mui-c

如何做页面自动刷新,又不用让用户按回车键来提交数据!

假设叶面中有如下form: <form name=InputDate> ... </form> 如果页面要自动刷新,但该页面有Request.Form,那么通常会出现一个提示框,需要用户确定来提交数据,这就不是自动 刷新了.而对于监控或股票显示来说,不要用户干预又非常重要,下面就可以解决该问题: <Script Language="JavaScript"> <!-- var limit="0:60" //定义刷新时间 if

gVim 启动时窗口自动居中

最近折腾 vim, 除了配置巨麻烦外, 另一个很蛋疼的就是窗口位置问题了, 折腾了半天无法启动时自动居中, 找遍各地也只有保存上次位置, 下次启动时恢复的方法 废话不多说, 直接上代码, 丢到 vimrc 中即可: function WindowCenterInScreen() set lines=9999 columns=9999 let g:windowsSizeFixX = 58 let g:windowsSizeFixY = 118 let g:windowsScaleX = 7.75

移动页面div居中效果代码

在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content=

HTML5页面开发的基础性模板

分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title></title> <meta name=&q

HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地(转)

HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地 我是应用在微信中,自定义菜单,菜单直接链接到这个HTML5页面,获取当前位置后,页面中定好目的地,这样打开页面后直接进入导航页面 可以省下先发送位置信息后,点确定再出导航,省一步, <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"> <meta name="viewpor