标签：nav foo head 效果 dex lang span and back
一、index 首页布局
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="content">
<nav>导航栏</nav>
<section>博客内容</section>
<aside>侧边栏</aside>
<footer>
<p>版权</p>
</footer>
</div>
</body>
</html>
二、样式
/** 屏幕尺寸 700px+270px+5+5=980px;
*
*/
#content{
width:980px;
margin:0 auto;
background-color:#666;
}
section{
width:700px;
float:left;
background-color:blue;
}
aside{
width:270px;
padding-left:5px;
padding-right:5px;
float:left;
background-color:yellow;
}
/*
*@media only screen 表示下面的css 针对屏幕有效果
*/
/**
* and (max-width:700px) 当屏幕分辨率最大为767px时下面的css起作用
*/
@media only screen and (max-width:767px){ /*and 后空格一定要*/
section{
min-width:100%;
}
aside{
min-width:100%;
}
}
完整代码，HTML 、css 都需要放上去
标签：nav foo head 效果 dex lang span and back
原文地址：https://www.cnblogs.com/lszw/p/11015416.html
