<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>响应式</title>
<style type="text/css">
body
{
margin: 0 auto;
}
ul
{
padding:0;
margin:0;
}
a
{
text-decoration: none;
color: white;
font-size: 14pt;
padding: 0 3px;
display: block;
}
.menu
{
background: red;
}
.menu li
{
display: block;
float: left;
margin: 3px;
background: grey;
width: 140px;
text-align: center;
color: white;
font-size: 9pt;
}
#logo
{
background: white;
width: 230px;
}
#logo a
{
color: Gray;
font-size: 35pt;
background: white;
}
#toplogo
{
display: none;/*平时隐藏*/
margin: 0 auto;
text-align: center;
}
#toplogo a
{
color: Black;
font-size: 35pt;
}
@media only screen and (min-width: 585px) and (max-width: 823px)
{
#logo
{
display: none;
}
#toplogo
{
display: block;
width: 100%;
}
.menu
{
width: 585px;/*在中间显示 text-align: center;*/
background: red;
}
}
@media only screen and (max-width: 585px)
{
#logo
{
display: none;
}
#toplogo
{
display: block;
width: 100%;
}
.menu
{
width: 100%;
}
.menu li
{
width: 100%;
}
}
</style>
</head>
<body>
<ul class="menu">
<div id="toplogo">
<a href="#">导航</a></div>
<li><a href="#">课程大厅</a><br />
IT课程都在这里啦</li>
<li><a href="#">学习中心</a><br />
好好学习,天天向上</li>
<li id="logo"><a href="#">导航</a></li>
<li><a href="#">个人中心</a><br />
个人信息 修改密码</li>
<li><a href="#">关于我们</a><br />
单位地址 应聘信息</li>
</ul>
</body>
</html>
响应式菜单
猜你喜欢
转载自blog.csdn.net/qq_38912819/article/details/80543085
今日推荐
周排行