CSS之两栏固定布局(二)

3. 负margin布局

这里写图片描述

3.1

HTML:

这里写图片描述

- 页面分为三个部分,头部(div#header)、主体(div#page)、脚部(div#footer),同样在这三个容器中使用了内容器(div.container)用来控制内容的居中

负margin布局,从字面上大家都能知道是使用元素的负margin来实现布局。其实更简单点理解就是使用元素的margin配合float的方向,从而达到我们需要两栏布局效果

这里写图片描述

这里写图片描述

这里设置浮动和width

这里写图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407066.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在本地实现完成多台服务器之间文件拷贝

前言: linux怎么使多条命令同时执行 Linux scp 免密码 传输文件 问题1: 在本地实现完成两台服务器之间文件拷贝: 准备工作: 先在其中一台服务器上生成一对公钥和私钥; ssh-keygen; // 一直回车 然后把生成的公钥id_rsa.pub内容添加另一台服务器的authorized_keys文件中 在本…

我的随笔之二

临近年关了,随着回家的脚步越来越近,心情也变得越来越复杂和烦燥起来。这些天,完成了最后两篇文章的修改,在得知被51CTO安全频道采纳后,心中就无形中产生一种巨大的反抗情绪,让我不想再动手写点什么。但是&…

Taro+react开发(39)taro中model使用

<View><AtModalisOpened{isOpened}title"标题"cancelText"取消"confirmText"确认"onClose{() > {this.handleClose();}}onCancel{() > {this.handleCancel();}}onConfirm{() > {this.handleConfirm();}}content{userGuide}/&g…

CSS之Flexbox制作CSS布局易如反掌

伸缩盒模型&#xff08;flexbox&#xff09;是一个新的盒子模型&#xff0c;主要优化了UI布局。作为实际布局的第一个CSS模块&#xff08;浮动真的应该主要用来制作文本围绕图片这样的效果&#xff09;&#xff0c;它使很多任务容易多。Flexbox的功能主要包手&#xff1a;简单使…

在本地实现完成多台服务器之间文件拷贝-进阶版

上一篇文章: 在本地实现完成多台服务器之间文件拷贝 准备工作: rsync同步时&#xff0c;删除目标目录比源目录多余文件的方法&#xff08;–delete&#xff09; Linux scp 免密码 传输文件 本地电脑与一台服务器之间实现文件传输 一次完成本地打包到阿里云并及时替换阿里云…

配置Log4j(非常具体)

来自: http://www.blogjava.net/zJun/archive/2006/06/28/55511.html Log4J的配置文件(Configuration File)就是用来设置记录器的级别、存放器和布局的&#xff0c;它可接keyvalue格式的设置或xml格式的设置信息。通过配置&#xff0c;能够创建出Log4J的执行环境。1. 配置文件L…

产品设计体会(2011)网络推广实战

产品做出来&#xff0c;推广和运营非常重要&#xff0c;很多老板眼里和心里&#xff0c;做这些事情的部门才是“利润中心”&#xff0c;而辛辛苦苦的产品、研发部门&#xff0c;则都是“成本中心”。有人说史玉柱是最好的产品经理&#xff0c;他强就强在对用户、市场、产品的了…

纯CSS实现锚点跳转位置上下偏移的办法

昨天在sf的时候看到了一位朋友的提问&#xff0c;是问如何使页面上的a标签被点击时跳转的锚点的位置往下偏移一点&#xff0c;不会被最上方的header给遮盖。当时看到这个问题也没想出纯CSS的解决方法&#xff0c;以为只有用js才能实现&#xff0c;后来另一位朋友的解答&#xf…

[oralce] 利用CRT的端口转发功能直接用plsql访问数据库

From: http://blog.sina.com.cn/s/blog_498a6eeb0100w197.html 如图所示&#xff1a;在实际中经常碰到上面的情况&#xff0c; 要访问生产上的数据库必须通过跳转机&#xff0c; 而且只能用sqlplus来访问&#xff0c;很不方便&#xff0c;而且为了安全&#xff0c;一般情况下不…

rsync同步时,删除目标目录比源目录多余文件的方法(--delete)

在日常运维工作中&#xff0c;我们经常用到rsync这个同步神器。有时在同步两个目录时&#xff0c;会要求删除目标目录中比源目录多出的文件&#xff0c;这种情况下&#xff0c;就可用到rsync的–delete参数来实现这个需求了。 实例说明&#xff1a; 在服务器A上同步/tmp/work目…

[转载]如何做到 jQuery-free?

http://www.ruanyifeng.com/blog/2013/05/jquery-free.html jQuery是现在最流行的JavaScript工具库。 据统计&#xff0c;目前全世界57.3%的网站使用它。也就是说&#xff0c;10个网站里面&#xff0c;有6个使用jQuery。如果只考察使用工具库的网站&#xff0c;这个比例就会上升…

请教大家:如何把.DCU文件反编译回源代码?谢谢。

请教大家&#xff1a;如何把.DCU文件反编译回源代码&#xff1f;谢谢。 Delphi / Windows SDK/APIhttp://www.delphi2007.net/DelphiAPI/html/delphi_20061116174815216.html如题。扣谢。 一定结贴。 我也想知道有没办法~~顶一顶~~ .DCU没有办法反编译成源代码的。 是不可能的…

CSS之flex需要知道的一切(一)

1.flex速记 1.1 flex: 0 1 auto 很容易理解这一点&#xff0c;flex-basis设置为auto&#xff0c;这意味着Flex项目的初始宽度计算是基于内容的大小来自动变化 flex-grow设置为0&#xff0c;这意味着flex-grow不会改变Flex项目的初始宽度&#xff0c;也就是flex-grow的开关是…

[文摘20090203]手机基本知识

本文转自&#xff1a;http://www.paipaitxt.com/r4625042/ 原文如下&#xff1a; ~手机类型~ 按操作系统划分&#xff0c;可分为&#xff1a;智能手机与非智能手机 一般具有&#xff1a;Symbian6.0&#xff0c;Windows CE&#xff0c;Palm&#xff0c;Linux开放性操作系统的手机…

win7 安装 IIS

和xp不同,xp安装 IIS需要下载额外的软件包. 步骤 1,依次打开 "控制面板" -> "程序" ->"打开或关闭windows功能": 2,安装图示选择: 确定即可.转载于:https://www.cnblogs.com/listened/p/4014762.html

如何处理Oracle客户端查询乱码问题

From: http://archive.cnblogs.com/a/2074122/ 1&#xff0c;查Oracle数据库创建时候的字符集&#xff1a;Oracle服务器端执行SQL> select name, value$ from sys.props$ where name like NLS%;NAME VALUE$------------------------------ -------------------------------…

git 下载项目到本地

1、新建一个目录&#xff0c;存放下载下来的项目&#xff0c;我在D盘新建了一个“gitspace”文件夹&#xff0c;用来存放下载下来的项目 2、进入刚刚新建的文件夹&#xff0c;即进入“gitspace”&#xff0c;点击鼠标右键&#xff0c;选择"Git Bash Here",如下图&am…

CSS之flex需要知道的一切(二)

4. flex实战项目音乐播放器 1.你可以让整个包含体作为Flex容器&#xff08;下图中被包含在红色边框内的部分&#xff09;&#xff0c;并把布局的其它部分分成Flex项目&#xff08;Item 1 和 Item 2&#xff09; 注&#xff1a;你知道Flex项目也可以成为Flex容器吗&#xff1f;…