<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、水平居中布局 */

            /* 1.单个元素水平居中 宽度固定 最常用*/

            .box {

                width: 400px;

                margin: 0 auto;

                background: #008000;

                color: #fff; /* background和color测试更好的观看效果 */

                text-align: center; /* 字体居中 */

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

                宽度固定

            </div>

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、水平居中布局 */

            /* 1.单个元素水平居中 宽度固定 定位居中布局*/

            .content {

                position: relative;

            }

            .box {

                width: 400px;

                position: absolute;

                left: 0;

                right: 0;

                margin: 0 auto;

                background: #ff9933;

                color: #fff; /* background和color测试更好的观看效果 */

                text-align: center; /* 字体居中 */

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

                宽度固定

            </div>

        </div>

    </body>

</html>

效果：

pc端常见布局---水平居中布局 单元素定宽的更多相关文章

  1. pc端常见布局---水平居中布局 单元素不定宽度

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. pc端常见布局样式总结（针对常见的）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. pc端常见布局---垂直居中布局 单元素定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. pc端常见布局---垂直居中布局 单元素不定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  6. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  7. 在前端眼中pc端和移动的开发区别

    按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...

  8. PC端自适应布局

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...

  9. 第 31 章 项目实战-PC 端固定布局[5]

    学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区 ...

随机推荐

  1. prototype for '类名::函数名'does not match any in class'类名'

    函数声明和定义参数类型必须相同． 前置声明一定要放到名称空间内,代表该名称空间内的类．

  2. hdu1853 Cyclic Tour (二分图匹配KM)

    Cyclic Tour Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/65535 K (Java/Others)Total ...

  3. 使用的SQLServer版本不支持数据类型“datetime2“

    快速解决方法: 原因,在使用ado.net entity的时候,entity使用的数据库是sqlserver 2008, 但后来实际使用中使用的数据库是sqlserver 2005, 操作DateTi ...

  4. js中的原型以及原型链

    在js中原型是每个构造函数的属性: 这个算 js 核心概念的一部分 var f1 = new Foo(); 对象 f1 的构造函数就是 Foo , f1的原型 __proto__ 就指向构造函数 Fo ...

  5. Nginx 最新版源码编译安装 包含常用模块作用及所需依赖

    第一部分 Nginx最新版源码编译安装 1. 使用的模块 模块1:http_rewrite_module 基于正则匹配来实现重定向.依赖PCRE库,见依赖1 模块2:http_gzip_module ...

  6. Arrange the Bulls

    题目链接 #include <stdio.h> #include <algorithm> #include <string.h> #include <iost ...

  7. XML与JSON的区别

    JSON和XML的比较 ◆可读性 JSON和XML的可读性可谓不相上下,一边是简易的语法,一边是规范的标签形式,很难分出胜负. ◆可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML ...

  8. Linux —— ps命令

    Ps命令 作用 显示瞬间进程的状态,并不动态连续: 如果想对进程进行实时监控应该用top命令: 对进程的管理,可以使用kill命令发送信号 Ps PID : 运行着的命令的进程编号 TTY : 命令所 ...

  9. JS——三种嵌入页面的方式

    一 行间事件 二 页面script标签嵌入 三 外部引入 <!DOCTYPE html> <html lang="en"> <head> < ...

  10. 如何安装使用windows自带的telnet服务

    控制面板->程序和功能->打开或关闭Windows功能->Telnet 客户端 [ Telnet 服务器 ] 安装完成后重启cmd telnet ip port