<!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. 如何编写新的PCL类

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=244 把代码转换成符合PCL思路和句法的代码,对于第一次接触该基础架构的人会 ...

  2. Adding In-App Purchase to your iOS and OS X Applications

    Adding In-App Purchase to your iOS and OS X Applications In-App Purchase allows you to sell addition ...

  3. 使用军哥的lnmp配置虚拟主机,需要注意的是要配置hosts文件

    #使用军哥的lnmp配置虚拟主机,需要注意的是要配置hosts文件(这一点官方没有讲到)具体方法:1.修改hosts文件sudo vim /etc/hosts 2.在hosts文件中新增一行(这里类似 ...

  4. 使用gRPC搭建Server端与Client端

    gRPC简介 gRPC是一种RPC框架技术,采用Protocal Buffers(协议缓存) 作为其接口定义的语言(就是Proto来写接口)和基础的消息交换格式. 在gRPC中,客户端应用程序可以直接 ...

  5. ue4 renderTexture简单记录

    示例内容中的renderTexture 抓取部分 1 新建一个TextureRenderTarget2D 2 抓图 新建actor,一个camera,下面挂一个SceneCaptureComponen ...

  6. unite2017《Unity企业级支持案例与分析》

    在今天举办的Unite2017开发者大会上,Unity大中华区技术支持总监张黎明以"Unity企业级支持案例与分析"为主题进行了分享. 以下为演讲实录: 张黎明:非常感谢大家来参加 ...

  7. appium自动化测试框架——封装获取设备信息类

    在上一节中,我们已经解决了如何在python中执行cmd,并获取执行结果.下面就小小实战一下,获取设备信息. 一.思路 1.windows上获取设备信息的方法 输入dos命令“adb devices” ...

  8. JS中的MOD运算

    最近研究汉诺塔非递归的时候,看到书上写了个MOD,久违啊,感觉好久没看到过了,都忘了怎么用了. 某人:我知道,这不就是取余嘛,直接%就行了. 嗯......,如果是python语言,你说的很对,但是我 ...

  9. STP-10-RPVST+

    RPVST+(快速每VLAN生成树+)是一种以每个VLAN为基础,分别运行RSTP的形式,类似于PVST+.它拥有之前所描述的PVST+的优势,这为RSTP带来了亚秒级的收敛速度.因此,RPVST+和 ...

  10. NSPhotoLibraryAddUsageDescription解决办法

    图片并保存到本地的功能,一点发现闪退了.发现 Xcode 报以下错误: The app's Info.plist must contain an NSPhotoLibraryAddUsageDescr ...