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>
相关推荐
慧一居士2 分钟前
Quill 富文本编辑器 功能介绍,使用场景说明,使用示例演示
前端
FinClip3 分钟前
100%关税与软件封锁下,信创为何是破局关键?
前端
晴殇i5 分钟前
一行生成绝对唯一 ID:别再依赖 Date.now() 了!
前端·javascript·vue.js
CrabXin21 分钟前
前端如何用 CDN 加速网站性能全解析
前端
beckyyy22 分钟前
WebSSH的简单实现
前端·ssh
GISer_Jing28 分钟前
透过浏览器原理学习前端三剑客:HTML、CSS与JavaScript
前端·javascript·css·html
长空任鸟飞_阿康31 分钟前
提示词管理器设计:从需求到用户体验的高效落地逻辑
前端·人工智能·ux
零點壹度ideality38 分钟前
鸿蒙实现可以上下左右滑动的表格-摆脱大量ListScroller
前端·harmonyos
林希_Rachel_傻希希41 分钟前
this 的指向与 bind() 方法详解
前端·javascript
Komorebi゛42 分钟前
【Vue3】使用websocket实现前后端实时更新数据
前端·websocket