起步圈个人博客

文章内容

红色系个人博客自适应模板首页一(html+css)

发布时间:2018-05-27T10:34:22来源:所属栏目:[ html5+css3] 连载文章:本文下一篇>>

    红色系个人博客自适应模板首页一带完整代码(html+css)
    首先做普通的浏览器的样式如图:

     


    下面是html:

     

     

     


       
           
           个人博客个人网站模板自适应模板
                  
       
       

        
        

    <div id="topid">
            2017年-10月-01号 18:30:27 星期五        
          </div>

     


       

     

    <h1><a href="/">个人博客
           

    <div id="mem">
        <ul>
    <li>   </li> <li><a href="/">登陆</a></li>
    <li>    </li> <li><a href="/">注册</a></li>
    <li>    </li> </ul>
       
       
          <ul>
    <li>       </li> <li><a href="">网站首页</a></li>
    <li>       </li> <li><a href="">关于我</a></li>
    <li>       </li> <li><a href="">个人博客</a></li>
    <li>       </li> <li><a href="">网站模板</a></li>
    <li>       </li> <li><a href="">自适应模板</a></li>
    <li>       </li> <li><a href="">会员中心</a></li>
    <li>       </li> <li><a href="">模板资料</a></li>
    <li>     </li> </ul>
           
     
      <div class="banner">
        <div class="keybanner"><a href="/">个人博客</a></div>   
     </div>
        <div class="leftlist">    
        <div class="news">
          <h3>
           </h3>

    系列文章


         
          <ul>
    <li>       </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>      </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>         </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>      </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>         </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>      </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>     </li> </ul>
          <h3>
           </h3>

    点击排行


         
          <ul>
    <li>      </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>      </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>         </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>      </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>         </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>      
         </li> </ul>
          <h3>
           </h3>

    最新文章


         
          <ul>
    <li>      </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>      </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>         </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>      </li> <li><a href="/" target="_blank" title="个人博客 个人网站模板 自适应模板">个人博客个人网站模板自适应模板</a></li>
    <li>     </li> </ul>
          <div class="guanzhu">扫描二维码关注个人博客官方微信账号</div>
          <a class="lianxi" href="/">  </div>   <div class="mainContent">
        <h2>
         </h2>

    文章推荐


       
        <div class="titlecontent">
          <h3>红色系自适应的个人博客首页html+css,www.qbu123.com</h3>
         


          <ul>
    <li>       

    世界曾经颠倒黑白 ,如今回归绚丽色彩。
    世界曾经失去声响, 如今有你们陪我唱歌。
    夜里黑暗覆盖着左手, 左手覆盖着右手。
    曾经牵手的手指, 夜里独自合十。
    风吹沙吹成沙漠, 你等我,等成十年漫长的打坐。
    你是天下的传奇,你是世界的独一。
    你让我花掉一整幅青春, 用来寻你。
    五.四.三.二.一. 他和她的迷藏。
    开始……


         </li> </ul>
          <div class="aboutcontent"><a class="readmore" href="/" target="_blank" title="/">阅读全文>></a>2017-10-01个人博客:[<a href="/">起步圈</a>]</div>
          <h3>红色系自适应的个人博客首页html+css,www.qbu123.com</h3>
         


          <ul>
    <li>       

    谁在春日艳阳的午后, 轻抚你穿过飘扬秀发的手。
    谁在无数个黯然的白夜, 带走独斟酌饮的酒, 把浓烈的温度,
    狠狠的烧进胸口。
    谁把一季又一季的绿色原野, 揉碎成泥土中潮湿的腐朽。
    谁捧起花的脸庞, 让岁月美的黯然神伤。
    ...


         </li> </ul>
          <div class="aboutcontent"><a class="readmore" href="/" target="_blank" title="/">阅读全文>></a>2017-10-01个人博客:[<a href="/">起步圈</a>]</div>
        
        
       </div>
     </div>
     
      <div class="pagfloat"> </div>
        <div class="lisksweb">
        <ul>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>       </li> <li><a href="">友情链接</a></li>
    <li>     </li> </ul>
       </div>
     
        <div>
        <ul>
    <li>      起步圈自适应模板个人博客
       </li> </ul>
           </div>
     
     
       </div>

     

     

     

     

    还有就是css:

    * { margin: 0; padding: 0; }
    body { font-family: "宋体", serif; font-size: 100%; width: 96.75%;  margin: 0 auto }
    h1 { color: #363636; font-size: 3.428571428571429em;  font-weight: normal; }
    ul { list-style: none; }
    a img { border: none; }
    a { color: #333; text-decoration: none; }
    a:hover, a:active, a:focus { color: #ac2125; text-decoration: none; }
    img { max-width: 100%; height: auto; width: auto; }
    p { line-height: 140%; }
    #topid{background-color: #fbb4b0;font-size: 13px;height: 18px; line-height: 17px;color: #fff; }
    header { border-bottom: #858585 1px solid; overflow: hidden; margin: 10px 0 }
    h1#logo { width: 100px; height: 60px; float: left; overflow: hidden }
    #mem { width: 100px; height: 60px; float: left;line-height: 5px; }
    #mem li { margin-top:6px;padding: 1px; }
    #mem a {background-color:#c2201b;border-color:#fdd8a4; padding: 3px 11px;border-style: none;color: #fff;font: 13px "微软雅黑", Arial, Helvetica, sans-serif; }
    nav { float: right; margin: 20px 0; }
    nav li { display: inline; list-style: none; padding: 1px; }
    nav li a { display: inline; color: #fff; text-shadow: none; background: #c2201b; padding: 8px 10px; }
    nav li a:hover, nav #navone a,#mem a:hover{ background: #7c0c0a; color: #fff; }

    .banner { background: url(../images/banner_top.jpg) center top no-repeat #a02b24; overflow: hidden; position: relative; font-size: 14px }
    .keybanner { width: 130px; height: 130px; border-radius: 100%; overflow: hidden; border: #FFF 4px solid; float: left; margin: 40px }
    .keybanner a { display: block; padding-top: 97px; width: 160px; background: url(../images/photos2.jpg) no-repeat; background-size: 130px 130px; }
    .keybanner a span { display: block; margin-top: 63px; padding-top: 8px; width: 130px; height: 55px; font-size: 12px; text-align: center; line-height: 20px; color: #fff; background: #fbb4b0; -webkit-transition: margin-top .2s ease-in-out; -moz-transition: margin-top .2s ease-in-out; -o-transition: margin-top .2s ease-in-out; transition: margin-top .2s ease-in-out; }
    .keybanner a:hover span { display: block; margin-top: 0; }
    .leftlist { margin: 20px 0 0 0; font-size: 14px; float: left;}
    .news h3 { font-size: 14px; background: url(../images/r_title_bg.jpg) repeat-x center }
    .news h3 p { background: #fff; width: 70px }
    .news h3 span { color: #d05d30 }
    .news h3.twocontent span { color: #ff614c; }
    .news h3.links span { color: #F17B6B; }
    .news ul { margin-bottom: 20px }
    .news ul li a:hover { text-decoration: underline }
    .onecontent li { height: 25px; line-height: 25px; clear: both; padding-left: 5px; overflow: hidden; padding-left: 15px; background: url(../images/li.jpg) no-repeat left center; }
    .onecontent { margin: 10px 0; overflow: hidden; }
    .twos { background: url(../images/twocontent.jpg) no-repeat left 8px; margin: 10px 0 }
    .twos li { line-height: 30px; height: 30px; overflow: hidden; padding-left: 24px; border-bottom:#c2201b dotted 1px }
    .lianxi img { margin: 10px auto; display: block }
    .guanzhu { overflow: hidden; margin-top: 20px; color: #000; text-align: center }
    .guanzhu span { color: #fe0002; font-weight: bold; font-size: 14px; }
    .mainContent { margin: 20px 0; width: 72.91666666666667%;float: right; }
    h2.titlemain { font: 18px "微软雅黑", Arial, Helvetica, sans-serif; color: #444; font-weight: bold; background: url(../images/h_line.jpg) repeat-x 20px center; }
    h2.titlemain span { color: #ff0000 }
    h2.titlemain p { background: #fff; width: 90px }
    .titlecontent h3 { border-bottom: 1px solid #858585; font-size: 1.2em; padding-bottom: 5px; margin: 20px 0; color: #F17B6B;}
    .titlecontent h3, .aboutcontent { clear: both; }
    .titlecontent ul p { color: #666; font-size: 14px; line-height: 26px }
    .aboutcontent { margin: 10px 0; clear: both; overflow: hidden;  background: #fdefee; line-height: 26px; height: 26px; color: #838383; padding-left: 20px; font-size: 12px }
    .aboutcontent span { margin: 0 5px; }
    .aboutcontent span a { color: #8a0300; }
    a.readmore { color: #e75558; float: right; padding-right: 5px }
    .lisksweb {  margin: 10px 0; text-align: center; background: #fdefee;border: 1px dashed #CCC;}
    .lisksweb li { display: inline;line-height: 26px; text-shadow: #fff 1px 1px 1px; height: 26px; font-size: 12px; }
    footer { background:  #fbb4b0; margin-top: 20px; border: 1px solid #CCC;}
    footer ul { padding: 10px 0; text-align: center;color: #8a0300 }
    .pagfloat { clear: both; height: 0; line-height: 0px; }


    下一篇讲如何通过css实现自适应。

[留言列表]