css布局之三栏布局

最新推荐文章于 2023-10-25 20:45:03 发布
最新推荐文章于 2023-10-25 20:45:03 发布
阅读量95 收藏
点赞数
原文链接：http://www.cnblogs.com/jianzhouf/p/5985321.html
版权 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>This is header.</header>
  <section>
    <div class="main">
      <h3>This is main section.</h3>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
    </div>
    
    <aside class="left">
      <h3>left menu.</h3>
      <ul>
        <li>
          <a href="">link1</a>
        </li>
        <li>
          <a href="">link2</a>
        </li>
        <li>
          <a href="">link3</a>
        </li>
        <li>
          <a href="">link4</a>
        </li>
      </ul>
    </aside>
    <aside class="right">
      <h3>Right menu.</h3>
      <ul>
        <li>
          <a href="">link1</a>
        </li>
        <li>
          <a href="">link2</a>
        </li>
        <li>
          <a href="">link3</a>
        </li>
        <li>
          <a href="">link4</a>
        </li>
      </ul>
    </aside>
  </section>
</body>
</html>
 1 *{
 2   box-sizing: border-box;
 3 }
 4 
 5 body{
 6   background: #e1ddd9;
 7 }
 8 
 9 header, footer, .main, aside{
10   background: #fff;
11   padding: 10px;
12   margin-bottom: 10px;
13 }
14 
15 section{
16   overflow: hidden;
17   padding-left: 210px;
18   padding-right: 210px; 
19 }
20 
21 section .main, section aside{
22   float: left;
23 }
24 
25 section .main{
26   widows: 100%;
27 }
28 
29 section aside.left{
30   width: 200px;
31   margin-left: -100%;
32   position: relative;
33   left: -210px;
34 }
35 
36 section aside.right{
37   width: 200px;
38   margin-left: -200px;
39   position: relative;
40   left: 210px;
41 }

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <h1>This is header.</h1>
  </header>
  
  
  <div class="main">
    <div class="main-inner">
      <h3>This is main section.</h3>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
    </div>
  </div>

  <aside class="left">
    <h3>left menu.</h3>
    <ul>
      <li>
        <a href="">link1</a>
      </li>
      <li>
        <a href="">link2</a>
      </li>
      <li>
        <a href="">link3</a>
      </li>
      <li>
        <a href="">link4</a>
      </li>
    </ul>
  </aside>
  <aside class="right">
    <h3>Right menu.</h3>
    <ul>
      <li>
        <a href="">link1</a>
      </li>
      <li>
        <a href="">link2</a>
      </li>
      <li>
        <a href="">link3</a>
      </li>
      <li>
        <a href="">link4</a>
      </li>
    </ul>
  </aside>
  
  <footer>
    <h1>This is footer.</h1>
  </footer>
</body>
</html>
*{
  box-sizing: border-box;
}

body{
  background: #e1ddd9;
}

header, footer, .main, aside{
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
}



.main, aside{
  float: left;
}

.main{
  float: left;
  width: 100%;
  overflow: hidden;
  
}

.main-inner{
  margin: 0 210px;
}


aside.left{
  width: 200px;
  margin-left: -100%;
}

aside.right{
  width: 200px;
  margin-left: -200px;
}
footer{
  clear: both;
}

转载于:https://www.cnblogs.com/jianzhouf/p/5985321.html

Tunny20121011
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 三栏布局
Web分享
05-16 4111
三栏布局算是网页中最常见的布局之一了。尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧固定宽度，中间自适应。 如果现在让你去实现这么一个三栏布局，你会怎么做呢？ 利用绝对定位 我觉得这是比较古老和容易想到的方式。当初上大学刚接触 CSS 的时候，看到过一个网页，整站都是用绝对定位布局的。当时，觉得理所当然，布局就该这么做… 效果如下 代码如下 &amp;amp;lt;div c...
CSS常见布局——两栏、三栏布局
zhaohb2016的博客
07-12 1129
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：左盒子，float：left ，宽度固定设为200px; 右盒子：margin-left:200px;宽度默认（块级元素不设置宽度或auto时为100%） 2、float+BFC 左盒子，float：left ，宽度固定设为200px; 右盒子，设置overflow:hidden,触发了BFC，其中BFC特性为不与浮动元素重叠 3、float+flex 父盒子：display：flex; 左盒子，float：left ，宽度固定设为
css 三栏布局实现方式
黑夜来袭Z
02-08 72
三栏布局：左右两边固定，中间自适应 1、左右两边浮动，中间用margin给左右两边留位置 <style> .left{ float: left; width: 200px; background: green; height: 200px; } .center{ margin: 0 300px 0 200px; background: yellow; he
【css】三栏布局
前端学习博客
04-10 2109
【css】三栏布局 三栏布局主要是前后两列定宽，中间自适应 文章目录【css】三栏布局1.浮动 + margin2.浮动 + BFC3. flex4.定位 1.浮动 + margin 左边元素左浮动，右边元素有浮动，并给两遍元素都设置宽度。 然后给中间元素设置 margin-left和 margin-right，值都等于左右元素的宽度。 <style> .container { background-color: bisque; } .lef
CSS圣杯布局（三栏布局）
LadyZhong的博客
08-10 2674
圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。三栏全部float:left浮动，并配合left和right属性。原理（1.浮动2.负边距）：浮动元素有脱离文档流的特性，负值使得自身向左移动当三个边长为100px的盒子margin-left均为-20px时出现如下效果;可以看出3个盒子都向左移动25px；box1自身向左移动了25px，box2又覆盖了其25...
css三栏布局的7种方法
qq_43427734的博客
04-25 1385
布局：三栏布局（7种方法） 前端是不可避免的会遇到布局的问题，本文就三栏布局而言，介绍了4种实现的方案。 实现效果： 左右栏定宽，中间栏自适应 1、绝对定位布局：position + margin html结构： <div class="container"> <div class="left">Left</div> <div class...
【CSS】实现三栏布局的方式
weixin_47750287的博客
05-04 935
【CSS】实现三栏布局的方式 三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现如下： ① 利用浮动 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。 中间一栏设置左右两个方向的margin值。 注意这种方式，中间一栏必须放到最后。 .container { overflow: hidden; } .left { float: left; width: 100px; background: tomato; } .right {
css的经典三栏布局如何实现,css 实现三栏布局的四种方式
weixin_35600369的博客
08-04 502
三栏布局就是左中右，左右两边固定，中间自适应。1. 绝对定位左边中间右边body {padding: ;margin: ;}/* 绝对定位 */.left, .right {position: absolute;top: ;}.left {background: red;width: 200px;left: ;}.middle {background: blue;margin: 200px;}....
【CSS】布局——三栏布局、两栏布局
小秀的博客
08-11 1170
【代码】【CSS】CSS 布局
css 三栏布局的实现？
A12536365214的博客
10-25 507
三栏布局是前端开发中的基础知识之一，是大多数网站和应用的基础。它可以帮助设计师和开发者创建出清晰、有组织和用户友好的界面。
CSS 三栏等高布局实现方法
09-25
CSS 三栏等高布局实现方法 CSS 三栏等高布局是指在页面中实现三个等高的栏目，每个栏目的高度可以根据内容的变化而变化。本实施方法可以将三个栏目等高地排列在一起，且不需要写死高度。 首先，需要了解三栏等高...
CSS实现三栏布局的四种方法示例
09-24
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看...
CSS Float布局过程与老生常谈的三栏布局
12-08
标题“CSS Float布局过程与老生常谈的三栏布局”强调了浮动在创建经典三栏布局中的应用。在传统的三栏布局中，通常有一个主内容区域居中，两侧分别有侧边栏。使用浮动布局可以实现这种效果，同时保持内容的可读性和...
Css左右定宽三栏布局.zip
08-04
"Css左右定宽三栏布局"是一种常见的网页设计模式，它旨在创建一个包含三个区域的页面，其中左右两栏宽度固定，中间栏宽度自适应，以满足不同内容需求和屏幕尺寸。这种布局常用于网站的主内容区，为用户提供清晰的...
用CSS floats创建三栏页布局
10-31
### 使用CSS Floats创建三栏布局 #### 一、引言 随着Web设计技术的发展，越来越多的设计师开始采用更加灵活的布局方式。其中，“三栏布局”作为一种经典的网页设计模式，广泛应用于各种类型的网站中。这种布局的...
java项目的实战练习
08-21
java项目实战练习
毕业设计，基于SpringBoot+Vue+MySQL开发的体育馆管理系统，源码+数据库+毕业论文+视频演示
08-21
毕业设计，基于SpringBoot+Vue+MySQL开发的体育馆管理系统，源码+数据库+毕业论文+视频演示 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本体育馆管理系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此体育馆管理系统利用当下成熟完善的SpringBoot框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发。实现了用户在线选择试题并完成答题，在线查看考核分数。管理员管理收货地址管理、购物车管理、场地管理、场地订单管理、字典管理、赛事管理、赛事收藏管理、赛事评价管理、赛事订单管理、商品管理、商品收藏管理、商品评价管理、商品订单管理、用户管理、管理员管理等功能。体育馆管理系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。 关键词：体育馆管理系统；SpringBoot框架；Mysql；自动化
tomcat smartbi
08-21
tomcat smartbi
KalmanTrakcer-ma笔记
最新发布
08-21
no target connected
css flex左右三栏布局
10-09
实现左右三栏布局可以使用 CSS Flexbox。其中，左侧和右侧列可以设置为固定宽度，中间列则设置为自动宽度，如下所示： HTML： ```html 左侧内容 中间内容 右侧内容 ``` CSS： ```css .container { display...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值