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>
相关推荐
牧羊狼的狼1 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手3 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip6 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio6 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
赵得C6 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG6 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js