html+css+javascript搭建个人博客
最新推荐文章于 2024-06-14 15:44:40 发布
Violent-Ayang
最新推荐文章于 2024-06-14 15:44:40 发布
阅读量3.2k
收藏
66
点赞数
14
最新推荐文章于 2024-06-14 15:44:40 发布
阅读量3.2k
收藏
66
点赞数
14
主页是一个动态欢迎页，鼠标经过helloworld会变亮
点击helloworld进入博客主页
首页包括三部分 导航 个人介绍 技术树
网站适配主流浏览器
主页布局代码
<!DOCTYPE html>
<html>
<head>
<title>暴力阿扬的小站</title>
<link href="img/icon.ico" rel="shortcut icon">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main-wrapper">
<header>
<nav>
<div class="logo"><a href="index.html">暴力阿扬的小站</a></div>
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="article.html">文章</a></li>
<li><a href="message.html">留言</a></li>
<li class="showSlideBar"><a href="#">关于作者</a></li>
</ul>
</nav>
<div class="banner">
<div class="inner">
<h1>一个有意思的程序猿</h1>
<div class="sub-heading">这是一个极具个人风格的网站。</div>
<div class="sub-heading">这里存放仅是我个人的一些随笔。</div>
<div class="sub-heading">可以看作一个表达情绪的地方。</div>
<button class="showSlideBar">更多</button>
</div>
</div>
</header>
<div class="content">
<section class="section-one">
<div class="wrapper">
<div>
<h2>导航</h2>
<div class="hr"></div>
<div class="sub-heading">You're only supposed to blow the bloody doors off.</div>
</div>
<div class="icon-group">
<span class="icon"><a href="article.html">文章</a></span>
<span class="icon"><a href="#A1">个人介绍</a></span>
<span class="icon"><a href="#A2">技能树</a></span>
</div>
</div>
</section>
<section class="section-two"><a name = "A1"></a>
<div class="article-preview clear-fix">
<div class="img-section">
<img src="img/1.jpg">
</div>
<div class="text-section">
<h2><a>就读金陵科技学院</a></h2>
<div class="sub-heading">准备考研ing</div>
<div class="sub-heading"> 专业： 软件工程(嵌入式培养)
</div>
<div class="sub-heading" >在学校里有参加学院里的实验室，经常参与项目中的前端部分，也参加了不少社团
有空手道社，国防社
</div>
<div class="sub-heading" >
</div>
<div class="sub-heading">在学校里也算一个小有名气的人，哈哈哈当然有一点自吹成分 :)</div>
</div>
</div>
<div class="article-preview clear-fix">
<div class="text-section">
<h2>擅长各类体育竞技运动</h2>
<div class="sub-heading">MMA(综合格斗)爱好者; </div>
<div class="sub-heading">跑过很多次半马，希望毕业前能跑次全马； </div>
<div class="sub-heading">带过街头健身队，双力臂前水平还是不在话下哒;</div>
</div>
<div class="img-section">
<img src="img/2.jpg">
</div>
</div>
<div class="article-preview clear-fix">
<div class="img-section">
<img src="img/3.jpg">
</div>
<div class="text-section">
<h2>好读书</h2>
<div class="sub-heading">好读书，不求甚解；每有会意，便欣然忘食。</div>
<div class="sub-heading">这是一个曾经一个暑假看完百度榜单前十五本玄幻小说的人 </div>
<div class="sub-heading">当然！可不是只读玄幻小说，各种书籍，均有涉猎 </div>
<div class="sub-heading">比较喜欢的两本书 一本是《剑来》一本是《三体》</div>
<div class="sub-heading">静心得意，天下逢春</div>
</div>
</div>
</section>
<a name = "A2"></a>
<section class="section-three ">
<div class="wrapper" >
<div class="heading-wrapper">
<h2>技能树</h2>
<div class="hr"></div>
</div>
<div class="card-group clear-fix">
<div class="card">
<h2>前端开发</h2>
<p> </p>
<p>熟悉html+css+JavaScript，熟悉elasticsearch，熟悉vue、react等主流框架</p>
</div>
<div class="card">
<h2>python全栈开发</h2>
<p> </p>
<p>了解python各类网络框架</p>
<p>熟悉QT库，基于Qt开发过火车票抢票软件</p>
</div>
<div class="card">
<h2>java全栈开发</h2>
<p> </p>
<p>熟悉Spring、mybatis、springMVC以及微服务，掌握多线程模型与异步非阻塞模型</p>
</div>
<div class="card">
<h2>软件测试</h2>
<p> </p>
<p>熟练使用jmeter工具进行系统性能测压，熟练使用fiddler工具进行抓包</p>
</div>
<div class="card">
<h2>爬虫开发</h2>
<p> </p>
<p>熟悉反爬机制，写过一系列视频网站爬虫</p>
</div>
<div class="card">
<h2>摸鱼大师!</h2>
<p> </p>
<p>我愿称之为最强技能！</p>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="share-group">
<ul>
<li><a href="https://violentayang.blog.csdn.net/" target="view_window">CSDN</a></li>
<li><a href="https://github.com/ViolentAyang" target="view_window">GitHub</a></li>
</ul>
</div>
<div class="copy">
<span>©1972076517@qq.com</span>
</div>
</footer>
</div>
<div class="mask"></div>
<div class="slideBar">
<ul>
<li><a href="#">暴力扬</a></li>
<li><a href="#">ViolentAyang</a></li>
<li><a href="#">Java全栈工程师</a></li>
<li><a href="#">来自徐州</a></li>
<li><a href="#">爱好健身</a></li>
</ul>
</div>
<div class="back-to-top">
<button>回到顶部</button>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
预览地址 https://www.violentayang.site/diary/
欢迎访问GitHub进行克隆 https://github.com/ViolentAyang/diary
37
达内
到【灌水乐园】发言
CSDN-Ada助手: 哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)使用更多的站内链接；(2)提升标题与正文的相关性。
CSDN-Ada助手: 哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)使用更多的站内链接；(2)提升标题与正文的相关性。
CSDN-Ada助手: 哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)使用更多的站内链接；(2)提升标题与正文的相关性。
CSDN-Ada助手: 哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)使用更多的站内链接；(2)提升标题与正文的相关性。
全栈小5: 优质好文，博主用心，写了这么实用有效的分享，期盼博主光顾我的博客，给予宝贵指导！互相进步！支持【机器学习 - 梯度下降在多参数线性回归模型的应用以及解析，博主这篇文章，值得一看】