静态英雄联盟轮播图布局

Posted 爱笑的陈sir

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了静态英雄联盟轮播图布局相关的知识,希望对你有一定的参考价值。

静态LOL轮播图布局


前言

学习了一段时间的javascript总觉得并不是非常熟练,写一个静态LOL轮播图练练手。

轮播图在许多网站上都可以看到,像淘宝,京东等电商网站的首页,是不可或缺的页面元素。

先来看看实现效果吧~

一、轮播图效果

二、轮播图是什么?

示例:轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片。这些图片统称为轮播图,这个模块叫做轮播模块

三、样式标签是什么?

style标签的作用是用来说明所要定义的样式,style标签用于为html文档定义样式信息,在style元素里,可以指定HTML元素在浏览器里的呈现方式,style标签应放在head里

代码如下(示例):

<style>

</style>

轮播图大体结构:

HTML部分:

创建一个div标签,用于编写整个轮播图结构,命令.banner

   <div class="banner">

根导航据banner中内容,划分成img区域,以及导航区域,区域div

 <div class="banner_img">
 <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/1880117fcca33efc8c78ca9710544c12.jpeg"> 
 </div> 
 <div class="banner_nav">

网页还原过程中,如果需要编写对应的并列结构,直接使用无序列表进行开发ul>li

             <ul>
            <li class="active">EDG冠军战队皮肤</li>
            <li>EDG冠军荣耀宝箱</li>
            <li>西部魔影2022</li>
            <li>西部魔影通行证</li>
            <li>2022西部秘宝</li>
          </ul>
      </div>
   </div>
</body>
</html>

CSS部分:

 清除网页的默认距离  
  *margin:0;
    padding:0;
  

网页长宽高度大小


   .banner
    width: 820px;
    height: 380px;
    background-color:blue;
  

背景图片大小

  .banner_img
    width: 820px;
    height: 340px;
    background-color:red; 
  
  .banner_nav
    width: 820px;
    height: 40px;
    background-color:green;
  

后代选择器,先找容器,再找内部标签

   banner_nav li
    width: 164px;
    height: 40px;

由于li在网页中属于块元素
独立成行 浮动属性
让原本上下排列的li,并排

   float:left;
   

清除li前面的列表符号

  list-style:none;

字号是:14px

  font-size: 14px;

文本的水平居中

text-align:center;

文本垂直居中 单行文本垂直居中
当行高等于当前容器的高度时内部文字垂直居中

    line-height: 40px;
    /* 设置背景颜色 */
    background-color:#e3e2e2;
  
  .banner_nav .active
    background-color:white;
    color:#ab8e66;

边框会增加元素的实际占位

border-bottom: 2px solid #cea861;
height: 38px;

 

三、head完整代码

代码如下(示例):

<style>
 /* 清除网页的默认距离   */
  *margin:0;
    padding:0;
  
 /* 清除网页的默认距离   */
  *margin:0;
    padding:0;
  
  .banner
    width: 820px;
    height: 380px;
    background-color:blue;
  
  .banner_img
    width: 820px;
    height: 340px;
    background-color:red; 
  
  .banner_nav
    width: 820px;
    height: 40px;
    background-color:green;
  


  /* 后代选择器,先找容器,再找内部标签 */
  .banner_nav li
    width: 164px;
    height: 40px;
    /* 由于li在网页中属于块元素,独立成行 */
    /* 浮动属性,让原本上下排列的li,并排 */
    float:left;
    /* 清楚li前面的列表符号 */
    list-style:none;
    /* 字号是:14px; */
    font-size: 14px;
    /* 文本的水平居中 */
    text-align:center;
    /* 文本垂直居中 单行文本垂直居中,当行高等于当前容器的高度时内部文字垂直居中 */
    line-height: 40px;
    /* 设置背景颜色 */
    background-color:#e3e2e2;
  
  .banner_nav .active
    background-color:white;
    color:#ab8e66;
    /* 边框会增加元素的实际占位 */
    border-bottom: 2px solid #cea861;
    height: 38px;
  
  </style>

小项目完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>静态lol轮播图布局</title>
  <style>
  /* 清除网页的默认距离   */
  *margin:0;
    padding:0;
  
  .banner
    width: 820px;
    height: 380px;
    background-color:blue;
  
  .banner_img
    width: 820px;
    height: 340px;
    background-color:red; 
  
  .banner_nav
    width: 820px;
    height: 40px;
    background-color:green;
  
  /* 后代选择器,先找容器,再找内部标签 */
  .banner_nav li
    width: 164px;
    height: 40px;
    /* 由于li在网页中属于块元素,独立成行 */
    /* 浮动属性,让原本上下排列的li,并排 */
    float:left;
    /* 清除li前面的列表符号 */
    list-style:none;
    /* 字号是:14px; */
    font-size: 14px;
    /* 文本的水平居中 */
    text-align:center;
    /* 文本垂直居中 单行文本垂直居中,当行高等于当前容器的高度时内部文字垂直居中 */
    line-height: 40px;
    /* 设置背景颜色 */
    background-color:#e3e2e2;
  
  .banner_nav .active
    background-color:white;
    color:#ab8e66;
    /* 边框会增加元素的实际占位 */
    border-bottom: 2px solid #cea861;
    height: 38px;
  
  </style>
</head>
<body>
 <!-- 创建一个div标签,用于编写整个轮播图结构,命令.banner  -->
 <div class="banner">
 <!-- 根导航据banner中内容,划分成img区域,以及导航区域,区域div -->
 <div class="banner_img">
 <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/1880117fcca33efc8c78ca9710544c12.jpeg"> 
 </div> 
 <div class="banner_nav">
 <!-- 网页还原过程中,如果需要编写对应的并列结构,直接使用无序列表进行开发ul>li -->
              <ul>
            <li class="active">EDG冠军战队皮肤</li>
            <li>EDG冠军荣耀宝箱</li>
            <li>西部魔影2022</li>
            <li>西部魔影通行证</li>
            <li>2022西部秘宝</li>
          </ul>
      </div>
   </div>
</body>
</html>

网页设计几个常用的ps工具

1.标尺 ctrl+r
2.移动工具 v 用于移动标尺线
3.放大镜工具 z
4.抓手工具 按住空格键
5.切片工具 ps 工具栏第五个
6.吸管工具 I

感谢相遇,不亏不欠,不负遇见。
感谢阅读,祝你看完有所收获。
最后认识一下吧! 一个正在努力学习前端知识的小陈陈

做自己生命的主角,而不是别人生命中的看客。

不是得到多少东西,而是看你把身上多余的东西扔掉多少。

以上是关于静态英雄联盟轮播图布局的主要内容,如果未能解决你的问题,请参考以下文章

英雄联盟轮播图自动轮播

iOS卡片式立体轮播仿英雄联盟选择皮肤效果展示

AYUI第12个作品-英雄联盟-魔法少女的星光水晶2.0-WPF版本

Android轮播图Banner的实现

第六十八天 js轮播图

bootstrap中轮播图模态框提示框/弹出框滚动监听弹性布局响应式flex多媒体对象