zoukankan      html  css  js  c++  java
  • html布局 百分比自适应框架网页模板

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自适应百分比HTML布局框架 CSS5</title>
    <style type="text/css">
    body {font: 100% 宋体, 新宋体;background: #666666;margin: 0;padding: 0;text-align: center;color: #000000;}
    #container {
    width: 80%; /* 这将创建一个占据 80% 浏览器宽度的容器 */
    background: #FFFFFF;
    margin: 0 auto; /* 自动边距(与宽度一起)会将页面居中 */
    border: 1px solid #000000;
    text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */
    }
    #mainContent {padding: 0 20px; /* 请记住,填充是 div 方块内部的空间,边距则是 div 方块外部的空间 */}
    </style>
    </head>
    <body>
    <div id="container">
    <div id="mainContent">
    <h1> 自适应百分比布局 </h1>
    <p>1、最外层布局DIV宽度设置为百分比值,没有设置具体px或em,布局网页宽度将根据浏览器宽度而自适应宽度。<br />
    2、最外层DIV宽度设置80%,并且布局居中。为了看到布局居中效果设置1px边框。<br />
    3、#mainContent设置padding左右20px样式,让内容距离最外层DIV的靠左和靠右有20px间距距离。</p>
    <h2>H2 级别的标题 </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,
    justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.
    Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.
    Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.
    Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    libevent库的使用方法
    libevent中定时器的使用方法
    最小二乘原理(1)——线性等权重最小二乘
    E: Could not get lock /var/lib/dpkg/lock-frontend
    Ubuntu 18.04源码编译安装OpenCV 4.0步骤
    基于Socket和OpenCV的实时视频传输
    Jetson Nano系列教程3:GPIO
    Jetson Nano 系列教程2:串口调试接口登录Jetson Nano
    推荐 5 款牛逼的代码编辑器
    spring-boot-run 指令是怎么运行 Spring Boot 项目的?
  • 原文地址:https://www.cnblogs.com/xiewangfei123/p/12994571.html
Copyright © 2011-2022 走看看