宽度自适应两列布局

<!DOCTYPE html>

<html>

<head>

    <meta charset="gbk">

    <title>宽度自适应两列布局</title>

<style>

*{margin:0;padding:0;}

#herder{

    height:41px;

    background:blue;

}

.main-left{

    width:10%;

    height:800px;

    background:red;

    float:left;

}

.main-right{

    width:90%;

    height:800px;

    background:pink;

    float:right;

}

#footer{

    clear:both;

    height:50px;

    background:gray;

}

ul{

    list-style-type:none;

    background-color:#333;

    overflow:hidden;

}

li{

    float:left;

}

li a, .dropbtn{

    display:inline-block;

    color:white;

    text-align:center;

    padding:10px 8px;

    text-decoration:none;

    font-family:华文新魏;

    font-size:18px;

}

li a:hover, .dropdown:hover .dropbtn{

    background-color:#111;

}

.dropdown{

    display:inline-block;

}

.dropdown-content{

    min-width:140px;

    background-color:#FFE4C4;

    position:absolute;

    display:none;

    box-shadow:0px 4px 6px 0px rgba(0,0,0,0.2);

    font-family:华文新魏;

}

.dropdown-content a{

    color:black;

    padding:4px 16px;

    text-decoration:none;

    display:block;

}

.dropdown-content a:hover{

    background-color:#F1F1F1;

}

.dropdown:hover .dropdown-content{

    display: block;

}

</style>

</head>

<body>

<div id="herder">

    <div class="dropdown">

        <a href="#" class="dropbtn">网址大全</a>

        <div class="dropdown-content">

            <a href="http://www.baidu.com">百度首页</a>

            <a href="http://www.qq.com">腾讯QQ</a>

            <a href="http://www.msn.com.cn">MSN</a>

        </div>

    </div>

    <div class="dropdown">

        <a href="#" class="dropbtn">业务管理</a>

        <div class="dropdown-content">

            <a href="http://www.baidu.com">百度首页</a>

            <a href="http://www.qq.com">腾讯QQ</a>

            <a href="http://www.msn.com.cn">MSN</a>

        </div>

    </div>

    <div class="dropdown">

        <a href="#" class="dropbtn">信息中心</a>

        <div class="dropdown-content">

            <a href="http://www.baidu.com">百度首页</a>

            <a href="http://www.qq.com">腾讯QQ</a>

            <a href="http://www.msn.com.cn">MSN</a>

        </div>

    </div>

</div>

<div class="main-left">左列</div>

<div class="main-right">右列</div>

<div id="footer111">页脚</div>

</body>

</html>

　　

左列
右列
页脚

DIV+CSS布局的更多相关文章

  1. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  2. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  4. DIV+CSS布局-固定页面开度布局

    DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...

  5. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  6. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  7. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  8. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  9. (转)一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  10. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

随机推荐

  1. [转]C#反射，根据反射将数据库查询数据和实体类绑定，并未实体类赋值

    本文来自:http://www.cnblogs.com/mrchenzh/archive/2010/05/31/1747937.html /****************************** ...

  2. vue.js 第二课

    实现响应的数据绑定和组合的视图组件. 让数据与Dom保持同步 . 在使用jq手工操作DOM时,我们的代码常常是命令式的.重复的.易错的.Vue.js拥抱数据驱动的视图概念.简单的讲,它意味着我们在普通 ...

  3. Oracle11g字符集AL32UTF8修改为ZHS16GBK详解

    此问题发生在数据库迁移过程中.源数据库:自己笔记本上win7 64位系统的oracle11g个人版,字符集ZHS16GBK :目标数据库,HP的sqlserver2008 系统 64位数据库服务器,字 ...

  4. localStorage使用总结

    一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题 ...

  5. 浅析 Android 的窗口

    来源:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=555&fromuid=6   一.窗口的概念 在开发过程中,我们经常会 ...

  6. Mysql触发器

    触发器(trigger)作用:监视某种情况,并触发某种操作. 触发器创建语法四要素: 1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/b ...

  7. Android测试基础题(三)

    今天接着给大家带来的是Android测试基础题(三).    需求:定义一个排序的方法,根据用户传入的double类型数组进行排序,并返回排序后的数组 俗话说的好:温故而知新,可以为师矣 packag ...

  8. java面向对象---对象初始化

    在本地变量中,如果定义了一个变量后没有赋值就使用,那么eclipse就会报错:但是在成员变量中,java是会强制给一个没有初始化的变量一个默认的初始值0, 如果是一个boolean类型的变量,那么默认 ...

  9. flex学习小结

    接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...

  10. linux下从SVN checkout目录源码下来

    需求:我们替换http请求为https协议,要查看全不全,得到源码中去检查,所以自动化扫源码查询.但是得先有源码包啊.源码包直接从SVN上checkout 1.下载 [root@v50 0.02 sr ...