前端经典布局——左中右三栏

最新推荐文章于 2022-07-08 14:52:28 发布
最新推荐文章于 2022-07-08 14:52:28 发布
阅读量3.4k 收藏 4
点赞数 2
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42966484/article/details/109316504
版权

1.flex弹性盒子
header和footer设置样式，横向撑满。container中的left、center、right依次排布。然后给container设置弹性布局 display: flex;最后left和right区域定宽，center设置 flex: 1; 就完成了!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
   
    min-width: 550px;  
    font-weight: bold;
    font-size: 20px;
  }
  #header, #footer {
   
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
   
   display: flex;
  }
  #container .column {
   
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #center {
   
    flex: 1;
    background: rgb(206, 201, 201);
  }
  #left {
   
    width: 200px;        
    background: rgba(95
最低0.47元/天 解锁文章
归小超
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端中的左右布局实现
weixin_34107739的博客
05-16 2741
前端得布局中，左右布局是一种很常见布局方式，下面是我在前端工作中的几种方法： 1、float实现左右布局 左右布局实现的一个有效方法是利用css中的float属性,代码如下： //html <div class="box"> <div class="left-box"></div> <div class="right-box"><...
前端面试题：写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式
qq_46582421的博客
02-19 885
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式： </title> <style type="text/css"> html,body{margin:0px;width:100%;} #left,#right{widt
HTML布局之左右布局
http://xueshuai.top
08-25 8751
作为一名合格的前端程序员，各种布局方式是肯定要熟练的，可我就是这么一个不合格的前端，这里记录一下左右布局的实现思路 父元素容器设置固定高度，设置flex，宽度可以设为100%或者具体像素，根据业务需求来定 父元素下有两个子元素，分别为左右容器 左容器或右容器均可以设置固定宽度(如果仅是左右布局，可设置一个宽，另一方flex设为1)，高度为100%父级高度，纵向溢出自动 补充说明：当然了，你想自己自定义滚动条的样式也是可以的 具体代码如下： <div class="layout"&g...
CSS 左中右三列布局5种方式
卡卡西：一个擅长拷贝的前端程序员
06-20 4327
CSS 左中右三列布局左右固定宽度，固定位置，中间自适应的5种方式 上中下三行布局，上下固定高度，中间自适应的4种方式
将数组中的元素按照奇数在偶数的左边排列（奇左偶右）
MAOMAOMAOMAOMAOM的博客
06-28 2011
今天完成一道比较考验逻辑能力的经典案例——数组内元素奇左偶右的排布。 案例的要求如下： 1.键盘录入10个整数存入数组中 2.定义一个方法将奇数放在数组的左侧,偶数放在数组的右侧 3.定义一个方法打印原数组和处理后的数组 下面提出两种代码解决方式： 第一种：利用for循环，代码如下（含代码思路步骤及注释） /* * @作者：猫土豆 * @功能：定义一个方法将数组内奇数放在数组的左侧,偶数放在数组的右侧 */ import java.util.S...
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
在给定的代码中，可以看到三个`<div>`元素，分别用于左栏(`#left`)、中间拖动区域(`#middle`)和右栏(`#right`)。左栏和右栏包含相应的内容，中间的`#middle`div则为空，用于用户拖动调整两栏宽度。 CSS部分主要用来...
Css左右定宽三栏布局.zip
08-04
总结来说，"Css左右定宽三栏布局"是一种经典的网页设计模式，通过CSS的各种布局技术可以灵活实现。随着技术的发展，开发者现在有更多工具（如Flexbox和Grid）来创建这种布局，使页面设计更具灵活性和响应性。理解并...
css页面中常见左中右分栏布局的两种实现方式
09-25
页面左中右分栏布局在目前的网页布局中是比较常见的，下面就与大家分享两个不错的方法可以实现左中右分栏布局，代码很详细，需要的朋友可不要错过
[前端案例08]三栏布局模板
最新发布
06-21
在前端开发中，三栏布局通常指的是页面分为左侧、中间和右侧三个独立的区域，每个区域都有自己的内容展示。这种布局方式能够有效地组织信息，提高用户体验，同时也为设计师提供了足够的灵活性来调整各个部分的宽度和...
前端经典——vue-三级联动demo.rar
11-29
在这个"前端经典——vue-三级联动demo"中，我们将深入探讨如何在Vue.js中实现一个三级联动的功能，这是一种常见的数据筛选和交互设计，常见于如地区选择、商品分类等场景。 首先，三级联动的基本概念是指三个层级的...
前端布局
04-07
NULL 博文链接：https://lds123456.iteye.com/blog/1564362
数组元素按照奇偶性左右排列，记录一个错误！！！(力扣 num 21)
qq_37542753的博客
12-15 113
看评论区的大哥大姐提供的思路是： 1. 定义两个数组下标，记为i和j，分别指向数组的头和尾； 2. 首先从左往右寻找第一个偶数，找到后，从右往左寻找第一个奇数； 3. 交换，直到i>=j为止 思路很清晰，实现也就几句代码的事情 #include <iostream> #include <vector> using namespace std; vector<int> exchange(vector<int> &nums) { //..
html 左中右 自适应布局
潘敬
06-13 4665
在最新的html标准中 有了个calc css表达式，我们可以用这个来计算布局。 但是在古老的IE中，却不支持，为了所有浏览器的支持，这里用了js来做。 截图： code： MyHtml.html var left,center,right,width; window.onload=functi
前端界面布局的几种方法
MaYang_的博客
09-08 1874
几种布局区别 https://blog.csdn.net/sunday97/article/details/84591190 先明白视口和像素是什么 https://www.cnblogs.com/webxu20180730/p/9562543.html 1. 流式布局 什么是流式布局？开发思路如何？ 一个典型的案例（http://m.duba.com/）用浏览器控制台调控尝试一下吧 适用页面特...
前端开发常见的五种布局方式及应用场景
m0_64409387的博客
02-10 2849
前端开发常见的五种布局方式及应用场景 1.静态布局： 给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。优点：设计简单。缺点：对于不同尺寸屏幕的兼容性不好，特别是移动端。 2.流式布局： 元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。优点：页面元素宽高可以自适应调整。缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。 3.自适应布局： 屏幕尺寸或分辨率变化时，页面元素会跟着变化。缺点：页面元素不会随着窗口大小的调整而发生变化。 4.弹性布局
Vue大屏实战二：页面三分实现左中右布局
博主逸尘
07-08 3909
左中右布局实现
html如何实现左右布局,前端中的左右布局实现
热门推荐
weixin_39899244的博客
06-30 1万+
前端的布局中，左右布局是一种很常见布局方式，下面是我在前端工作中的几种方法：1、float实现左右布局左右布局实现的一个有效方法是利用css中的float属性,代码如下：//html//css.box{width: 400px;height: 300px;background: darkgray;}.left-box,.right-box{width: 50%;height: 100%;float...
【前端知识之JS】圣杯布局和双飞翼布局
weixin_44337386的博客
06-23 477
本系列主要整理前端面试中需要掌握的知识点。本节介绍圣杯布局和双飞翼布局。
左右两栏布局写法
前端精髓
12-28 8792
实现两栏布局：浮动布局，flex布局，grid布局
vue前端主界面左右布局
05-11
Vue前端主界面左右布局可以通过使用Vue Router和Vue组件实现。首先，我们需要在Vue项目中安装Vue Router，并在main.js文件中引入和使用它： ``` import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import Left from './components/Left.vue' import Right from './components/Right.vue' Vue.use(VueRouter) const routes = [ { path: '/left', component: Left }, { path: '/right', component: Right } ] const router = new VueRouter({ routes }) new Vue({ el: '#app', router, render: h => h(App) }) ``` 在上面的代码中，我们定义了两个组件：Left和Right。接下来，在App.vue文件中，我们可以使用router-view组件来显示当前路由下的组件： ``` <template> <div id="app"> <router-view></router-view> </div> </template> ``` 最后，在Left.vue和Right.vue文件中，我们可以编写具体的布局代码： ``` <template> <div class="left-container"> <!-- 左侧布局代码 --> </div> </template> <template> <div class="right-container"> <!-- 右侧布局代码 --> </div> </template> ``` 通过以上步骤，我们就可以实现Vue前端主界面的左右布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值