一个菜鸟的暑期到底做了些什么

最新推荐文章于 2024-04-23 14:49:45 发布

Plus.L

最新推荐文章于 2024-04-23 14:49:45 发布

阅读量256

点赞数

文章标签： html javascript html5

本文链接：https://blog.csdn.net/Losdesito/article/details/108694380

版权

一个菜鸟的暑期都做了些什么

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>

总结

这个暑假着实有些咸鱼了，开学了继续加油

奥利给！！！

Plus.L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个菜鸟的暑期到底做了些什么

一个菜鸟的暑期都做了些什么linux虚拟机的搭建PhotoShop的学习暑期主攻：Web前端总结linux虚拟机的搭建先从最简单的开始说起，依据网上的流程以及学长的帮助，搭建好了虚拟机，但关于虚拟机的知识还没深入的学习，应用起来目前还有些困难PhotoShop的学习部门需求，自身兴趣也有一部分，学了一些PS，不过还只是菜鸟阶段，一些简单的抠图，调色，海报制作之类的可以做到暑期主攻：Web前端之前有想自己到底做前端还是后端，目前来说更想做前端工程师，也没啥理由，或许过几个月就变了也不一定hhhh
复制链接

扫一扫