1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>常见元素布局</title>
  6.         <style type="text/css">
  7.             /* 一、水平居中布局 */
  8.             /* 1.单个元素水平居中 宽度固定 最常用*/
  9.             .box {
  10.                 width: 400px;
  11.                 margin: 0 auto;
  12.                 background: #008000;
  13.                 color: #fff; /* background和color测试更好的观看效果 */
  14.                 text-align: center; /* 字体居中 */
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <div class="content">
  20.             <div class="box">
  21.                 宽度固定
  22.             </div>
  23.         </div>
  24.     </body>
  25. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>常见元素布局</title>
  6.         <style type="text/css">
  7.             /* 一、水平居中布局 */
  8.             /* 1.单个元素水平居中 宽度固定 定位居中布局*/
  9.             .content {
  10.                 position: relative;
  11.             }
  12.  
  13.             .box {
  14.                 width: 400px;
  15.                 position: absolute;
  16.                 left: 0;
  17.                 right: 0;
  18.                 margin: 0 auto;
  19.                 background: #ff9933;
  20.                 color: #fff; /* background和color测试更好的观看效果 */
  21.                 text-align: center; /* 字体居中 */
  22.             }
  23.         </style>
  24.     </head>
  25.     <body>
  26.         <div class="content">
  27.             <div class="box">
  28.                 宽度固定
  29.             </div>
  30.         </div>
  31.     </body>
  32. </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. CodeForces 287B Pipeline （水题）

    B. Pipeline time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  2. 实训随笔2：Git Gui——拯救菜鸟的工具

    熟练使用git进行多人协作开发,是程序猿必备的专业技能之一,可惜我等实在太菜搞不来复杂的命令行. 幸好除了Git Bash还有一个Git gui存在——专门为了拯救我们这些菜鸡程序猿而存在的工具. 下 ...

  3. CF 148D D Bag of mice （概率dp）

    题目链接 D. Bag of mice time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. Halcon 和 C# 联合编程 - 如何使用开源项目 ViewROI

    声明 HWndCtrl _viewCtrl; ROIController _roiCtrl; 初始化 _viewCtrl = new HWndCtrl(hWindowControl); _roiCtr ...

  5. 洛谷P3608 [USACO17JAN]Balanced Photo平衡的照片

    P3608 [USACO17JAN]Balanced Photo平衡的照片 题目描述 Farmer John is arranging his NN cows in a line to take a ...

  6. jzoj6002. 【PKUWC2019模拟2019.1.15】Permutation （组合数）

    题面 题解 设\(lim=(n-1)/2\)(这里是下取整),那么\(x\)位置的值最大不能超过\(lim\),而\(y\)处的值不能小于\(y\),于是有\[Ans=\sum_{i=1}^{lim} ...

  7. 笔记-迎难而上之Java基础进阶3

    统计字符串中每一个不同的字符 import java.util.*; //统计字符串每一个字符出现的字数 public class StringDemo{ public static void mai ...

  8. QCTF 2018线上赛 writeup

    本次算是被QCTF打趴了,本来做题时间就少(公司无限开会,开了一天,伪借口),加上难度和脑洞的增大,导致这次QCTF又酱油了...就连最基本的签到题都没做出来...这就很气 好了,以下是解题思路 MI ...

  9. [题解]luogu_P2155_BZOJ_2186沙拉公主的困惑

    题意求1~N!中与M!互质的数的个数, 首先证明gcd(a,b)=1时gcd(a-kb,b)=1 gcd(a,b)=1 gcd(a%b,b)=1 gcd(a-kb,b)=1 即a-kb与b互质 这样由 ...

  10. python进阶07 MySQL

    python进阶07 MySQL 一.MySQL基本结构 1.认识MySQL #MySQL不是数据库,它是数据库管理软件 #MySQL如何组织数据 #如何进入MySQL数据库 #其他注意事项 #以表格 ...