满幅的背景,定宽的内容

很多网站设计的网页设计用到的都是满幅的背景,内容宽度定宽的这种设计。

如小米官网

先设置定宽容器

1 .wrapper{
2         width:1226px;
3         margin-left:auto;
4         margin-right:auto;
5 }

然后再配合外部容器一起使用,通常有以下两种写法:

第一种:

1 <div class="footer">
2     <div class="wrapper"></div>
3 </div>

第二种:

1 <div class="footer wrapper"></div>

原文地址:https://www.cnblogs.com/cherryshuang/p/8490849.html

时间: 2024-10-31 20:10:48

满幅的背景,定宽的内容的相关文章

弹性布局之定宽剩下填满

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #container{ display: flex; width: 500px; border: 1px solid red; } #box1{ background-color: mediumspr

css实现定宽高比(非内容撑出)

<head> <style> .before { display: flex; width: 100px; background: #f00; } .before:before { content: ""; padding-top: 100%; } </style> </head> <body> <div class="before">before</div> </body&g

CSS基础布局--居中对齐,左侧定宽右侧自适应

CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一些方法.如果你有更多关于布局方面的技巧,欢迎留言交流. 一.神奇的居中 经常看到有一些面试题问如何实现水平垂直居中,还要求用多种方法.唉唉唉!下面介绍一下我所知道的实现居中的方法. (1)父元素relative;子元素absolute,top:50%;left:50%;margin-left:-自己

多列布局之一列、多列定宽及一列自适应布局

命题: <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> 问题一:一列定宽及一列自适应 方案1: .left{ flo

布局-三列布局(定宽+自适应+定宽)

两侧定宽中间自适应 方案一:float+margin+(fix) 结构: 1 <div class="parent"> 2 <div class="left"><p>left</p></div> 3 <div class="center-fix"> 4 <div class="center"> 5 <p>center</p&g

两列布局中单列定宽单列自适应布局的5种思路

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex 前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错

两列布局(一列定宽,一列自适应)

用table+table-cell实现两列布局(一列定宽,一列自适应,且table是自动的两列自动登高) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .pare

CSS布局 -- 左右定宽,中间自适应

左右定宽,中间自适应 有几种方法可以实现 改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left  margin-right 查看 demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

两列定宽布局

两列定宽布局方式的一个前提就是两列的盒模型宽度相加不能大于父元素的宽度,否则你懂得......错位了. 测试html页: <body> <div id="header"> 头部 </div> <div id="container"> <div class="mainBox"> 主要内容区域 </div> <div class="sideBox">