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>
相关推荐
GIS程序媛—椰子43 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt