<!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. 33.Docker安装Mysql及用户配置

    mysql在官方上有两个镜像 这个是一个优化过的mysql 使用这个命令 安装mysql 演示最简单的方式去安装mysql: 这种方式安装的用户名没有,密码没有 docker run -d -p 33 ...

  2. Socket 阻塞与非阻塞模式

    http://blog.sina.com.cn/s/blog_5d0990c7010115ib.html

  3. hostent结构体和wsadata结构体

    一．hostent结构体 使用这个东西,首先要包含2个头文件:#include <netdb.h>#include <sys/socket.h> struct hostent ...

  4. POJ - 3037 Skiing SPFA

    Skiing Bessie and the rest of Farmer John's cows are taking a trip this winter to go skiing. One day ...

  5. C#连接Oracle数据库解决报错（需要安装Oracle客户端软件8.1.7）的问题

    1.通过nuget安装  ManagedDataAccess 2.引用 using Oracle.ManagedDataAccess.Client; 注:最低framework4.0 测试连接: // ...

  6. mock测试方法及实践改进

    此文已由作者翟曜授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. mock测试常见的定义为:在测试过程中,对于某些不易构造或不易获取的对象,通过创建虚拟对象的方式来模拟测试的测 ...

  7. Unite 2017 | Unity引擎发展四大方向

    Unite 2017 Shanghai已落幕,今天为大家分享本次大会备受关注的Keynote主题演讲.本次大会Keynote主题演讲聚焦了Unity全球领导团队,包括Unity创始人David Hel ...

  8. 洛谷P2188 小Z的 k 紧凑数

    P2188 小Z的 k 紧凑数 题目描述 小 Z 在草稿纸上列出了很多数,他觉得相邻两位数字差的绝对值不超过 k 的整数特别奇特,称其为 k 紧凑数. 现在小 Z 想知道 [l,r] 内有多少个 k ...

  9. 总结 Sublime Text 3 无法安装 Package Control 插件的解决办法

    Sublime Text 是一款非常好用的轻便的编辑器,可以安装很多插件,实现IDE的很多功能,着实是程序员的利器. 我安装的 Sublime Text 3 Build 3143 ,软件汉化,软件激活 ...

  10. Vue实现任务列表效果

    <!DOCTYPE html>            <html lang="en">            <head>            ...