自适应效果

 主要代码：

 1 /**
 2 *@media only screen 针对以下css屏幕效果
 3 *(max-width:767px) 当屏幕分辨率最大为767px时，下面的css启用效果
 4 */
 5 @media only screen and (max-width:767px){
 6     section{
 7         min-width : 100%;
 8     }
 9     
10     aside{
11         min-width : 100%;
12     }
13 }

次要代码：              

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>首页</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8     <body>
 9 
10     <div id="content">
11 
12     <nav>导航菜单</nav>
13     
14     <section>博客项</section>
15     
16     <aside>侧边栏</aside>
17     
18     <footer>
19     <p>版权</p>
20     </footer>
21 </div>
22 </body>
23 </html>
 1 #content{
 2     width:980px;
 3     margin:0 auto;
 4     background-color:#555;
 5 }
 6 
 7 section{
 8     width:700px;
 9     float:left;
10     background-color:red;
11 }
12 
13 aside{
14     width:270px;
15     padding-left:5px;
16     padding-right:5px;
17     float:left;
18     background-color:yellow;
19 }
20 /**
21 *@media only screen 针对以下css屏幕效果
22 *(max-width:767px) 当屏幕分辨率最大为767px时，下面的css启用效果
23 */
24 @media only screen and (max-width:767px){
25     section{
26         min-width : 100%;
27     }
28     
29     aside{
30         min-width : 100%;
31     }
32 }

新元素用于替换之前的<div>元素（在传统DIV约定俗成的基础进行演进）。

  • 这些元素有：
  • <header> 元素用于表示页眉
  • <nav> 元素用于表示导航
  • <section> 元素用于表示相关信息集中到一块
  • <article> 元素用于表示文章
  • <aside>元素用于表示附属信息，如最新文章列表，历史存档
  • <footer> 元素用于表示页脚

其实，所有的元素本质上都是<div>元素。

只不过这些特殊的元素，如上面的HTML5布局元素，在浏览器渲染时添加了w3c事先约定的CSS规则

posted @ 2019-06-13 11:46  JackSon~鹤  阅读(297)  评论(0)  编辑  收藏  举报