一个菜鸟的暑期都做了些什么
linux虚拟机的搭建
先从最简单的开始说起,依据网上的流程以及学长的帮助,搭建好了虚拟机,但关于虚拟机的知识还没深入的学习,应用起来目前还有些困难
PhotoShop的学习
部门需求,自身兴趣也有一部分,学了一些PS,不过还只是菜鸟阶段,一些简单的抠图,调色,海报制作之类的可以做到
暑期主攻:Web前端
之前有想自己到底做前端还是后端,目前来说更想做前端工程师,也没啥理由,或许过几个月就变了也不一定hhhh
言归正传,HTML,CSS,JavaScript已经学完,JQ正在学,能自己做网页(不过有点难看),暑期时自己模拟了一个王者的官网,(做的时候js没学完,所以没用js)基础跳转功能啥的都实现了,废话不多说,上图。
这时候就体现出ps的重要性了,没ps做出来的网页是真丑hhh
接下来是代码片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自制王者荣耀官网</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 0px;
background: #f1f1f1;
}
/* 头部标题 */
.header {
padding: 0px;
text-align: center;
background: black;
}
.header h1 {
font-size: 50px;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航条链接 */
.topnav a {
float: left;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width:10%;
}
/* 悬停颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 创建两列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右侧栏 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 图像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 0px;
}
/* 直播部分 */
.zhibo a {
float:left;
padding-left: 50px;
}
/* 攻略部分 */
.gonlue a {
width:150px;
height:150px;
padding-top: 50px;
}
/* 动态部分 */
.dontai{
overflow: hidden;
background-color: black;
}
.dontai a{
float: left;
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dontai h3{
color:orange;
float:left;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 响应式布局*/
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 响应式布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="topnav">
<a href="#">王者荣耀</a>
<a href="#">游戏资料</a>
<a href="#">内容中心</a>
<a href="#">赛事中心</a>
<a href="#">版本介绍</a>
<a href="#">游戏介绍</a>
<a href="#">英雄资料</a>
<a href="#">英雄攻略</a>
<a href="#">视频中心</a>
<a href="#">游戏壁纸</a>
</div>
<div class="header">
<img src="花木兰.jpg" alt="花木兰-logo" height=600px width=100%>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>KPL赛事</h2>
<h4>2020年6月13KPL总决赛,TS让三追四夺得世冠冠军,恭喜TS!</h4>
<div class="fakeimg" style="height:540px;">
<img src="TS.jpg" alt="TS夺冠" width=100% >
</div>
</div>
<div class="card">
<h2>热门直播</h2>
<div class="zhibo" style="height:200px;">
<a href="https://www.huya.com/688">
<img src="张大仙.jpg" width=200px height=200px>
</a>
<a href="https://www.huya.com/guying">
<img src="孤影.jpg" width=200px height=200px>
</a>
<a href="https://www.huya.com/243547">
<img src="吕德华.jpg" width=200px height=200px>
</a>
<a href="https://www.huya.com/101">
<img src="剑仙.jpg" width=200px height=200px>
</a>
</div>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>英雄攻略</h2>
<div class="gonlue" style="height:350px;">
<a href="https://pvp.qq.com/gicp/news/7/455336.html">
<img src="廉颇.jpg" width=150px height=150px>
</a>
<a href="https://pvp.qq.com/gicp/news/7/449336.html">
<img src="镜.jpg" width=150px height=150px>
</a>
<a href="https://pvp.qq.com/gicp/news/7/449501.html">
<img src="蒙恬.jpg" width=150px height=150px>
</a>
<a href="https://pvp.qq.com/gicp/news/7/438833.html">
<img src="蒙犽.jpg" width=150px height=150px>
</a>
</div>
</div>
<div class="card">
<div class="dontai">
<h3>峡谷动态</h3>
<a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=478067">缘起峡谷,情定七夕 | 我所爱的,都在王者峡谷里</a>
<a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=476828">《王者荣耀》品牌代言人首登场,欢迎真爱玩家加入战场</a>
<a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=477155">英雄调整情报丨杨戬/苏烈加强,阿古朵降温,蔡文姬优化</a>
</div>
</div>
<div class="card">
<h3>游戏下载</h3>
<img src="下载游戏.jpg" width=100% height=100%>
</div>
</div>
</div>
<div class="footer">
<h4>Made by lijiahao</h4>
</div>
</body>
</html>
总结
这个暑假着实有些咸鱼了,开学了继续加油
奥利给!!!