DIV+CSS布局
2024-10-19 04:22:44
宽度自适应两列布局
<!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>
左列
右列
页脚
最新文章
- [MongoDB]Mongo基本使用：
- 传智播客JavaWeb听课总结
- Android自定义控件1--自定义控件介绍
- int型整数中2进制中含有1的个数。
- 八大排序算法的 Python 实现
- meteor icons & splash配置
- HAOI2006受欢迎的牛
- unity3d 使用背景贴图
- linux ERROR: ld.so: object '/lib/libcwait.so' from /etc/ld.so.preload cannot be preloaded: ignored.
- Java Random随机种子
- Relocation - POJ 2923（状态压缩+01背包）
- iOS 之 调试、解决BUG
- 详解C# Tuple VS ValueTuple（元组类 VS 值元组）
- 修改 Pattern代码使 Java 正则表达式支持下划线 '_'
- Programming In Scala笔记-第五章、Scala中的变量类型和操作
- Vue插槽的深入理解和应用
- Django 2.x 常用命令
- centos7使用yum安装软件提示 cannot find a valid baseurl for repo:base/7/x86_64 的解决方法
- NoSuchFieldError
- vue-router之路由钩子（组件内路由钩子必须在路由组件调用，子组件没用）