位置: 编程技术 - 正文

CSS网页布局入门教程4:二列固定宽度(css布局的经典网站)

编辑:rootadmin

有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先为它们制定宽度,然后让两个div在水平行中并排显示,从而形成二列式的布局,CSS代码如下: 二列固定宽度——AA.CN 左列 右列 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]left与right两个div的代码与前面类似,都使用相同宽高,本例中为了区分,左列和右列分别用了不同的边框和背景色。而为了实现二列式布局,我们使用了一个全新的属性——float。float属性是CSS布局中非常重要的一个属性,用于控制的浮动布局方式,我们的大部分div布局基本上都通过float的控制来实现布局,float的可选参数为:none/left/right。float使用none值时表示对象不浮动,而使用left时,对象将向左浮动,例如本例中的div使用了float:left;之后,右侧的内容将流到当前对象的右侧。使用right时,对象将向右浮动,如果将left的float值设置为right,将使得left对象浮动到网页右侧,而right对象则由于float:left;属性浮动到网页左侧。这样,在动用了简单的float属性之后,二列固定宽度的而已就能够完整的显示出来。具体操作步骤如下:新建页面,插入div可以参考:CSS网页布局入门教程1:一列固定宽度当插入一个div后,接着插入第二个时,在插入div标签的插入会多出一个选项:在选定内容旁换行,这样插入就把这个div标签插入到了id为left的div之内,这并不是本例所要的结果,所以我们选择在标签之后,然后在右侧激活的下拉列表中找到<div id="#left">,这样我们插入的id为right的div就插入到了left的后边。如下图所示:

left的css设置如下:

right的设置只有与left的边框和背景色不同而已,可以参照left的自行设置。

推荐整理分享CSS网页布局入门教程4:二列固定宽度(css布局的经典网站),希望有所帮助,仅作参考,欢迎阅读内容。

CSS网页布局入门教程4:二列固定宽度(css布局的经典网站)

文章相关热门搜索词:html+css网页布局,css网站布局实录,css 网页布局,html+css网页布局,css网页布局实例教程,css网页布局在线生成,css网站布局实录,css网页布局实例教程,内容如对您有帮助,希望把文章链接给更多的朋友!

CSS网页布局入门教程5:二列宽度自适应 从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值

CSS网页布局入门教程6:左列固定,右列宽度自适应 在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可

CSS网页布局入门教程7:二列固定宽度居中 在一列固定宽度之中,我们使用margi:0pxauto;这样的设置,使一个div得以达到居中显示,而二列分栏中,需要控制的是左分栏的左边与右分栏的右边相等

标签: css布局的经典网站

本文链接地址:https://www.jiuchutong.com/biancheng/372059.html 转载请保留说明!

上一篇:CSS网页布局入门教程3:一列固定宽度居中(css网站布局实录 pdf)

下一篇:CSS网页布局入门教程5:二列宽度自适应(css 网页布局)

  • 专利年费滞纳金计入什么科目
  • 不得公开发行股票的情形
  • 小规模纳税人月超10万季度不超30万
  • 滞留票税务局会罚款多少
  • 生产成本里面的工资
  • 专票当成普票入账怎么调整
  • 房产企业土地增值税税率
  • 固定资产改变用途进项转出
  • 银行按揭方式销售开发产品
  • 事业单位专项资金的管理要求
  • 按工人工资比例结转制造费用的科目
  • 银行手续费没拿可以退吗
  • 客户以旧料抵货款账务如何处理?
  • 劳务发票可以做费用吗怎么做
  • 出口发票认证相符要多久
  • 慰问金怎么入账科目
  • 应交税费有余额怎么结转
  • 折扣销售怎么确认
  • 房屋租赁公司和公寓管理公司区别是什么
  • 充积分送手机
  • 苹果mac dns设置
  • 汇率调整怎么做分录
  • php array_replace
  • 账户验证因姓名验证错误导致失败
  • Win10电脑重装系统要多少钱
  • 制造费用主要包括哪些费用
  • win10教育版升级win11
  • php 使用 AWS kinesis
  • 计提消费税的会计科目
  • 海关进口增值税计入什么科目
  • 编译和链接的区别是什么
  • php使用ajax
  • 不得从销项税额中抵扣的是
  • 为什么电子章打印出是黑色的
  • 小微企业年收入超过300万按多少缴纳所得税
  • 证券公司代理发行
  • 费用化支出期末一般转入哪个账户?
  • 上缴税金怎么算税额
  • 企业建造的厂房属于固定成本吗
  • 个税算错怎么办理退税
  • 企业所得税计算器在线计算
  • 出纳开的收据找不到了怎么办
  • sql递减
  • 红冲以前年度收入
  • 商业承兑汇票的风险
  • 速动比率例子
  • 增值税减免附加税用计提吗
  • 暂估金额为含税金额
  • 本月增加无形资产什么时候计提折旧
  • 新开公司费用
  • 企业薪资制度
  • 自产自销免税农产品需要缴纳印花税吗
  • 现金日记账1月怎么记账
  • 制造费用分配结转表
  • mysql ERROR 1044 (42000): Access denied for user ''@'localhost' to database
  • 如何用u盘装系统win10
  • win7 32位装ie11
  • 在unix操作系统中,账户的功能有哪些
  • 自动保存怎么恢复
  • macbook os x
  • 硬盘读盘慢修复
  • linux查看sh
  • window10怎么获取ip地址
  • win10 右下角
  • win10怎么升级到2020
  • php创建注释的方法
  • Win10系统里的Smartscreen筛选器的使用以及开启方法
  • 微信小程序实现留言功能
  • js手机模拟器
  • 批处理 判断文件是否存在
  • 分页jsp
  • Unity UIScrollView优化
  • unity2019texture
  • 安卓初始化
  • 医保已申报未缴费可以撤销申报吗
  • 淄博市地税局局长
  • 上海退休核定表两种算法
  • 南京地税局上班时间
  • 个人扣缴客户端怎样迁移信息
  • 小规模公司每月0申报怎么操作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设