HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

网站演示

在这里插入图片描述

搭建过程

html部分

首先下载Vue2，ElementUI等插件，放在你的本地。我这里为了运行方便，把代码放在了一个框架里运行。

下载后引入部分

    <link rel="stylesheet" href="{{URL::asset('elementui/lib/theme-chalk/index.css')}}">
    <link rel="stylesheet" href="{{URL::asset('css/common.css')}}">
    <link rel="stylesheet" href="{{URL::asset('css/layout/head.css')}}">
    <link rel="stylesheet" href="{{URL::asset('css/home/home.css')}}">

    <script src="https://unpkg.com/vue@2/dist/vue.js">script>
    <script type="text/javascript" src="{{URL::asset('elementui/lib/index.js')}}">script>
1
2
3
4
5
6
7

标题栏

<body>
<section class="navcut">
  <div class="w" >
    <img src="{{URL::asset('img/panda1.png')}}" alt="">
    <ul>
      <li><a href="" style="color:blue;">首页a>li>
      <li><a href="">关于a>li>
      <li><a href="">博客a>li>
      <li><a href="">留言a>li>
      <li class="nav-item">
        <a href="">我的工作台a>
        
        <ul class="droplist">
          <li><a href="#"><i class="el-icon-s-tools">i>  后台管理a>li>
          <li><a href="#"><i class="el-icon-user-solid">i>  退出账户a>li>
        ul>
      
      li>
    ul>
    <div class="search">
            <input type="search" placeholder="搜索内容">
            <button><i class="el-icon-search">i>button>
    div>
  div>
section>
body>
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

轮播图+个人头像

<div class="w main-box">
    <div class="box-left">
        <div id="rotationChart">
            <template>
            <div class="block">
                <span class="demonstration">span>
                <el-carousel height="316px">
                    <el-carousel-item>
                        <div class="rotation-chart" ><img src="{{URL::asset('img/3.jpg')}}" alt="">div>
                    el-carousel-item>
                    <el-carousel-item>
                        <div class="rotation-chart" ><img src="{{URL::asset('img/2.jpg')}}" alt="">div>
                    el-carousel-item>
                el-carousel>
            div>
            template>
        div>
    div>
    <div class="box-right person-info">
        <div class="head-sculpture-box">
            <div class="head-sculpture">
                <img src="{{URL::asset('img/scu.jpg')}}" alt="">
            div>
        div>
        <div class="net-name">三分濁酒div>
        <div class="person-signature">你只管出发，旅途自有风景div>
    div>
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

博客部分

<div class="w content-box">
    
    <div class="content-left">
        <div class="person-blog">
            <div class="blog-img fl">
                <img src="{{URL::asset('img/1.jpg')}}" alt="">
            div>
            <div class="blog-chara fl">
                
                <div class="blog-chara-top">
                    <div id="blogTag" class="blog-tag fl">
                        <el-tag type="danger" size="medium">
                            <i class="el-icon-sunny">i> 热门
                        el-tag>
                    div>
                    <div class="blog-title fl">
                          <a href="">你只管出发，旅途自有风景a>  
                    div>
                div>
                
                <div class="blog-chara-content">
                    <div>
                        我追过日落 吹过晚风br>
                        埋怨过这个世界 但还是会好好活着br>
                        不开心就去吹吹晚风吧 风会带走你的烦恼 !!!br>
                    div>
                div>
                
                <div class="blog-chara-bottom">
                    <div>
                        <i class="el-icon-thumb">i> 点击 100  
                    div>
                    <div>
                        <i class="el-icon-chat-dot-square">i> 评论 3  
                    div>
                    <div>
                        <i class="el-icon-collection-tag">i> 收藏 1  
                    div>
                div>
            div>
        div>

        <hr class="hr-solid blog-solid">hr>

        <div class="person-blog">
            <div class="blog-img fl">
                <img src="{{URL::asset('img/1.jpg')}}" alt="">
            div>
            <div class="blog-chara fl">
                
                <div class="blog-chara-top">
                    <div id="blogTag1" class="blog-tag fl">
                        <el-tag type="danger" size="medium">
                            <i class="el-icon-sunny">i> 热门
                        el-tag>
                    div>
                    <div class="blog-title fl">
                          <a href="">你只管出发，旅途自有风景a>  
                    div>
                div>
                
                <div class="blog-chara-content">
                    <div>
                        我追过日落 吹过晚风br>
                        埋怨过这个世界 但还是会好好活着br>
                        不开心就去吹吹晚风吧 风会带走你的烦恼 !!!br>
                    div>
                div>
                
                <div class="blog-chara-bottom">
                    <div>
                        <i class="el-icon-thumb">i> 点击 100  
                    div>
                    <div>
                        <i class="el-icon-chat-dot-square">i> 评论 3  
                    div>
                    <div>
                        <i class="el-icon-collection-tag">i> 收藏 1  
                    div>
                div>
            div>
        div>
        <hr class="hr-solid"> hr>

        <div class="person-blog">
            <div class="blog-img fl">
                <img src="{{URL::asset('img/1.jpg')}}" alt="">
            div>
            <div class="blog-chara fl">
                
                <div class="blog-chara-top">
                    <div id="blogTag2" class="blog-tag fl">
                        <el-tag type="danger" size="medium">
                            <i class="el-icon-sunny">i> 热门
                        el-tag>
                    div>
                    <div class="blog-title fl">
                          <a href="">你只管出发，旅途自有风景a>  
                    div>
                div>
                
                <div class="blog-chara-content">
                    <div>
                        我追过日落 吹过晚风br>
                        埋怨过这个世界 但还是会好好活着br>
                        不开心就去吹吹晚风吧 风会带走你的烦恼 !!!br>
                    div>
                div>
                
                <div class="blog-chara-bottom">
                    <div>
                        <i class="el-icon-thumb">i> 点击 100  
                    div>
                    <div>
                        <i class="el-icon-chat-dot-square">i> 评论 3  
                    div>
                    <div>
                        <i class="el-icon-collection-tag">i> 收藏 1  
                    div>
                div>
            div>
        div>
        <hr class="hr-solid"> hr>
        
        <div class="content-left-page">
            <el-pagination
            background
            layout="prev, pager, next"
            :total="50">
            el-pagination>
        div>
    div>
    
    <div class="content-right">
        <div class="content-right-achieve">
            <div class="person-achieve content-right-title">
                <i class="el-icon-trophy">i> 个人成就
            div>
            <div class="person-achieve-content content-right-form">
                <ul>
                    <li><i class="el-icon-thumb" style="color:#FF6A6A;">i>  获得3次点赞li>
                    <li><i class="el-icon-chat-dot-square" style="color:#FFB5C5;">i>  内容获得3次评论li>
                    <li><i class="el-icon-collection-tag" style="color:#00CD66;">i>  获得62次收藏li>
                    <li><i class="el-icon-position" style="color:#AB82FF;">i>  代码片获得12次分享li>
                ul>
            div>
        div>
        <div class="content-right-hotblog">
            <div class="person-blog content-right-title">
                <i class="el-icon-sunny">i> 热门文章
            div>
            <div class="person-hotblog-content content-right-form">
                <ul>
                    <li><i class="el-icon-caret-right">i>  <a href="">Python第三方库 - Pandas库a>li>
                    <li><i class="el-icon-caret-right">i>  <a href="">Python学习 - Request库a>li>
                    <li><i class="el-icon-caret-right">i>  <a href="">Python学习 - pymysql库a>li>
                    <li><i class="el-icon-caret-right">i>  <a href="">Python学习 - openpyxl库a>li>
                    <li><i class="el-icon-caret-right">i>  <a href="">Python第三方库 - matplotlib库a>li>
                ul>

            div>
        div>
        <div class="content-right-frilink">
            <div class="person-frilink content-right-title">
                <i class="el-icon-s-promotion">i> 友情链接
            div>
            <div class="fri-link-content">
                <div class="link-box"><a href="">CSDNa>div>
                <div class="link-box"><a href="">博客园a>div>
                <div class="link-box"><a href="">Gittea>div>
                <div class="link-box"><a href="">百度a>div>
                <div class="link-box"><a href="">谷歌a>div>
                <div class="link-box"><a href="">风中的花朵a>div>
                <div class="link-box"><a href="">将进酒a>div>
            div>
        div>
    div>
div>

<script>
    new Vue().$mount('#rotationChart');
    new Vue().$mount('.content-left');
script>
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
182
183

相关阅读:
Redis之List命令
 第2章数据库表结构设计
 字符串的使用方法之startwith()-以XX开头、endsWith()-以XX结尾、trim()-删除两端空格
 java计算机毕业设计小福星宠物领养演示视频源程序+mysql+系统+lw文档+远程调试
 stm32 笔记外部中断以及HAL库应用
 攻防演练-安全监测岗都做哪些工作
 面试官：你会如何设计QQ中的网络协议？
电子印章怎么弄？三步教你电子印章在线生成免费教程！
VF11&MR8M 冲销原因小结
 小程序的入门
原文地址：https://blog.csdn.net/JUN_7777/article/details/134536288