P72-前端基础项目开发-首页main部分开发Banner

1.概述

这篇文章开发首页Banner图，实现banner图上左右两个箭头点击效果和图片右下角5个小点切换效果

2.Banner图

2.1.Banner图需求效果

2.2.创建Banner图结构

index.html添加Banner内容

在header下面添加Banner内容

<!-- ################创建首页main主体部分结构################ --><!-- 创建banner容器 --><div class="banner-wrapper"><div class="banner w"><ul class="img-list"><li><a href="#"><img src="./img/banner1.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner2.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner3.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner4.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner5.jpg" alt=""></a></li></ul><!-- banner图上的五个点 --><div class="pointer"><a class="active" href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div><!-- banner图上左右滑动 --><div class="prev-next"><a class="prev" href="javascript:;"></a><a class="next" href="javascript:;"></a></div></div></div>

2.3.设置Banner样式

在index.css文件中添加Banner样式

/* ***********************设置首页main主体部分************************* *//* 设置banner容器尺寸 */
.banner {position: relative;height: 460px;
}.banner .img-list li {position: absolute;
}.banner img {width: 100%;vertical-align: top;
}/* 设置5个导航点容器尺寸 */
.pointer {position: absolute;bottom: 22px;right: 35px;
}/* 设置5个导航点样式 */
.pointer a {float: left;width: 6px;height: 6px;background-color: rgba(0, 0, 0, .4);border: 2px rgba(255, 255, 255, .4);border-radius: 50%;margin-left: 6px;
}/* 设置5个点hover效果 */
.pointer a:hover,
.pointer a.active {border-color: rgba(0, 0, 0, .4);background-color: rgba(255, 255, 255, .4);
}/* 设置两个箭头 */
.prev-next a {width: 41px;height: 69px;background-image: url(../img/icon-slides.png);position: absolute;/* 设置垂直居中对齐 */margin: auto 0;top: 0;bottom: 0;
}/* 设置左边箭头默认展示样式 */
.prev-next .prev {left: 234px;/* 设置背景图片位置 */background-position: -84px 0;
}/* 设置左边箭头hover展示样式 */
.prev-next .prev:hover {background-position: 0 0;
}/* 设置邮编箭头默认展示位置 */
.prev-next .next {right: 0;background-position: -125px 0;
}
/* 设置右边箭头hover样式 */
.prev-next .next:hover {background-position: -42px 0;
}

2.4.首页完整样式

/* 主页index.html的样式表 *//* 顶部导航条的容器 */
.topbar-wrapper {/* 设置宽度全屏 */width: 100%;/* 设置高度和行高 */height: 40px;line-height: 40px;/* 设置背景颜色 */background-color: #333;
}/* 设置超链接的颜色 */
.topbar a {font-size: 12px;color: #b0b0b0;display: block;
}/* 设置鼠标放到文字上的hover效果 */
.topbar a:hover {color: #ffffff;
}/* 设置中间分割线 */
.topbar .line {color: #424242;font-size: 12px;margin: 0 8px;
}/* -----------------------设置顶部左侧导航栏浮动----------------------- */
.service, .topbar li {float: left;
}/* 设置下载app的下拉   */
.app .qrcode {width: 124px;/* height: 148px; */background-color: silver;/* display: none; *//* 设置二维码容器绝对定位，让他浮动起来 */position: absolute;/* 调整二维码位置 */left: -40px;background-color: #fff;/* 设置二维码容器阴影效果 */box-shadow: 0 0 10px rgba(0, 0, 0, .3);/* 设置二维码下拉动态效果需要使用height的变化来实现：设置默认高度为0不显示二维码容器 */height: 0px;overflow: hidden;/* transition: 用于为样式设置过渡效果:设置二维码下拉效果 */transition: height 0.3s;/* 设置二维码文字样式 */line-height: 1;text-align: center;}/* 设置二维码图片尺寸 */
.app .qrcode img {width: 90px;margin: 17px;margin-bottom: 10px;
}/* 设置二维码中的文字 */
.app .qrcode span {font-size: 14px;color: #000;
}/* 设置app相对定位 */
.app {position: relative;
}
/* 设置app下的小三角 */
.app::after {content: '';position: absolute;width: 0;height: 0;border: 8px solid transparent;border-top: none;border-bottom-color: #fff;bottom: 0;left: 0;right: 0;margin: auto;/* 设置下拉小三角默认不显示 */display: none;
}/* 设置二维码和下拉三角hover显示效果 */
.app:hover .qrcode,
.app:hover::after {display: block;height: 148px;
}/* -----------------------设置顶部右侧导航栏浮动----------------------- */
.shop-cart, .user-info {float: right;
}/* -----------------------设置购物车样式----------------------- *//* 设置购物车左边距 */
.shop-cart {margin-left: 26px;
}/* 设置购物车文字相关属性 */
.shop-cart a {width: 120px;background-color: #424242;text-align: center;
}/* 设置购物车图标和文字间距 */
.shop-cart i {margin-right: 2px;
}/* 设置购物车hover效果：注意hover要设置在父元素上，否则鼠标移到购物车子菜单会出现hover效果失效。 */
.shop-cart:hover a {background-color: #ffffff;color: #FF6700;
}/* ---------------------------------设置首页header部分样式--------------------------------- */.header-wrapper{/* background-color: red; */position: relative;
}/* 设置首页header部分 */
.header {height: 100px;/* 调试时可以打开查看调试效果，调试完毕将他注释掉 *//* background-color: #FF67; */
}/* 设置logo的h1文字 */
.header .logo {float: left;margin-top: 22px;width: 55px;height: 55px;position: relative;/* 设置超出logo宽和高的部分隐藏 */overflow: hidden;text-indent: -100px;
}/* 统一设置logo的超链接 */
.header .logo a {/* 这里需要开启绝对定位，让a标签变为块元素。否则设置的宽高不生效，背景图片将不显示 */position: absolute;width: 55px;height: 55px;/* 设置logo图标默认显示位置左边0px位置 */left: 0px;background-color: #FF6700;background-image: url(../img/mi-logo.png);/* 设置背景图片对齐方式 */background-position: center;/* 设置两个logo图标左右滑动过度效果 */transition: left 0.3s;}
/* 设置home图片 */
.header .logo .home {background-image: url(../img/mi-home.png);/* 设置home图标默认显示在左边55px位置 */left: -55px;
}/* 设置鼠标移入以后两个图标的位置 */
.header .logo:hover .mi {left: 55px;
}.header .logo:hover .home {left: 0;
}/* -------设置header导航栏容器------------- */
.header .nav-wrapper {float: left;margin-left: 7px;/* 调试时可以打开查看调试效果，调试完毕将他注释掉 *//* background-color: aqua; */
}/* 设置导航条下的li */
.nav>li {float: left;/* 调试时可以打开查看调试效果，调试完毕将他注释掉 *//* background-color: #888888; */
}/* ##########设置左侧导航条的样式########## */
.all-goods-wrapper {position: relative;/* background-color: red; */
}
/* 设置左侧导航栏容器尺寸 */
.left-menu {width: 234px;height: 420px;line-height: 1;background-color: rgba(0, 0, 0, .6);padding: 20px 0;z-index: 999;/* 参考父级元素.all-goods-wrapper定位 */position: absolute;/* 调整细节位置 */left: -120px;}/* 设置文字尺寸 */
ul .left-menu li a {display: block;height: 42px;line-height: 42px;color: white;margin-right: 0;padding: 0 30px;font-size: 14px;}/* 设置文字hover效果 */
ul .left-menu li a:hover {color: white;background-color: #FF6700;
}/* 设置图标样式 */
.left-menu a i {float: right;line-height: 42px;
}/* 设置导航条尺寸 */
.header .nav {height: 100px;/* 设置和height一样的高度实现垂直居中显示 */line-height: 100px;padding-left: 58px;
}/* 隐藏全部商品 */
.all-goods {/* 这里不能使用display隐藏，这种隐藏后就不在占据位置。我们希望隐藏后还保留位置。使用visibility: hidden *//* display: none; */visibility: hidden;
}/* 设置导航条a标签的hover效果 */
.nav-wrapper li a:hover {color: #FF6700;
}/* 设置导航栏内容样式 */
.nav-wrapper li a {font-size: 16px;/* 设置文字间距 */margin-right: 20px;/* 设置元素为块元素，使他hover区域辐射到整个a标签的所占的宽高尺寸 */display: block;
}/* 设置中间导航下拉层效果 */
/* 设置中间导航下拉尺寸 */
.nav .goods-info {/* height: 228px; */height: 0px;width: 100%;/* border: 1px red solid; */background-color: #fff;position: absolute;left: 0;top: 100px;/* 设置最高层级不被其他内容遮挡 */z-index: 9999;
}/* 设置下拉hover效果 */
/* 分别设置商品列表.show-goods和下拉框.goods-info两个位置hover效果 */
.nav .show-goods:hover ~ .goods-info,
.goods-info:hover {height: 228px;/* 显示上边框 */border-top: 1px solid rgb(224, 224, 224);/* 设置阴影效果 */box-shadow: 0 5px 3px rgba(0, 0, 0, .2)
}/* 设置搜索框样式 */
/* 设置搜索框的容器 */
.search-wrapper {width: 296px;height: 50px;float: right;margin-top: 25px;
}/* 设置input输入框样式 */
.search-wrapper .search-inp {/* 设置盒子模型内容区计算方式 */box-sizing: border-box;width: 224px;height: 50px;border: none;float: left;padding: 0 10px;font-size: 16px;border: 1px solid rgb(224, 224, 224);/* 去除外边框 */outline: none;
}/* 设置input获取焦点后的样式 */
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus + button {border-color: #FF6700;
}/* 设置搜索按钮样式 */
.search-wrapper .search-btn {float: left;height: 50px;width: 52px;padding: 0;border-color: none;/* 设置按钮背景颜色 */background-color: #fff;/* 设置搜索图标颜色 */color: #616161;font-size: 16px;border: 1px solid rgb(224, 224, 224);border-left: none;
}/* 设置搜索框按钮hover效果 */
.search-wrapper .search-btn:hover {background-color: #FF6700;color: white;border: none;
}/* ***********************设置首页main主体部分************************* *//* 设置banner容器尺寸 */
.banner {position: relative;height: 460px;
}.banner .img-list li {position: absolute;
}.banner img {width: 100%;vertical-align: top;
}/* 设置5个导航点容器尺寸 */
.pointer {position: absolute;bottom: 22px;right: 35px;
}/* 设置5个导航点样式 */
.pointer a {float: left;width: 6px;height: 6px;background-color: rgba(0, 0, 0, .4);border: 2px rgba(255, 255, 255, .4);border-radius: 50%;margin-left: 6px;
}/* 设置5个点hover效果 */
.pointer a:hover,
.pointer a.active {border-color: rgba(0, 0, 0, .4);background-color: rgba(255, 255, 255, .4);
}/* 设置两个箭头 */
.prev-next a {width: 41px;height: 69px;background-image: url(../img/icon-slides.png);position: absolute;/* 设置垂直居中对齐 */margin: auto 0;top: 0;bottom: 0;
}/* 设置左边箭头默认展示样式 */
.prev-next .prev {left: 234px;/* 设置背景图片位置 */background-position: -84px 0;
}/* 设置左边箭头hover展示样式 */
.prev-next .prev:hover {background-position: 0 0;
}/* 设置邮编箭头默认展示位置 */
.prev-next .next {right: 0;background-position: -125px 0;
}
/* 设置右边箭头hover样式 */
.prev-next .next:hover {background-position: -42px 0;
}

3.首页Banner效果

P72-前端基础项目开发-首页main部分开发Banner相关推荐

P74-前端基础项目开发-首页main部分开发广告栏-项目完整代码
P74-前端基础项目开发-首页main部分开发广告栏-项目完整代码 1.概述这篇文章是首页开发最后一个部分,也是这个项目的结束部分.通过这个项目练习让我们掌握了HTML+CSS的基础使用. 2.广告 ...
P73-前端基础项目开发-首页main部分开发工具条
P73-前端基础项目开发-首页main部分开发工具条 1.概述网页的右下角通常会有个工具条用来设置一些快捷操作,例如回到网页顶部. 2.工具条 2.1.工具条需求效果 2.2.创建工具条结构在in ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
重温前端基础（二）移动WEB开发
目录 1. 移动端基础 2. 视口 2.1 meta标签 3. 二倍图 3.1 物理像素 & 物理像素比 3.2 背景缩放 background-size 4. 移动开发选择和技术解决方案 4 ...
java基础项目【团队调度系统开发（需求分析、软件包结构、全部完整代码）】
需求分析: 模拟实现一个基于文本界面的<团队人员调度软件>: 软件启动时,根据给定的数据创建公司部分成员列表: 根据菜单提示,基于现有的公司成员,组建一个开发团队以开发一个新的项目: 组建 ...
（硅谷课堂项目）Java开发笔记4：前端基础知识（二）
文章目录 (硅谷课堂项目)Java开发笔记4:前端基础知识(二) 一.NPM 1.NPM简介 1.1.什么是NPM 1.2.NPM工具的安装位置 2.使用npm管理项目 2.1.创建文件夹npm 2. ...
前端基础第一天项目品优购
品优购项目-上目标能够遵循品优购代码规范能够在品优购首页中引入 favicon 图标能够说出三大标签 SEO 优化能够在品优购首页中使用字体图标能够说出 LOGO 需要哪些 SEO 优化 ...
前端基础第四天项目社交媒体黑马头条项目-登录注册和个人中心
一.项目初始化目标能使用 Vue CLI 创建项目了解 Vant 组件库的导入方式掌握制作使用字体图标的方式掌握如何在 Vue 项目中处理 REM 适配理解 axios 请求模块的封装使 ...
使用双标记写html代码时如何进行嵌套,【2020Python修炼记】前端开发之前端基础和HTML入门...
发表于:2020-11-12 18:21 阅读: 119次这篇教程主要讲解了[2020Python修炼记]前端开发之前端基础和HTML入门,并附有相关的代码样列,我觉得非常有帮助,现在分享出来大家 ...

P72-前端基础项目开发-首页main部分开发Banner

P72-前端基础项目开发-首页main部分开发Banner

1.概述

2.Banner图

2.1.Banner图需求效果

2.2.创建Banner图结构

2.3.设置Banner样式

2.4.首页完整样式

3.首页Banner效果

P72-前端基础项目开发-首页main部分开发Banner相关推荐

最新文章

热门文章