P74-前端基础项目开发-首页main部分开发广告栏-项目完整代码
2024-05-15 01:24:31
P74-前端基础项目开发-首页main部分开发广告栏-项目完整代码
1.概述
这篇文章是首页开发最后一个部分，也是这个项目的结束部分。通过这个项目练习让我们掌握了HTML+CSS的基础使用。
2.广告栏
2.1.广告栏需求样式
2.2.创建广告栏内容
在index.html文件中创建广告栏内容
<!-- 创建广告容器 --><div class="ad w"><ul class="shortcut"><li><a href="#"><i class="fas fa-clock"></i>小米秒杀</a></li><li><a href="#"><i class="fas fa-building"></i>企业团购</a></li><li><a href="#"><i class="fas fa-frog"></i>F码通道</a></li><li><a href="#"><i class="fas fa-robot"></i>米粉卡</a></li><li><a href="#"><i class="fas fa-keyboard"></i>以旧换新</a></li><li><a href="#"><i class="fas fa-sim-card"></i>话费充值</a></li></ul><ul class="imgs"><li><a href="#"><img src="./img/1.jpg" alt=""></a></li><li><a href="#"><img src="./img/2.jpg" alt=""></a></li><li><a href="#"><img src="./img/3.jpg" alt=""></a></li></ul></div>
2.3.设置广告栏样式
/* 设置下部的广告区域 */
.ad {height: 170px;margin-top: 14px;
}/* 设置广告栏浮动 */
.ad .shortcut,
.ad .imgs,
.ad li {float: left;
}/* 设置左侧快捷方式 */
.ad .shortcut {width: 228px;height: 168px;background-color: #5f5750;margin-right: 14px;padding-top: 2px;padding-left: 6px;
}.ad .shortcut li {position: relative;
}/* 设置快捷方式中的超链接 */
.ad .shortcut a {display: block;color: #cfccca;height: 84px;width: 76px;text-align: center;font-size: 12px;overflow: hidden;
}/* 设置快捷方式中的超链接hover效果 */
.ad .shortcut a:hover {color: #fff;
}/* 设置图标字体 */
.ad .shortcut i {display: block;margin-top: 20px;margin-bottom: 6px;font-size: 20px;
}/* 设置上边框 */
.ad .shortcut li::before {content: '';background-color: #665e57;width: 64px;height: 1px;position: absolute;left: 0;right: 0;top: 0;margin: 0 auto;
}/* 设置左边框 */
.ad .shortcut li::after {content: '';position: absolute;background-color: #665e57;height: 70px;width: 1px;top: 0;bottom: 0;margin: auto 0;left: 0;}/* 设置左侧的图片容器尺寸 */
.ad .imgs li {width: 316px;margin-right: 15px;
}/* 设置左侧图片最后一个图片外边距 */
.ad .imgs li:last-child {margin: 0;
}.ad .imgs img {width: 100%;vertical-align: top;}
3.广告栏效果
4.项目完成代码
4.1.项目结构内容index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>小米商城</title><!-- 引入重置样式表 --><link rel="stylesheet" href="./css/reset.css"><!-- 引入公共的样式表 --><link rel="stylesheet" href="./css/base.css"><!-- 引入图标字体库 --><link rel="stylesheet" href="./fa/css/all.css"><!-- 引入当前页面的样式表 --><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 顶部导航条 --><!-- 顶部导航条外部容器 --><div class="topbar-wrapper"><!-- 创建内部容器 --><div class="topbar w clearfix"><!-- 顶部左侧的导航 --><ul class="service"><li><a href="javascript:;">小米商城</a></li><li class="line">|</li><li><a href="javascript:;">MIUI</a></li><li class="line">|</li><li><a href="javascript:;">loT</a></li><li class="line">|</li><li><a href="javascript:;">云服务</a></li><li class="line">|</li><li><a href="javascript:;">金融</a></li><li class="line">|</li><li><a href="javascript:;">有品</a></li><li class="line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="line">|</li><li><a href="javascript:;">企业团购</a></li><li class="line">|</li><li><a href="javascript:;">资质证明</a></li><li class="line">|</li><li><a href="javascript:;">协议规则</a></li><li class="line">|</li><li class="app-wrapper"><a class="app" href="javascript:;">下载app<!-- 添加一个弹出层：下拉二维码 --><div class="qrcode"><img src="./img/download.png"><span>小米商城app</span></div></a></li><li class="line">|</li><li><a href="javascript:;">SelectLocation</a></li></ul><!-- 购物车 --><ul class="shop-cart"><li><a href="javascript"><i class="fas fa-shopping-cart"></i>购物车</a></li></ul><!-- 用户注册登录 --><ul class="user-info"><li><a href="javascript">登录</a></li><li class="line">|</li><li><a href="javascript">注册</a></li><li class="line">|</li><li><a href="javascript">消息通知</a></li></ul></div></div><!-- ################创建首页header部分结构################ --><!-- 创建一个头部的外部容器 --><div class="header-wrapper"><!-- 创建header容器 --><div class="header w clearfix"><!-- 创建一个logo --><h1 class="logo" title="小米">小米官网<a class="home" href="/"></a><a class="mi" href="/"></a></h1><!-- 创建一个中间导航条的容器 --><div class="nav-wrapper"><!-- 创建导航条 --><ul class="nav clearfix"><li class="all-goods-wrapper"><a class="all-goods" href="#">全部商品分类</a><!-- 创建一个左侧导航菜单 --><ul class="left-menu"><li><a href="#">手机 电话卡<i class="fas fa-angle-right"></i></a></li><li><a href="#">电视 盒子<i class="fas fa-angle-right"></i></a></li><li><a href="#">笔记本 平板<i class="fas fa-angle-right"></i></a></li><li><a href="#">家电 插线板<i class="fas fa-angle-right"></i></a></li><li><a href="#">出行 穿戴<i class="fas fa-angle-right"></i></a></li><li><a href="#">智能 路由器<i class="fas fa-angle-right"></i></a></li><li><a href="#">电源 配件<i class="fas fa-angle-right"></i></a></li><li><a href="#">健康 儿童<i class="fas fa-angle-right"></i></a></li><li><a href="#">耳机 音箱<i class="fas fa-angle-right"></i></a></li><li><a href="#">生活 箱包<i class="fas fa-angle-right"></i></a></li></ul></li><li class="show-goods"><a href="#">小米手机</a></li><li class="show-goods"><a href="#">Redmi 红米</a></li><li class="show-goods"><a href="#">电视</a></li><li class="show-goods"><a href="#">笔记本</a></li><li class="show-goods"><a href="#">家电</a></li><li class="show-goods"><a href="#">路由器</a></li><li class="show-goods"><a href="#">智能硬件</a></li><li><a href="#">服务</a></li><li><a href="#">社区</a></li><!-- 创建一个弹出层 --><div class="goods-info"></div></ul></div><!-- 创建中间导航搜索框 --><div class="search-wrapper"><form action="#" class="search"><input class="search-inp" type="text"><button class="search-btn"><i class="fas fa-search"></i></button></form></div></div></div><!-- ################创建首页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><!-- 网页固定定位的工具条 --><div class="back-top"></div><!-- 创建广告容器 --><div class="ad w"><ul class="shortcut"><li><a href="#"><i class="fas fa-clock"></i>小米秒杀</a></li><li><a href="#"><i class="fas fa-building"></i>企业团购</a></li><li><a href="#"><i class="fas fa-frog"></i>F码通道</a></li><li><a href="#"><i class="fas fa-robot"></i>米粉卡</a></li><li><a href="#"><i class="fas fa-keyboard"></i>以旧换新</a></li><li><a href="#"><i class="fas fa-sim-card"></i>话费充值</a></li></ul><ul class="imgs"><li><a href="#"><img src="./img/1.jpg" alt=""></a></li><li><a href="#"><img src="./img/2.jpg" alt=""></a></li><li><a href="#"><img src="./img/3.jpg" alt=""></a></li></ul></div>
</body></html>
4.2.项目样式完整内容index.css
/* 主页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;
}/* 设置回到顶部的元素 */
.back-top {width: 26px;height: 206px;background-color: orange;/* 开启固定定位:保证工具条的位置不随着滚动条滚动而滚动 */position: fixed;bottom: 60px;/*将right值设置为视口宽度的50%*/right: 50%;margin-right: -639px;/* 通过布局的等式完成工具条的位置动态的保持在Banner图的边上left + margin-left + width + margin-right + right = 视口的宽度auto + 0 + 26 + 0 + 60 = 视口宽度auto + 0 + 26 + -639px + 50% = 视口宽度*/
}/* 设置下部的广告区域 */
.ad {height: 170px;margin-top: 14px;
}/* 设置广告栏浮动 */
.ad .shortcut,
.ad .imgs,
.ad li {float: left;
}/* 设置左侧快捷方式 */
.ad .shortcut {width: 228px;height: 168px;background-color: #5f5750;margin-right: 14px;padding-top: 2px;padding-left: 6px;
}.ad .shortcut li {position: relative;
}/* 设置快捷方式中的超链接 */
.ad .shortcut a {display: block;color: #cfccca;height: 84px;width: 76px;text-align: center;font-size: 12px;overflow: hidden;
}/* 设置快捷方式中的超链接hover效果 */
.ad .shortcut a:hover {color: #fff;
}/* 设置图标字体 */
.ad .shortcut i {display: block;margin-top: 20px;margin-bottom: 6px;font-size: 20px;
}/* 设置上边框 */
.ad .shortcut li::before {content: '';background-color: #665e57;width: 64px;height: 1px;position: absolute;left: 0;right: 0;top: 0;margin: 0 auto;
}/* 设置左边框 */
.ad .shortcut li::after {content: '';position: absolute;background-color: #665e57;height: 70px;width: 1px;top: 0;bottom: 0;margin: auto 0;left: 0;}/* 设置左侧的图片容器尺寸 */
.ad .imgs li {width: 316px;margin-right: 15px;
}/* 设置左侧图片最后一个图片外边距 */
.ad .imgs li:last-child {margin: 0;
}.ad .imgs img {width: 100%;vertical-align: top;}
P74-前端基础项目开发-首页main部分开发广告栏-项目完整代码相关推荐
- P72-前端基础项目开发-首页main部分开发Banner
P72-前端基础项目开发-首页main部分开发Banner 1.概述 这篇文章开发首页Banner图,实现banner图上左右两个箭头点击效果和图片右下角5个小点切换效果 2.Banner图 2.1. ...
- P73-前端基础项目开发-首页main部分开发工具条
P73-前端基础项目开发-首页main部分开发工具条 1.概述 网页的右下角通常会有个工具条用来设置一些快捷操作,例如回到网页顶部. 2.工具条 2.1.工具条需求效果 2.2.创建工具条结构 在in ...
- CV项目肢体动作识别（三）内附完整代码和详细讲解
CV项目肢体动作识别(三)内附完整代码和详细讲解 首先我还是给出完整的代码,然后再进行详细的讲解.这一次我们用模块化的思想,把一个功能模块化(moudle),这种思想在工程中非常常见,在分工中你需要做 ...
- element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...
- C++实践项目一：学生信息管理系统(内附完整代码)
引言 这几乎是任何一门语言的经典案例. 管理信息系统. MIS(管理信息系统--Management Information System)系统 ,是一个由人.计算机及其他外围设备等组成的能进行信息的 ...
- 最新版学习笔记---Python机器学习基础教程（1）Irises(鸢尾花)分类---附完整代码
开始学习机器学习基础,在此留下学习心得与自己的理解. 啥也不说,先看一下鸢尾花啥样 好看吧~~~~ Iris 1.环境搭建 2.了解数据 2.1读取数据 2.2查看数据 3.分离数据 4.构建模型(k ...
- 用python爬荣耀皮肤图片（爬虫最基础题，python爬虫教程，超详细+完整代码）
文章目录 前言 一.思路分析 网站分析 代码思路 二.环境配置 三.完整代码 四.总结 前言 今天,我们用python语言来实现爬荣耀所有英雄的皮肤图片,下载并保存到本地,文章后面有完整代码. 一.思 ...
- 重温前端基础（二） 移动WEB开发
目录 1. 移动端基础 2. 视口 2.1 meta标签 3. 二倍图 3.1 物理像素 & 物理像素比 3.2 背景缩放 background-size 4. 移动开发选择和技术解决方案 4 ...
- 人工智能基础——贝叶斯分类器例程（c语言实现，完整代码）
选修课老师布置了一道非常简单的作业,作为一学期没上课的学渣,靠百度搜索写完了作业,现把代码贴出,关于贝叶斯分类器的知识,网上一大堆,我就不费时间重复了. 听说MATLAB可以实现,但我MATLAB学的 ...
最新文章
- CentOS 7 安装nexus
- CVS的使用教程（转）
- 编写第二个Spring程序——AOP实现
- 可以访问本地mysql服务器的命令是_在用户访问本地MySQL服务器时，访问命令可以省略“–h localhost”。...
- Elasticsearch--高级-映射_修改映射 数据迁移---全文检索引擎ElasticSearch工作笔记019
- 【转】Delphi实现自动发贴和识别验证码 王泽宾
- MariaDB修改端口号
- mysql 镜像安装方法_MySql镜像安装
- 集成电路工艺专题复习
- 阻焊机器人系统_点焊机器人
- 中望3d快捷键命令大全_中望3D快捷键设置
- JAVA实现的飞机大战小游戏-Asteroids
- php+html文本域,html的文本域和表单域
- linux下看pcie的设备id,linux lspci查看pci总线设备信息
- 医院信息管理系统论文java_毕业论文-基于java的医院门诊信息管理系统设计与实现...
- 惠普ipaq蓝牙键盘配对码_将旧的Compaq Ipaq从Ubuntu 5.10 Breezy Badger升级到8.10 Intrepid Ibex...
- 云物大智题库--云计算
- 中科院计算所培训中心--2019年三季度课程新鲜出炉啦！
- 高可用之虚拟IP和IP漂移
- python爬虫现状_基于Python的微博爬虫系统研究