<!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. web API请求与参数获取

    总结webAPI的常用请求方法与后台参数的获取: 一:get请求:(会将所以参数拼接到URL里面) 1:基础类型:string  a=“hello” , 前端无论你是写到ajax里面的data属性还是 ...

  2. TypeScript完全解读(26课时)_汇总贴

    ECMAScript 6 入门:http://es6.ruanyifeng.com/ 官网:http://www.typescriptlang.org/ 中文网:https://www.tslang. ...

  3. 项目debug2

    用户登录后,邮件发送失败?为什么呢? 密码得是,授权码,而不是,qq的密码.

  4. Unobtrusive Javascript有三层含义

    一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理: 二是通过脚本文件所增加的功能是一种渐进式的增强,当客户端不支持或禁用了Jav ...

  5. Unity 5.6中的混合光照(上)

    https://mp.weixin.qq.com/s/AbWM21sihHw5pFdMzENDPg 在Unity 5中,光照得到了很大的改进.现在,创建高度逼真的游戏已成为可能.但是,出于对性能的考虑 ...

  6. IT兄弟连 Java语法教程 Java语言入门 典面试题

    1．请说明JVM.JRE和JDK是什么?它们有什么关系? JVM是Java虚拟机,Java Virtual Machine的缩写,是一个虚构出来的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实 ...

  7. 剑指Offer的学习笔记（C#篇）-- 构建乘积数组

    题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...

  8. 第九组 通信3班 063 OSPFv2与OSPFv3综合实验

    实验目的 1. 掌握 OSPFv3(v2) 的配置方法 2. 掌握在帧中继环境下 OSPFv3 (v2)的配置方法 3. 掌握 OSPFv3(v2) NSSA 的配置方法 4. 掌握外部路由汇总的配置 ...

  9. java 性能调优和GC

    JAVA 性能调优和GC http://blog.csdn.net/gzh0222/article/details/7663181 JAVA GC调优手记 http://blog.csdn.net/f ...

  10. [LOJ 2022]「AHOI / HNOI2017」队长快跑

    [LOJ 2022]「AHOI / HNOI2017」队长快跑 链接 链接 题解 不难看出,除了影响到起点和终点的射线以外,射线的角度没有意义,因为如果一定要从该射线的射出一侧过去,必然会撞到射线 因 ...