js三栏布局

先center center宽100%。左中右浮动 左右margin-left上去。 container设置左右padding。三个position:relative, 左右left right。

  • 先定义好header和footer的样式,使之横向撑满。
  • 在container中的三列设为浮动和相对定位(后面会用到),center要放在最前面,footer清除浮动。
  • 三列的左右两列分别定宽200px和150px,中间部分center设置100%撑满
  • 这样因为浮动的关系,center会占据整个container,左右两块区域被挤下去了
  • 接下来设置left的 margin-left: -100%;,让left回到上一行最左侧
  • 但这会把center给遮住了,所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;,给left和right空出位置
  • 这时left并没有在最左侧,因为之前已经设置过相对定位,所以通过 left: -200px; 把left拉回最左侧
  • 同样的,对于right区域,设置 margin-left: -150px; 把right拉回第一行
  • 这时右侧空出了150px的空间,所以最后设置 right: -150px;把right区域拉到最右侧就行了。
   <style>
        body {
            min-width: 500px
        }

        #top,
        #footer {
            background-color: red;
            height: 200px;
        }

        #footer {
            clear: both;
        }

        #container {
            background-color: green;
            padding-left: 100px;
            padding-right: 100px;
        }

        .column {
            height: 200px;
            float: left;
            position: relative;
        }

        #center {
            width: 100%;
            background-color: yellow;

        }

        #left {
            background-color: orange;
            width: 100px;
            margin-left: -100%;
            left: -100px
        }

        #right {
            background-color: pink;
            width: 100px;
            margin-left: -100px;
            right: -100px
        }
    </style>
</head>

<body>
    <div>
        <div id="top"></div>
        <div id="container">
            <div id="center" class="column">center</div>
            <div id="left" class="column">left</div>
            <div id="right" class="column">right</div>
        </div>
        <div id="footer"></div>
    </div>
</body>

先center,包含div, center宽100%。左中右浮动 左右margin-left上去。content设置左右margin。

  • left、center、right三种都设置左浮动
  • 设置center宽度为100%
  • 设置负边距,left设置负边距为100%,right设置负边距为自身宽度
  • 设置content的margin值为左右两个侧栏留出空间,margin值大小为left和right宽度
   <style>
        body {
            min-width: 700px;
        }

        #top,
        #footer {
            width: 100%;
            height: 200px;
            background-color: red;
        }

        #footer {
            clear: both
        }

        #container {}

        .column {
            height: 200px;
            float: left;
        }

        #left {
            width: 100px;
            background-color: green;
            margin-left: -100%
        }

        #center {
            width: 100%;
            background-color: yellow;

        }

        #right {
            width: 100px;
            background-color: pink;
            margin-left: -100px;
        }

        .content {
            margin: 0 100px 0 100px;
        }
    </style>
</head>

<body>
    <div>
        <div id="top"></div>
        <div id="container">
            <div id="center" class="column">
                <div class="content">#center</div>
            </div>
            <div id="left" class="column">left</div>
            <div id="right" class="column">right</div>
        </div>
        <div id="footer"></div>
    </div>
</body>

flex

flex弹性盒子

  • header和footer设置样式,横向撑满。
  • container中的left、center、right依次排布即可
  • 给container设置弹性布局 display: flex;
  • left和right区域定宽,center设置 flex: 1; 即可
    <style>
        body{
            min-width: 700px
        }
        #top,#footer{
            width: 100%;
            height: 200px;
            background-color: red;
        }
        #container{
            display: flex;
        }
        .column{
            height: 300px;
        }
        #left{
            width: 100px;
            background-color: green;
        }
        #right{
            width: 100px;
            background-color: green;
        }
        #center{
            flex: 1;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        <div id="top"></div>
        <div id="container">
            <div id="left" class="column">left</div>
            <div id="center" class="column">center</div>
            <div id="right" class="column">right</div>
        </div>
        <div id="footer"></div>
    </div>
</body>

四.绝对定位法

将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度,注意中间元素不设置width:100%.

    <style>
         body {
            margin: 0px;
            min-width: 500px
        }

        #top,
        #footer {
            background-color: red;
            height: 200px;
        }
        #container {
            background-color: green;
            
        }

        .column {
            height: 200px;
        }

        #center {
            /* width: 100%;没有这个 */
            background-color: yellow;
            margin: 0 100px;

        }

        #left {
            position: absolute;
            background-color: orange;
            width: 100px;
            left: 0;
        }

        #right {
            position: absolute;
            background-color: pink;
            width: 100px;
            right: 0;
        }
    </style>
</head>
<body>
    <div>
        <div id="top"></div>
        <div id="container">            <div id="left" class="column">left</div>   
            <div id="right" class="column">right</div>                    
            <div id="center" class="column">center</div>
        </div>
        <div id="footer"></div>
    </div>

五.使用自身浮动法

对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。

<style>
       body {
            margin: 0px;
            min-width: 500px
        }

        #top,
        #footer {
            background-color: red;
            height: 200px;
        }

        #container {
            background-color: green;

        }

        .column {
            height: 200px;
        }

        #center {
            /* width: 100%;没有这个 */
            background-color: yellow;
            margin: 0 100px;

        }

        #left {
            float:left;
            background-color: orange;
            width: 100px;
           
        }

        #right {
            float: right;
            background-color: pink;
            width: 100px;
        }
    </style>
</head>

<body>
    <div>
        <div id="top"></div>
        <div id="container">
            <div id="left" class="column">left</div>
            <div id="right" class="column">right</div>
            <div id="center" class="column">center</div>
        </div>
        <div id="footer"></div>
    </div>
</body>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 项目中,可以使用 Vue Router 进行路由管理。要挂载路由,需要进行以下步骤: 1. 安装 Vue Router 可以使用 npm 或者 yarn 进行安装,例如: ```bash npm install vue-router ``` 2. 创建路由实例 在项目的 src 目录下创建一个 router 目录,并在该目录下创建一个 index.js 文件,用于创建路由实例。示例代码如下: ```js import Vue from 'vue' import VueRouter from 'vue-router' import LeftColumn from '@/components/LeftColumn.vue' import MiddleColumn from '@/components/MiddleColumn.vue' import RightColumn from '@/components/RightColumn.vue' Vue.use(VueRouter) const routes = [ { path: '/left', component: LeftColumn }, { path: '/middle', component: MiddleColumn }, { path: '/right', component: RightColumn } ] const router = new VueRouter({ routes }) export default router ``` 在上面的代码中,首先引入了 Vue、Vue Router 和三个组件(LeftColumn、MiddleColumn 和 RightColumn)。然后使用 Vue.use(VueRouter) 安装 Vue Router 插件,创建了一个 routes 数组,其中每个元素表示一个路由,包括 path 和 component 两个属性,分别表示路由路径和对应的组件。最后创建了一个 router 实例,将 routes 作为参数传入。 3. 挂载路由实例 在项目的入口文件(例如 main.js)中,将创建好的路由实例挂载到 Vue 实例上。示例代码如下: ```js import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上面的代码中,首先引入了 Vue、App 组件和 router 实例。然后创建了一个 Vue 实例,将 router 实例作为 router 属性传入,最后将 App 组件渲染到 #app 元素上。 4. 使用路由链接 在组件中使用路由链接进行页面跳转。示例代码如下: ```html <template> <div> <router-link to="/left">左栏</router-link> <router-link to="/middle">中栏</router-link> <router-link to="/right">右栏</router-link> </div> </template> ``` 在上面的代码中,使用 router-link 组件创建了三个链接,分别对应三个路由路径。当用户点击链接时,路由会根据路径跳转到对应的组件。 以上就是挂载路由的基本步骤,可以根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值