HTML+CSS+ElementUI搭建个人博客页面(纯前端)

news/2024/5/20 20:27:55

网站演示

在这里插入图片描述

搭建过程

html部分

首先下载Vue2,ElementUI等插件,放在你的本地。我这里为了运行方便,把代码放在了一个框架里运行。

  1. 下载后引入部分
    <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. 标题栏
<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. 轮播图+个人头像
<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. 博客部分
<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-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>&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>

https://www.xjx100.cn/news/3091948.html

相关文章

AR远程辅助技术应用到气象部门有何好处?

随着科技的不断发展&#xff0c;人类对于自然环境的理解和掌控能力也在不断提升。其中&#xff0c;AR(增强现实)技术的应用&#xff0c;为气象监控带来了革命性的变化。AR气象远程监控&#xff0c;就是将AR技术与气象监控相结合&#xff0c;通过虚拟与现实的融合&#xff0c;实…

Linux系统编程 系统编程概念

1.系统调用 系统调用&#xff08;system call&#xff09;其实是 Linux 内核提供给应用层的应用编程接口&#xff08;API&#xff09;&#xff0c;是 Linux 应用层进入内核的入口。不止 Linux 系统&#xff0c;所有的操作系统都会向应用层提供系统调用&#xff0c;应用程序通过…

对比学习15篇顶会论文及代码合集,2023最新

对比学习&#xff08;contrastive learning&#xff09;是现在无监督学习中一种常用的学习机制&#xff0c;它可以在没有标签的数据上进行学习&#xff0c;避免依赖大量标签数据&#xff0c;从而帮助我们更好地理解和利用数据集中的信息&#xff0c;提高模型的性能和表现。 作…

从小米14安装不上应用说起【适配64位】

一、原因 某天早上&#xff0c;同事突然对我说我换了小米14pro手机但是安装不了公司的打卡软件&#xff0c;怎么办呀。一时间&#xff0c;我也不知道原因&#xff0c;看到给我发的安装不上的截图陷入了沉思。随即打开在git仓库里找到这个项目&#xff0c;到本地编译打开&#…

3PC(三阶段提交)

三阶段提交 3PC&#xff08;Three-Phase Commit&#xff09;是一种分布式系统中用于实现事务一致性的协议&#xff0c;它是在2PC&#xff08;Two-Phase Commit&#xff09;的基础上发展而来&#xff0c;旨在解决2PC的一些缺点。与2PC的两个阶段&#xff08;准备和提交&#xf…

【Spring篇】Bean实例化的四种方式及应用案例

目录 Bean的实例化 通过构造方法实例化Bean&#xff1b; 通过简单工厂模式创建对象&#xff1b; 使用案例 通过使用工厂方法模式 使用案例 通过FactoryBean接口实例化 使用案例 Bean的实例化 Bean的实例化有四种方式&#xff0c;这里的实例化Bean和之前学的注入是两回事…

C++中的内存管理

✨前言✨ &#x1f4d8; 博客主页&#xff1a;to Keep博客主页 &#x1f646;欢迎关注&#xff0c;&#x1f44d;点赞&#xff0c;&#x1f4dd;留言评论 ⏳首发时间&#xff1a;2023年11月21日 &#x1f4e8; 博主码云地址&#xff1a;博主码云地址 &#x1f4d5;参考书籍&…

为什么云游戏被认为是行业的未来趋势?

5G 时代的到来&#xff0c;游戏行业也正在经历着一场革命性的变革。云游戏&#xff0c;这个看似神秘的新兴领域&#xff0c;正在逐渐成为行业的未来趋势。 一、云游戏的优势 摆脱硬件束缚 在传统游戏中&#xff0c;玩家需要购买昂贵的游戏主机或电脑&#xff0c;才能享受高质…