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

网站演示

搭建过程

html部分

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

  1. 下载后引入部分
html 复制代码
    <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. 标题栏
html 复制代码
<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>&nbsp;&nbsp;后台管理</a></li>
          <li><a href="#"><i class="el-icon-user-solid"></i>&nbsp;&nbsp;退出账户</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. 轮播图+个人头像
html 复制代码
<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. 博客部分
html 复制代码
<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>&nbsp;热门
                        </el-tag>
                    </div>
                    <div class="blog-title fl">
                        &nbsp;&nbsp;<a href="">你只管出发,旅途自有风景</a>&nbsp;&nbsp;
                    </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>&nbsp;点击&nbsp;100&nbsp;&nbsp;
                    </div>
                    <div>
                        <i class="el-icon-chat-dot-square"></i>&nbsp;评论&nbsp;3&nbsp;&nbsp;
                    </div>
                    <div>
                        <i class="el-icon-collection-tag"></i>&nbsp;收藏&nbsp;1&nbsp;&nbsp;
                    </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>&nbsp;热门
                        </el-tag>
                    </div>
                    <div class="blog-title fl">
                        &nbsp;&nbsp;<a href="">你只管出发,旅途自有风景</a>&nbsp;&nbsp;
                    </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>&nbsp;点击&nbsp;100&nbsp;&nbsp;
                    </div>
                    <div>
                        <i class="el-icon-chat-dot-square"></i>&nbsp;评论&nbsp;3&nbsp;&nbsp;
                    </div>
                    <div>
                        <i class="el-icon-collection-tag"></i>&nbsp;收藏&nbsp;1&nbsp;&nbsp;
                    </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>&nbsp;热门
                        </el-tag>
                    </div>
                    <div class="blog-title fl">
                        &nbsp;&nbsp;<a href="">你只管出发,旅途自有风景</a>&nbsp;&nbsp;
                    </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>&nbsp;点击&nbsp;100&nbsp;&nbsp;
                    </div>
                    <div>
                        <i class="el-icon-chat-dot-square"></i>&nbsp;评论&nbsp;3&nbsp;&nbsp;
                    </div>
                    <div>
                        <i class="el-icon-collection-tag"></i>&nbsp;收藏&nbsp;1&nbsp;&nbsp;
                    </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>&nbsp;个人成就
            </div>
            <div class="person-achieve-content content-right-form">
                <ul>
                    <li><i class="el-icon-thumb" style="color:#FF6A6A;"></i>&nbsp;&nbsp;获得3次点赞</li>
                    <li><i class="el-icon-chat-dot-square" style="color:#FFB5C5;"></i>&nbsp;&nbsp;内容获得3次评论</li>
                    <li><i class="el-icon-collection-tag" style="color:#00CD66;"></i>&nbsp;&nbsp;获得62次收藏</li>
                    <li><i class="el-icon-position" style="color:#AB82FF;"></i>&nbsp;&nbsp;代码片获得12次分享</li>
                </ul>
            </div>
        </div>
        <div class="content-right-hotblog">
            <div class="person-blog content-right-title">
                <i class="el-icon-sunny"></i>&nbsp;热门文章
            </div>
            <div class="person-hotblog-content content-right-form">
                <ul>
                    <li><i class="el-icon-caret-right"></i>&nbsp;&nbsp;<a href="">Python第三方库 - Pandas库</a></li>
                    <li><i class="el-icon-caret-right"></i>&nbsp;&nbsp;<a href="">Python学习 - Request库</a></li>
                    <li><i class="el-icon-caret-right"></i>&nbsp;&nbsp;<a href="">Python学习 - pymysql库</a></li>
                    <li><i class="el-icon-caret-right"></i>&nbsp;&nbsp;<a href="">Python学习 - openpyxl库</a></li>
                    <li><i class="el-icon-caret-right"></i>&nbsp;&nbsp;<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>&nbsp;友情链接
            </div>
            <div class="fri-link-content">
                <div class="link-box"><a href="">CSDN</a></div>
                <div class="link-box"><a href="">博客园</a></div>
                <div class="link-box"><a href="">Gitte</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 class="link-box"><a href="">将进酒</a></div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue().$mount('#rotationChart');
    new Vue().$mount('.content-left');
</script>
相关推荐
旧林8436 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq18 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架