博客网站布局

1、头部

头部html代码

 <header class="header">
          <nav>
              <ul class="nav_ul clear_fix">
                  <li class="logo"><a href="#">关于博主</a></li>
                  <li class="slider_btn"><a href="#">更多资源</a></li>
                  <li><a href="#">java Web</a><span></span></li>
                  <li><a href="#">python</a><span></span></li>
                  <li class="active"><a href="#">首页</a><span></span></li>
              </ul>
          </nav>
          <div class="banner">
              <div class="inner">
                  <div class="line"></div>
                  <h1>我是dry</h1>
                  <div class="line"></div>
                  <p>E-mail:123456@qq.com</p>
                  <p>Tel:123456</p>
                  <button>点我</button>
                  <div class="more">更多</div>
              </div>
          </div>
      </header>

头部css代码

.header{
    line-height: 50px  ;
}
#wrap{
    background: url("../img/dog.jpg") no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    font-family: Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
}
.content{
    opacity: 0.9;
}
.header nav{
    height: 50px;
    background: cornflowerblue;
}
nav ul li{
     float: right;
     margin-right: 30px;
    font-weight: 600;

 }
.banner{
    height: 600px;
}

.logo{
    float: left;
    margin-left: 30px;
}
.logo a{
    font-size: 20px;
    color: white;
    font-weight: 700;
    letter-spacing: 2px;/*字体间距*/
}
.banner .inner{
    color: white;
    text-align: center;
   /* background: #bdff60;*/
    margin: 0 auto;
    max-width: 500px;
    position: relative;
    top: 160px;
}
.header{
    background: rgba(0,0,0,0.4);
}

2、内容部分

内容部分html代码

<div class="content">
          <section class="part_one">
              <div class="wraper">
                  <h1>春花秋月何时了</h1>
                  <div>Right I die. My life before my eyes.</div>
                  <div class="first_title"></div>
                  <p>As I was hang there,I see wonderland，I don’t really see much of anything.But I see you.That is crazy.</p>
              </div>
              <div class="icon">
                  <span class="item"><img src="img/钻石.svg"></span>
                  <span class="item"><img src="img/程序.svg"></span>
                  <span class="item"><img src="img/爱心.svg"></span>
              </div>
          </section>
          <section class="part_two">
              <div class="first clear_fix">
                  <div class="first_left">
                      <img src="img/city.jpg">
                  </div>
                  <div class="first_text">
                      <h2>思念是一种病</h2>
                      <div class="two_title">我却病入膏肓</div>
                      <p>那一年南国之南，你如灼目之阳。最是那一低头的温柔，恰似水莲花不胜凉风的娇羞</p>
                  </div>
              </div>
              <div class="first clear_fix">
                  <div class="first_text">
                      <h2>思念是一种病</h2>
                      <div class="two_title">我却病入膏肓</div>
                      <p>那一年南国之南，你如灼目之阳。最是那一低头的温柔，恰似水莲花不胜凉风的娇羞</p>
                  </div>
                  <div class="first_left first_right">
                      <img src="img/time.jpg">
                  </div>
              </div>
              <div class="first clear_fix">
                  <div class="first_left">
                      <img src="img/sea.jpg">
                  </div>
                  <div class="first_text">
                      <h2>思念是一种病</h2>
                      <div class="two_title">我却病入膏肓</div>
                      <p>那一年南国之南，你如灼目之阳。最是那一低头的温柔，恰似水莲花不胜凉风的娇羞</p>
                  </div>
              </div>
          </section>
          <section class="part_three">
              <div class="three_wrap">
                  <div class="three_text">
                      <h2>相信未来</h2>
                      <div class="line"></div>
                      <div>当我的鲜花依偎在别人的情怀， 我依然固执地用凝霜的枯藤， 在凄凉的大地上写下：相信未来。 我要用手指那涌向天边的排浪， 我要用手掌 那托起太阳的大海， 摇曳着曙光那支温暖漂亮的笔杆， 用孩子的笔体写下：相信未来。</div>
                  </div>
                  <div class="card_group clear_fix">
                      <div class="card">
                          <h2>believe future</h2>
                          <p>我之所以坚定地相信未来， 是我相信未来人们的眼睛—— 她有拨开历史风尘的睫毛， 她有看透岁月篇章的瞳孔。</p>
                      </div>
                      <div class="card">
                          <h2>believe future</h2>
                          <p>我们能做的只是要拼尽全力，即使迈出的步子再小，我们也比昨天要更接近自己的目标了。</p>
                      </div>
                      <div class="card">
                          <h2>believe future</h2>
                          <p>从现在开始，不留余力地努力吧，最差的结果，也不过是大器晚成。

                          </p>
                      </div>
                      <div class="card">
                          <h2>believe future</h2>
                          <p>终于相信，每一条走上来的路，都有它不得不那样跋涉的理由。每一条要走下去的路，都有它不得不那样选择的方向。</p>
                      </div>
                      <div class="card">
                          <h2>believe future</h2>
                          <p>给自己一些时间，原谅做过很多傻事的自己。接受自己，爱自己；要相信，过去的都会过去，该来的都在路上。</p>
                      </div>
                      <div class="card">
                          <h2>believe future</h2>
                          <p>有一天，蓦然回首，你会发现，那个给你许多痛苦的人，却也是你的救赎。</p>
                      </div>
                  </div>
              </div>
          </section>
      </div>

内容部分css代码

.line{
    width: 65%;
    background: white;
    height: 2px;
    margin: 0 auto;
    margin-bottom: 10px;
}
.inner h1{
    margin-bottom: 10px;
}
.banner .inner p{
    line-height: 30px;
    font-size: 18px;
    letter-spacing: 1px;
}
.banner .inner button{
    margin-top: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    background: lightpink;
    color: white;
    border: none;
    cursor: pointer;/*手型*/
    outline: medium none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
}
.banner .inner button:hover{
    transform: rotate(360deg) scale(2);/*设置旋转及放大倍数*/
    transition: 2s;
}
.banner .inner .more{
    margin-top: 140px;
}
.part_one{
    text-align: center;
    color: white;
    background: rgba(67,178,165,1);
    padding-top: 65px;
    opacity: 0.95;
}
 .first_title{
    height: 2px;
    width: 50%;
     background: white;
     margin: 15px auto;
}
.wraper{
    margin: 0 auto;
    max-width: 1080px;
}
.wraper h1{
    padding: 15px 0;
    letter-spacing: 1px;
}
.wraper p{
    padding: 15px 0;
    letter-spacing: 1px;
}
.icon{
   margin: 30px auto;
    margin-bottom: 0;
}
.icon .item{
    border: 2px solid green;
    display: inline-block;
    height: 80px;
    margin: 20px 30px;
    width: 80px;
    transform: rotate(45deg);

}
.icon .item img{
    height: 100%;
    width:100%;
    transform: rotate(-45deg);
}
.part_two{
    background:rgb(33, 41, 50);
}
.first .first_right{
  float: right;
}
.first_left{
    width: 41%;
}
.first img{
    width: 100%;
}
.first>div{
    float: left;
}
.clear_fix:after{
    content: '';
    display: block;
    clear: both;
}
.first_text{
    float: right;
    left: 50px;
    position: relative;
    top: 68px;
    width: 55%;
    color: white;
}
.first_text h2{
    font-size: 24px;
    margin-bottom: 10px;
}
.two_title{
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.first_text p{
    width: 90%;
    font-size: 18px;
    letter-spacing: 2px;
}

.first:nth-child(odd){
    background: rgba(255,255,255,1);
}
.first:nth-child(2n+1){
    background: rgba(255,255,255,0.1);
}
.part_three{
    background: #3f3965;
    opacity: 0.9;/*透明度*/
    color: white;
}
.three_wrap{
    margin: 0 auto;
    width: 60%;
}
.three_wrap .three_text{
    padding-top: 65px;
}
.three_text h2{
    margin-bottom: 20px;
    text-align: center;
}
.three_text .line{
    width: 55%;
    margin-bottom: 20px;
}
.card_group{
    margin: 0 auto;
}
.card{
    min-height: 300px;
    float: left;
    width: 50%;
    padding: 50px;
    max-width: 461px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-top: 20px;
}
.card h2{
    text-align: center;
}
.card:nth-child(1){
    background:  rgba(0, 0, 0, 0.05);
}
.card:nth-child(2){
    background:  rgba(0, 0, 0, 0.1);
}
.card:nth-child(3){
    background:  rgba(0, 0, 0, 0.15);
}
.card:nth-child(4){
    background:  rgba(0, 0, 0, 0.2);
}
.card:nth-child(5){
    background:  rgba(0, 0, 0, 0.25);
}
.card:nth-child(6){
    background:  rgba(0, 0, 0, 0.3);
}

3、底部及返回顶部

底部HTML代码

<div class="footer">
          <div class="share_group">
              <ul>
                  <li>星期一</li>
                  <li>星期二</li>
                  <li>星期三</li>
                  <li>星期四</li>
                  <li>星期五</li>
              </ul>
              <div>© dry2019-8</div>
          </div>
      </div>

底部css代码

.footer{
    background: cornflowerblue;
    min-height: 150px;
    text-align: center;
    color: white;
}
.share_group{
    display: block;
    margin: 0 auto;
    width: 1080px;
    padding: 50px;
}
.share_group li{
    padding:15px;
    display: inline-block;
}

返回顶部HTML代码

<div class="top">
          <a href="#">
              <img src="img/向上箭头.svg">
              <p>Top</p>
          </a>
      </div>

返回顶部css代码

.top{
    width: 50px;
    height: 30px;
    position: fixed;
    right: 30px;
    bottom: 120px;

}
.top p{
    color: white;
}
.top p,img{
    width: 100%;
    text-align: center;
}

返回顶部js代码

$('.top').click(function () {
    $('body,html').animated({
        scrollTop:0
    },300)
})
    $(window).scroll(function () {
        if($(window).scrollTop()<100){
            $('.top').css('display','none')
        }else {
            $('.top').css('display','block')
        }
    })

4、侧边菜单

侧边菜单栏html代码

 <div class="mask"></div>
      <div class="slider">
          <ul>
              <li><a href="#">HTML5</a></li>
              <li><a href="#">C#入门</a></li>
              <li><a href="#">网站设计</a></li>
              <li><a href="#">JavaScript</a></li>
              <li><a href="#">css入门</a></li>
              <li><a href="#">jQuery入门</a></li>
          </ul>
      </div>

侧边菜单栏css代码

.mask{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.3);
}
.slider{
    background: darkgrey;
    position: fixed;
    top: 0;
    right: -300px;
    bottom: 0;
    width: 300px;
    padding: 15px 0;
    transition: .3s;
}
.slider ul li{
    margin-top: 25px;
    padding: 15px;
}
.slider ul li:hover{
    background: chartreuse;
}
.slider ul li a{
    color: white;
}

侧边菜单栏js代码

$(function () {
    $('.nav_ul li').click(function () {
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
    })
    $('.slider_btn').click(function () {
        showSlider()
    })
    $('.mask').click(function () {
        hideSlider()
    })

    function showSlider() {
        $('.mask').fadeIn()
        $('.slider').css('right',0)

    }
    function hideSlider() {
        $('.mask').fadeOut()
        $('.slider').css('right',-300)
    }
})

**

5、css重置代码

**

* {
    margin: 0;
    padding: 0
}
em,i {
    font-style: normal
}
li {
    list-style: none
}
img {
     border: 0;
     vertical-align: middle
 }
button {
    cursor: pointer
}
a {
    color: white;
    text-decoration: none
}
a:hover {
color: #c81623
}