<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0 auto;
        }
        .top,
        .banner,
        .main,
        .footer{
            width: 960px;
            margin: 0 auto;
            border: 1px dashed #ccc;
            text-align: center;
            background-color: #eee;
        }
        .top{
            height: 80px;

        }
        .banner{
            height: 120px;
        }
        .main{
            height: 500px;
        }
        .left{
            width: 360px;
            height: 500px;
            background-color: pink;
            float: left;
        }
        .right{
            width: 592px;
            height: 500px;
            background-color: #0a2ffe;
            float: right;
        /*   左浮动有浮动是根据浏览器来浮动的  float 一定得要父亲来*/
        }
        .footer{
            height: 120px;
        }
    </style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

css练习——两列左窄右kuan型的更多相关文章

  1. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  2. CSS实现两列布局，一列固定宽度，一列宽度自适应方法

    不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...

  3. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  4. 纯css实现两列等高

    <!doctype html> <html> <head> <meta /> <title>Title</title> < ...

  5. 如何用纯CSS布局两列，一列固定宽度，另一列自适应？

    大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...

  6. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  7. div+css 左右两列自适应高度 ，以及父级div也跟着自适应子级的高度（兼容各大浏览器）

    <style type="text/css" media="screen"> <!-- #main {width:500px;_height: ...

  8. css渐变写法 从左到右渐变三种颜色示例；

    background:linear-gradient(to right,#7f06a8,#a02bc2,#7f06a8)

  9. 布局两列div等高方法

    一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

随机推荐

  1. AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层

    AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层 AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层我理解的图层的作用大概是把 ...

  2. C# web项目中sql数据库转sqlite数据库

    最近做了一个小网站,用到了一个使用sql server 2005的.net cms系统,但是现在我所买虚拟主机的服务商,不给虚拟主机提供sql server服务了,那就转数据库吧,转啥好呢,思来想去, ...

  3. 为企业应用开发提速，写给企业IT部门的低代码开发基础知识

    简介:应用程序开发长期以来一直是IT部门和业务部门面临的问题. IT部门总是被新的应用程序需求弄得不堪重负.他们不可能完成业务部门想要完成的每一个项目. 同时,业务部门的用户厌倦了等待,并开始完全绕过 ...

  4. Jquery才可以使用 this 指定当前DOM

    Jquery才可以使用 this 指定当前DOM jquery获取并设置它的元素 <div class="shop-item" style="line-height ...

  5. hdu 1251 统计难题 (字典树（Trie）<PS:C++提交不得爆内存>)

    统计难题Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submis ...

  6. nyoj 412 Same binary weight （）

    Same binary weight 时间限制:300 ms  |  内存限制:65535 KB 难度:3   描述 The binary weight of a positive  integer ...

  7. nyoj 255-C小加 之 随机数 (map)

    255-C小加 之 随机数 内存限制:64MB 时间限制:3000ms 特判: No 通过数:15 提交数:18 难度:1 题目描述: ACM队的“C小加”同学想在学校中请一些同学一起做一项问卷调查, ...

  8. 力扣（LeetCode）Excel表列名称 个人题解

    给定一个正整数,返回它在 Excel 表中相对应的列名称. 例如, 1 -> A 2 -> B 3 -> C ... 26 -> Z 27 -> AA 28 -> ...

  9. 原生js实现简单的下拉加载

    #获取当前滚动条的高度document.documentElement.scrollTop #获取当前窗口的高度 document.documentElement.clientHeight #获取当前 ...

  10. C#解析XML之流模型-XMLTextReader类

    C#读取XML文档之XMLTextReader 类有一些构造程序来适应各种各样的情况,比如从一个已经存在的数据流或统一资源定位网址读取数据.最常见的是,你或许想从一个文件读取XML数据,那么也就有一个 ...