网页 首页布局、屏幕尺寸 自适应
一、index 首页布局
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"> /*外部链接 标签*/
</head>
<body>
<div id="content"> /*创建盒子DIV*/
<nav>导航栏</nav> /*导航写法，内联样式显示*/
<section>博客内容</section> /*section 左边盒子布局*/
<aside>侧边栏</aside> /*aside右边盒子布局*/
<footer> /*网页底部 版权信息 */
<p>版权</p> /* P字段 版权内容*/
</footer>
</div>
</body>
</html>
二、样式
/** 屏幕尺寸 700px+270px+5+5=980px;
*
*/
#content{ /* #content ID选择器 */
width:980px; /* 宽度 980 像素*/
margin:0 auto; /* 外边距 居中 */
background-color:#666; /* 背景颜色 */
}
section{ /* 唯一的一个标签所以写到外部标签里 */
width:700px; /* 宽度700像素 */
float:left; /* 这是为什么会在 一条显示 很重要的原因。。浮动显示 */
background-color:blue; /*背景颜色 蓝*/
}
aside{
width:270px; /*宽度270像素*/
padding-left:5px; /*左边内边距5像素 */
padding-right:5px; /* 右边 内边距5像素*/
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 都需要放上去
