菜单代码：
<div id="content"> <header id="header"> <nav> <ul id="navList"> <li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客园</a></li> <li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/q2546/">首页</a></li> <li><a id="blog_nav_newpost" class="menu" rel="nofollow" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/%E6%A2%A6%E4%BA%BA%E4%BA%AD">联系</a></li> <li><a id="blog_nav_rss" class="menu" href="https://www.cnblogs.com/q2546/rss">订阅</a></li> <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li> </ul> </nav> </header>
内容代码：
1 <div class="day"> 2 <div class="dayTitle"> 3 <a id="homepage1_HomePageDays_DaysList_ctl00_ImageLink" href="https://www.cnblogs.com/q2546/archive/2019/06/13.html">2019年6月13日</a> 4 </div> 5 6 7 <div class="postTitle"> 8 <a id="homepage1_HomePageDays_DaysList_ctl00_DayList_TitleUrl_0" class="postTitle2" href="https://www.cnblogs.com/q2546/p/11015322.html">自动适应</a> 9 </div> 10 <div class="postCon"><div class="c_b_p_desc">摘要: @media only screen 表示下面的CSS针对屏幕有效果 (max- 767px) 当屏幕分辨率最大为767px时下面的css起作用 完整代码：thml代码 css代码：<a href="https://www.cnblogs.com/q2546/p/11015322.html" class="c_b_p_desc_readmore">阅读全文</a></div></div> 11 <div class="clear"></div> 12 <div class="postDesc">posted @ 2019-06-13 11:43 梦人亭 阅读(4) 评论(0) <a href="https://i.cnblogs.com/EditPosts.aspx?postid=11015322" rel="nofollow">编辑</a></div> 13 <div class="clear"></div> 14 15 </div>
侧边栏代码：
<div class="item"> <h3>公告</h3> <div id="blog-news"> <div id="profile_block">昵称：<a href="https://home.cnblogs.com/u/q2546/">梦人亭</a><br> 园龄：<a href="https://home.cnblogs.com/u/q2546/" title="入园时间：2018-07-17">10个月</a><br> 粉丝：<a href="https://home.cnblogs.com/u/q2546/followers/">0</a><br> 关注：<a href="https://home.cnblogs.com/u/q2546/followees/">1</a></div> </div>
css代码：
1 #content{ 2 980px; 3 margin:0 auto; 4 } 5 6 #header{ 7 margin-top:150px; 8 background-color:#333; 9 height:50px; 10 100%; 11 } 12 13 nav ul{ 14 min-height: 30px; 15 float: left; 16 margin-left: 30px; 17 word-break: break-all; 18 19 } 20 21 nav ul li{ 22 float: left; 23 list-style: none; 24 margin-top:-20px; 25 } 26 27 nav ul li a{ 28 color:#fff ; 29 margin: 18px 10px 0 0; 30 padding: 0 10px; 31 font: 14px/1.5em "微软雅黑"; 32 display: block; 33 text-decoration:none; 34 35 } 36 37 38 39 section{ 40 700px; 41 float:left; 42 background-color:red; 43 } 44 45 aside{ 46 270px; 47 padding-left:5px; 48 padding-right:5px; 49 float:left; 50 } 51 /** 52 * @media only screen 表示下面的CSS针对屏幕有效果 53 */ 54 /** 55 * and (max- 767px) 当屏幕分辨率最大为767px时下面的CSS启作用 56 */ 57 @media only screen and (max- 767px){ 58 section { 59 min- 100%; 60 } 61 62 aside { 63 min- 100%; 64 } 65 } 66 67 .item h3{ 68 font-size:18px; 69 text-align: left; 70 padding: 5px 10px; 71 border: 1px solid #ccc; 72 background: #f0f0f0; 73 } 74 75 #profile_block{ 76 margin-top: 5px; 77 line-height: 1.5; 78 text-align: left; 79 } 80 81 82 footer{ 83 clear: both; 84 85 }