静态LOL轮播图布局

前言
一、轮播图效果
二、轮播图是什么？
三、样式标签是什么？
- 轮播图大体结构：
- HTML部分：
- CSS部分：
- 三、head完整代码
- 小项目完整代码
- 网页设计几个常用的ps工具

前言

学习了一段时间的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

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

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

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

静态英雄联盟轮播图布局相关推荐

英雄联盟轮播图自动轮播
六月过去了,七月还会远吗?不知不觉到了六月底的最后一天.你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自 ...
仿优酷视频焦点轮播图布局html页面前端源码
大家好,今天给大家介绍一款,仿优酷视频焦点轮播图布局html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 可以用菜单控制切换(图2) 图2 整体布局简洁明了,干净简单(图3) 图3 代 ...
闲云旅游项目开发-（第一篇：使用Element-ui实现主页轮播图）
业务需求: 初始化布局页头页脚公共组件首页轮播图一初始化默认全局布局 nuxtjs 提供了一个公共组件 layouts/default.vue,相当于以前的 app.vue .该布局组件默认作 ...
用js实现点击切换+自动切换的轮播图
用js实现点击切换+自动切换的轮播图之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能.那么这些功能用js该如何实现呢?我们一起来看下吧! (ps:博主在 ...
javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局简易版轮播图 < > 页面样式 .container{width: 60 ...
电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
JS完成轮播图（全部JS代码，自动轮播）
需求: 1.点击左右方向图标切换图片 2.点击图片中的小圆点切换对应图片 3.切换图片改变对应小圆点的颜色 4.鼠标离开时自动轮播,鼠标滑入停止轮播 5.不能有空白思路: 1.先布局,创建轮播图显示 ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...

静态英雄联盟轮播图布局