<!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. 【242】◀▶IEW-Unit07

    Unit 7 Education: Schools I.句子基本结构在写作中的运用 主谓宾 主系表 主谓 主谓宾宾 主谓宾补 1.主语: 1)位于句首 2)名词 例句:应该建立相关法律 Laws an ...

  2. POJ-3176

    Cow Bowling Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 19864   Accepted: 13172 Des ...

  3. Auto Layout Guide----(一)-----Understanding Auto Layout

    Understanding Auto Layout 理解自动布局 Auto Layout dynamically calculates the size and position of all the ...

  4. eos表结构总结说明

    EOS6.0 WORKFLOW 表结构说明 流程定义表(WFProcessDefine) 名称 代码 描述 流程定义ID processDefID 主键 流程定义名称 processDefName 业 ...

  5. bootstrap的popover()的使用

    有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的.下表列出了这些选项: 选项名称 类型/默认值 Data 属性名称 描 ...

  6. EF外键保存数据

    using (DataContext dbcontext=new DataContext ()) { //emp.department.ID = dep.ID; //emp.department = ...

  7. Linux shell 单引号和双引号

    在编写shell脚本的时候经常会用到引号,有些时候却老是忘记单引号和双引号之间的区别, 所以就整理一下供以后脑子不好使了的时候前来复习一下.首先说下他们的共同点: 好像就只有 一个,就是它们都可以用来 ...

  8. 2014-11-2 NOIP模拟赛1

    Noip2009 团结模拟赛如题目理解困难,请自行阅读或参考样例.内存限制均为 256MB,时间限制均为 1s.出题人不会 故意 在题目中设置陷阱,但请自己注意程序的正确性.IO 文件名(.in/.o ...

  9. UVA - 1330 City Game

    InputThe rst line of the input le contains an integer K | determining the number of datasets. Next l ...

  10. python爬虫——web前端基础（4）

    CSS,指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用. 在HTML中使用CSS样式的方法: 内联样式表:CSS代码直接写在现有的HTML标记中,直接使用style属性改变样式.例 ...