写一个博客页面

<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-width: 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>

 1 #content{
 2     width:980px;
 3     margin:0 auto;
 4 }
 5 
 6 #header{
 7     margin-top:150px;
 8     background-color:#333;
 9     height:50px;
10     width: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     width:700px;
41     float:left;
42     background-color:red;
43 }
44 
45 aside{
46     width:270px;
47     padding-left:5px;
48     padding-right:5px;
49     float:left;
50 }
51 /**
52 * @media only screen 表示下面的CSS针对屏幕有效果
53 */
54 /**
55 *  and (max-width: 767px)  当屏幕分辨率最大为767px时下面的CSS启作用
56 */
57 @media only screen and (max-width: 767px){
58     section {
59         min-width: 100%;
60     }
61     
62     aside {
63         min-width: 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 }