<!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. AtCoder Grand Contest 036D - Negative Cycle

    神仙题?反正我是完全想不到哇QAQ 这场AGC真的很难咧\(\times 10086\) \(\bf Description\) 一张 \(n\) 个点的图,\(i\) 到 \(i+1\) 有连边. ...

  2. [考试反思]1009csp-s模拟测试66：依旧

    依旧是好一场烂一场. 依旧是那么菜. 依旧是难止颓废. 依旧是在此方仰望,幻想? 上面这段中二的东西是为了防止Parisb说我的标题与内容无关而diss我莫名其妙115的语文. 但是菜是的确是菜... ...

  3. 常用git命令教程

    一.新建代码库 # 在当前目录新建一个Git代码库 $ git init # 新建一个目录,将其初始化为Git代码库 $ git init [project-name] # 下载一个项目和它的整个代码 ...

  4. csp-s m 80 题解

    写在前面:(扯淡话) 这次考试是AB组分开考,但是觉得题目并不是很水,所以就来写一下题解,其实这次由于翘掉了午休,所以考试的前半部分还是比较困的(越做越清醒!)今天调完还是很有感触的! 正文: T1 ...

  5. 机器学习环境搭建安装TensorFlow1.13.1+Anaconda3.5.3+Python3.7.1+Win10

    安装Python3.7.1 此处不再赘述安装过程,作为记录 安装Anaconda3.5.3 Anaconda3-5.3.0-Windows-x86_64.exe 方案1. 可以直接从官网https:/ ...

  6. python面试题2.1：如何实现栈

    本题目摘自<Python程序员面试算法宝典>,我会每天做一道这本书上的题目,并分享出来,统一放在我博客内,收集在一个分类中. 2.1 如何实现栈 [阿里巴巴面试题] 难度系数:⭐⭐⭐ 考察 ...

  7. Linux命令实战（一）

    1.pwd(printing working directory)打印当前工作目录路径 [root@test sysconfig]# pwd /etc/sysconfig 2.ls(list)列出当前 ...

  8. UML简明使用

    1.继承 空心三角+实线 2.实现接口 空心三角+虚线 3.关联 箭头+实线 4.聚合 空心菱形+实线+箭头 5.组合 实心菱形+实线+箭头 6.依赖 虚线+箭头 7.关联.聚合.组合.依赖的区别 关 ...

  9. Groovy单元测试框架spock基础功能Demo

    spock是一款全能型的单元测试框架. 最近在做单元测试框架的调研和尝试,目前确定的方案框架包括是:spock,Junit,Mockito以及powermock.由于本身使用Groovy的原因,比较钟 ...

  10. arduino体感控制简单版

    https://learn.sparkfun.com/tutorials/apds-9960-rgb-and-gesture-sensor-hookup-guide/all 硬件连线 关键 VCC=  ...