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="">CSDNa>div>
<div class="link-box"><a href="">博客园a>div>
<div class="link-box"><a href="">Gittea>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>