博客网站布局_博客页面布局

作者：小桥流水78 | 2024-07-19 13:21:46

踩

博客页面布局

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

头部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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

内容部分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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

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>
1
2
3
4
5
6
7
8
9
10
11
12

底部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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

返回顶部HTML代码

<div class="top">
          <a href="#">
              <img src="img/向上箭头.svg">
              <p>Top</p>
          </a>
      </div>
1
2
3
4
5
6

返回顶部css代码

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

}
.top p{
    color: white;
}
.top p,img{
    width: 100%;
    text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

返回顶部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')
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5
6
7
8
9
10
11

侧边菜单栏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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

侧边菜单栏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)
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】