圣杯布局和双飞翼布局！

两种布局功能相同，都是为了实现两端宽度固定，中间宽度自适应的三栏布局

圣杯布局：

三个区域都处于左浮动状态，并使main的宽度成父容器的100%

为两侧侧边栏添加负margin 用以调整位置

其中摆在左边的left的margin-left 为-100%

右边的right的margin-left 则为负的其自身的宽度

（浮动元素的负margin到一定值后会使其自身往上一行移动的原理）

为class=container 的主容器设置左右padding值 为以后的侧边栏定位空出位置

padding值为侧边栏的宽

为left和right添加position:relative 然后对他们进行定位 移动到两侧

两种经典电商CSS布局的更多相关文章

  1. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  2. 两种方法实现用CSS切割图片只取图片中一部分

    切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已,主要有两种方式,一是做为某一元素的背景图片,二是用img元素的属性.下面有个不错的示例,大家可以参考下 切割图片这里不是真正的切割,只是用 ...

  3. TensorFlow笔记三：从Minist数据集出发 两种经典训练方法

    Minist数据集:MNIST_data 包含四个数据文件 一.方法一:经典方法 tf.matmul(X,w)+b import tensorflow as tf import numpy as np ...

  4. 中国社交电商最新展望，S-KOL-C正突围而出

    编辑 | 韩星 出品 | 于见(mpyujian) 通信技术.移动互联网的快速发展正加速国内电商平台的深度变革. 在这场以"社交"和"下沉市场"为关键词的电商之 ...

  5. （1）dotnet开源电商系统-brnshop&brnMall 和老外开发的nopCommerce（dotnet两套电商来PK--第一篇）

    一直想做电商软件,但是实在不想学PHP了,所以前后关注了这两个开源电商系统.一个是国人出品的,一个据说是俄罗斯人写得(不知道对不对).目前两个开源软件都在学习了解中,以下的博文可能会涉及到这两套系统, ...

  6. 把握这两点，抢占下一个电商风口｜2016最新中国电商App排名&研究报告

    序言 电商,是随着中国互联网经济的持续发展所成长起来的.淘宝.京东这些电商从交易额和影响力上看都位列中国最为成功.最具话题性的互联网企业之中.尽管近几年中国经济有所放缓,但中国消费市场的增长速度仍有望 ...

  7. CSS 布局:40个教程、技巧、例子和最佳实践

    前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...

  8. 关于css布局、居中的问题以及一些小技巧

    CSS的两种经典布局 左右布局 一栏定宽,一栏自适应 <!-- html --> <div class="left">定宽</div> < ...

  9. 我的CSS布局之旅--持续更新

    虽然我也接触前端一年之久了,但是无奈从切图布局下来的经验还真是很不足,因为之前比赛或者是做小项目时全部都是自己负责设计,所以都是编写边设计,哎呀,也是醉了:或者是有模板,然后从人家上面扒拉下来的,真的 ...

随机推荐

  1. Sql 根据当前时间，获取星期一具体日期

    --根据当前时间,计算每周一日期,周日为每周第一天 declare @getDate datetime --set @getDate='2018-12-30' set @getDate='2019-0 ...

  2. php查询mysql中的json编码后的字符串内容的方法

    问题 mysql里存的是json编码后的字符串,其中中文会被转为unicode码,所以直接查询是查询不到的. mysql里的查询如 like "%\u6211\u662f%" 也是 ...

  3. android 7.0+ FileProvider 访问隐私文件 相册、相机、安装应用的适配

    从 Android 7.0 开始,Android SDK 中的 StrictMode 策略禁止开发人员在应用外部公开 file:// URI.具体表现为,当我们在应用中使用包含 file:// URI ...

  4. 使用SQL语句查询表及表字段类型说明

    今天突然遇到有人要数据库表及表字段说明,数据库表太多又不能一个个表去找,就想想SQL是否能直接查询出来. 经过查询资料,加上一些自己的一些调整写了一个sql语句,在此记录一下,以方便日后查找使用. S ...

  5. vscode和gitee的使用

    1.安装git 2.生成公钥 $ ssh-keygen -t rsa -C "youremail@youremail.com" # Generating public/privat ...

  6. 优美序列(sequence)

    问题描述 Lxy养了N头奶牛,他把N头奶牛用1..N编号,第i头奶牛编号为i.为了让奶牛多产奶,每天早上他都会让奶牛们排成一排做早操.奶牛们是随机排列的.在奶牛排列中,如果一段区间[L,R]中的数从小 ...

  7. day 2：计算机的基础知识,编程语言分类

    本节内容 1,计算机的容量 2,编程语言介绍1,计算机的容量 1位 = 1bit 8bit = 1byte = 1字节 1024bytes = 1k bytes = 1KB 1024个 1024KB ...

  8. bittorrent 学习(三) MSG

    msg.c中 int转化 char[4]  char[4]转化int的函数 如下(有多种方案) ]) { c[] = i % ; c[] = (i - c[]) / % ; c[] = (i - c[ ...

  9. OO第二单元多线程电梯总结

    OO第二单元多线程电梯总结 第一次作业 设计思路 Input为输入线程,负责不断读取请求并将读到的请求放入调度器中. Dispatcher为调度器,是Input线程和Elevator线程的共享对象,采 ...

  10. 2018上IEC计算机高级语言(C)作业 第3次作业_说明

    一.博客作业内容 2018上IEC计算机高级语言(C)作业 第3次作业 二.评分规则说明 1.程序调试题,要描述出调试所遇到问题及修改内容,并表述清楚程序功能.流程图不规范的会减1-2分: 2.知识点 ...