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>
- 标题栏
<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>
- 轮播图+个人头像
<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>
- 博客部分
<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="">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>