静态英雄联盟轮播图布局
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
感谢相遇，不亏不欠，不负遇见。
感谢阅读，祝你看完有所收获。
最后认识一下吧！ 一个正在努力学习前端知识的小陈陈
做自己生命的主角,而不是别人生命中的看客。
不是得到多少东西,而是看你把身上多余的东西扔掉多少。
以上是关于静态英雄联盟轮播图布局的主要内容，如果未能解决你的问题，请参考以下文章