<!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. [python]一些常用的python知识总结

    Pthon知识积累,遇到的各种python问题汇总 json.dumps()和json.loads()是json格式处理函数 json.dumps()函数是将一个Python数据类型列表进行json格 ...

  2. 【WPF on .NET Core 3.0】 Stylet演示项目 - 简易图书管理系统(3) - 使用Conductor切换页面

    前两章中, 我们已经实现了这个图书管理系统的登录窗口, 并实施了完善的单元测试. 该是时候回过头来关注我们的主窗口了. 一个功能丰富的系统一般会有多个页面, 我们图书管理系统虽然是"简易&q ...

  3. 安装cnpm遇到的问题

    安装 cnpm时,用git安装时,安装好node环境后,测试版本号node -v和npm -v都没问题,可以输出版本号,但是安装cnpm时,使用淘宝镜像安装后,会出现如下警告: 这个是提醒你安装的版本 ...

  4. Algorithm： GCD、EXGCD、Inverse Element

    数论基础 数论是纯数学的一个研究分支,主要研究整数的性质.初等数论包括整除理论.同余理论.连分数理论.这一篇主要记录的是同余相关的基础知识. 取模 取模是一种运算,本质就是带余除法,运算结果就是余数. ...

  5. 《JAVA 程序员面试宝典（第四版）》之循环、条件、概率

        分享内容:关于集合的使用   书页号码:77页 题目:一个字符串中包含a~z中的多个字符,如有重复,如String data = "aavzcadfdsfsdhshgwasdfasd ...

  6. PL真有意思（一）：引言

    前言 断断续续学编译原理到之前发过写一个编译器和正则表达式引擎系列文章也有一段时间了,然后最近看完PLP这本书,这本书应该算是入门书,但是对我这种半吊子收获很大.所以为了弥补最近学操作系统和接外包摸的 ...

  7. git、git-lab学习记录

    git: 定义:分布式版本控制工具,类似SVN,区别在于SVN如果网络断了,无法进行版本控制,而git是本地进行版本控制,不多bb了,来个图吧 git常用命令: git add 文件          ...

  8. vuejs学习之项目结构解读

    转载:https://www.cnblogs.com/chenleideblog/p/10484554.html 关于Vue中main.js.APP.vue和index.html之间关系 在初始化vu ...

  9. openresty如何完美替换nginx

    下载openresty wget https://openresty.org/download/openresty-1.15.8.1.tar.gz tar zxvf openresty-1.15.8. ...

  10. ceph中rbd的增量备份和恢复

    ceph中rbd的增量备份和恢复 ceph的文档地址:Ceph Documentation ​ 在调研OpenStack中虚机的备份和恢复时,发现OpenStack和ceph紧密结合,使用ceph做O ...