宽度自适应两列布局

<!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. js版面向对象图片放大镜

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>放 ...

  2. centos 6.5 redis 安装

    安装教程有用的地址 https://my.oschina.net/u/2478188/blog/726984: 错误1 Redis: You need tcl 8.5 or newer in orde ...

  3. javascript关闭页面

    var browserName=navigator.appName; if (browserName=="Netscape") { window.open('','_parent' ...

  4. caffe添加自己的层

    首先修改src/caffe/proto/下的caffe.proto,修改好后需要编译 然后修改include/caffe/layers/logwxl_layer.hpp 然后修改src/caffe/l ...

  5. appium常用方法整理

    1.相对坐标解锁九宫格 应用场景 QQ解锁屏幕如上,可见九个按键在同一个View下面,要实现解锁,用press   moveTo  release  perform方法 实现代码如下: WebElem ...

  6. 在linux上如何通过composer安装yii

      Composer可以理解成一个依赖管理工具 它能解决以下问题 a) 你有一个项目依赖于若干个库. b) 其中一些库依赖于其他库. c) 你声明你所依赖的东西. d) Composer 会找出哪个版 ...

  7. 【Codeforces 738C】Road to Cinema

    http://codeforces.com/contest/738/problem/C Vasya is currently at a car rental service, and he wants ...

  8. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  9. oracleXE(oracle学习版)在windows的安装配置

    oracleXE其实安装基本就是一路下一步. 在安装前记得先把tomcat打开,不然oracleXE会占用8080端口且安装过程无法更改端口. 如果需要远程连接此oracle XE的话,要关闭这台电脑 ...

  10. Zabbix监控mysql performance

    介绍 zabbix监控mysql性能,使用zabbix自带的mysql监控模板,可以监控以下内容OPS(增删改查).mysql慢查询数量.mysql请求\响应流量带宽 配置 新建mysql监控用户 G ...