网站演示
搭建过程
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-paginationbackgroundlayout="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>
