HTML5大前端学习过程第二周（Day10）

最新推荐文章于 2022-01-29 12:12:20 发布
最新推荐文章于 2022-01-29 12:12:20 发布
阅读量359 收藏 3
点赞数 1
分类专栏： 笔记 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SB_Hunter/article/details/104432612
版权

2020年2月21日
四级出成绩了，考了4次终于过了，哈哈。今天没学什么新知识，主要是练习昨天学习的定位。
一. 本节课学习目标。

  1. 掌握定位的应用。 重点
    二. 定位练习1-小米官网1。
    在这里插入图片描述
    结构图
  2. 外层需要一个div，用来管理这块区域中的所有内容。
  3. 图片的大小应该和div的大小是一样的。
  4. 分类列表，左箭头，右箭头，指示器在图片的上层。
    在这里插入图片描述
    HTML代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米官网</title>
		<!-- 外部引入 -->
		<link rel="stylesheet" type="text/css" href="css/mi1.css"/>
	</head>
	<body>
		<!-- 整体结构 -->
		<div class="wrap">
			<!-- 图片 -->
			<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4aa0cbfad7de34618c4bebdbdeee4e1.jpg?thumb=1&w=1226&h=460&f=webp&q=90" >
			<!-- 分类列表区域 (列表， 每一项)-->
			<ul class="list">
				<li>
					<a href="">手机 电话卡  <span>></span> </a>	
					<!-- 当鼠标移动到li上时，显示出右边的遮罩层。此时要保证li和遮罩层是一个父子关系 -->
					<div class="mask">
						<!-- 布局内容 -->
						手机 电话卡
					</div>
				</li>
				<li>
					<a href="">电视 盒子 <span>></span> </a>	
					<div class="mask">
						<!-- 布局内容 -->
						电视 盒子
					</div>
				</li>
				<li>
					<a href="">笔记本 显示器 平板  <span>></span> </a>
					<div class="mask">
						<!-- 布局内容 -->
						笔记本 显示器 平板
					</div>					
				</li>
				<li>
					<a href="">家电 插线板  <span>></span> </a>
					<div class="mask">
						<!-- 布局内容 -->
						家电 插线板
					</div>						
				</li>
				<li>
					<a href="">出行 穿戴 <span>></span> </a>
					<div class="mask">
						<!-- 布局内容 -->
						出行 穿戴
					</div>
				</li>
				<li>
					<a href="">智能 路由器 <span>></span> </a>
					<div class="mask">
						<!-- 布局内容 -->
						智能 路由器
					</div>
				</li>
				<li>
					<a href="">电源 配件 <span>></span> </a>
					<div class="mask">
						<!-- 布局内容 -->
						电源 配件
					</div>					
				</li>
				<li>
					<a href="">健康 儿童 <span>></span> </a>	
					<div class="mask">
						<!-- 布局内容 -->
						健康 儿童
					</div>
				</li>
				<li>
					<a href="">耳机 音响 <span>></span> </a>	
					<div class="mask">
						<!-- 布局内容 -->
						耳机 音响
					</div>
				</li>
				<li>
					<a href="">生活 箱包 <span>></span></a>
					<div class="mask">
						<!-- 布局内容 -->
						生活 箱包
					</div>
				</li>
			</ul>
			<!-- 左箭头 -->
			<span class="left"><</span>
			<!-- 右箭头 -->
			<span class="right">></span>
			<!-- 指示器 - 5个点 -->
			<div class="marker"> 
				<span id="marker_first"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
</html>

CSS样式代码：

* {
	margin: 0;
	padding: 0;
}

/* 外层最大的div */
.wrap {
	width: 1226px;
	height: 460px;
	border: 2px solid black;
	
	/* 整块区域水平居中,并且往下移动 */
	/* 两个值: 上下  左右    三个值:上  左右  下 */
	margin: 0px auto;
	margin-top: 100px;
	
	/* 相对定位 - 保证wrap是list,right,left,marker的参照物 */
	position: relative;
}
/* 图片 */
.wrap>img {
	width: 100%;
	height: 100%;
}
/* 分类列表区域 */
.list {
	width: 234px;
	height: 420px;
	background-color: rgba(105, 101, 101, 0.6);
	
	/* 去掉无序列表的列表符号 */
	list-style: none;
	/* 添加上下填充 */
	padding: 20px 0;
	
	/* 绝对定位 - 相对于父元素 */
	position: absolute;
	/* 调整位置 - left,right,top,bottom */
	left: 0;
	top: 0;
}
.list>li {
	/* 此时不光要调整li的高度,还要保证里面的文字能够垂直居中 */
	line-height: 42px;
	color: #fff;
	font-size: 14px;
	
	/* 把li当作子元素mask的参照物 - 因为每一个li的位置都是不同的,但是右边mask的位置都是一样的,所以,li无法作为参照物*/
	/* position: relative; */
}
/* 给每一项li添加悬浮效果,悬浮之后更改每一项li的背景颜色 */
.list>li:hover {
	background-color: #ff6700;
}
/* a标签的文字颜色要单独修改 */
/* 如果要保证li这一行都是可以点击的,那必须要让a标签宽度充满这一行 */
.list>li>a {
	color: #fff;
	/* 去掉下划线 */
	text-decoration: none;
	/* 修改a元素的特性, 行属性标签是不能更改宽度的 */
	/* 将a元素由行元素更改为块元素 */
	display: block;
	
	/* 添加左右填充 */
	padding-left: 29px;
	padding-right: 24px;
}
/* 让span标签中的箭头,移动到最右边 */
.list>li>a>span {
	float: right;
}
/* 遮罩层 mask */
.mask {
	width: 992px;
	height: 460px;
	background-color: #fff;
	
	/* 绝对定位 */
	position: absolute;
	/* 位置调整 - left,right,top,bottom */
	left: 234px;
	top: 0;
	/* 提升层级 */
	z-index: 1000;
	
	/* 隐藏掉 */
	display: none;
	
	/* 字体相关属性 */
	font-size: 100px;
	text-align: center;
	line-height: 460px;
	color: rgb(255, 0, 0);
}
/* 当鼠标移动到每一行时,每一个列表项时,让对应的右边的内容区域显示出来 */
.list>li:hover>.mask {
	/* 显示出来 */
	display: block;
}

/* 左箭头 span是行元素,是不能修改宽高的.*/
.left {
	font-size: 30px;
	width: 41px;
	height: 69px;
	/* 将元素设置为行内块元素,即可支持宽高修改 */
	display: inline-block;
	/* 水平居中 */
	text-align: center;
	/* 垂直居中 */
	line-height: 69px;
	color: #ccabad;
	/* 加个小手 */
	cursor: pointer;
	
	/* 绝对定位 - 父元素进行位置调整*/
	position: absolute;
	/* 调整位置 */
	left: 234px;
	/* 定位之后的元素垂直居中 - top:50% 是距离父元素高度的一半*/
	top: 50%;
	/* 让当前元素往上移动右箭头区域高度的一半 50% 是当前元素高度的一半*/
	transform: translateY(-34.5px);
}
/* 左箭头悬浮效果,更改背景颜色 */
.left:hover {
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
}
/* 右箭头 */
.right {
	font-size: 30px;
	width: 41px;
	height: 69px;
	/* 将元素设置为行内块元素,即可支持宽高修改 */
	display: inline-block;
	/* 水平居中 */
	text-align: center;
	/* 垂直居中 */
	line-height: 69px;
	color: #ccabad;
	/* 加个小手 */
	cursor: pointer;
	
	/* 绝对定位 - 父元素进行位置调整*/
	position: absolute;
	/* 调整位置 */
	right: 0;
	/* 定位之后的元素垂直居中 - top:50% 是距离父元素高度的一半*/
	top: 50%;
	/* 让当前元素往上移动右箭头区域高度的一半 50% 是当前元素高度的一半*/
	transform: translateY(-34.5px);
}
/* 右箭头悬浮效果,更改背景颜色 */
.right:hover {
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
}
/* 指示器 - 5个点 */
.marker {
	/* 假数据 */
/* 	width: 100px;
	height: 10px; */
	/* background-color: yellow; */
	
	/* 绝对定位 - 相对于父元素位置调整 */
	position: absolute;
	/* 调整位置 */
	right: 30px;
	bottom: 25px;
	
	/* 字体大小为0 - 解决子元素span之间的水平间距问题 */
	font-size: 0;
	text-align: center;
}
/* span和a标签是一样的,都是行属性标签,无法设置宽高 */
.marker>span {
	/* 更改宽高 */
	width: 6px;
	height: 6px;
	/* 行元素 - 行内块元素 */
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.4);
	/* 设置边框 2px */
	border: 2px solid rgba(255, 255, 255, 0.4);
	/* 正方形画成一个圆形 半径 = (width 6px + border 4px) / 2 */
	border-radius: 5px;
	/* 
		调间距两种做法
		1.调一个方向上的.
		2.设置两个方向的,元素中间的间距是两个元素左右间距的和.
		
		区别:
			在于元素居中上.
	 */
	/* margin-left: 8px; */
	margin: 0 4px;
}

/* 将第一个点设置为选中状态 */
#marker_first {
	background-color: rgba(255, 255, 255, 0.4);
	/* 修改边框颜色 */
	border-color:  rgba(0, 0, 0, 0.4);
}
/* 给span添加悬浮效果,悬浮上之后更改背景颜色和边框颜色 */
.marker>span:hover {
	background-color: rgba(255, 255, 255, 0.4);
	/* 修改边框颜色 */
	border-color:  rgba(0, 0, 0, 0.4);
}
SB_Hunter
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue组件（一）：评分、搜索、菜单、轮播、分页等
sj1255897381的博客
07-24 591
Vue组件 在做项目的时候经常会写功能一样，只是写入的数据不一样的元素，为了避免重复书写，会将这些元素做成组件，例如菜单、分页、轮播图等。 由于目前还是用的是VScode软件，写组件的模板没有提示，需要手动书写，所以对于刚刚尝试写组件的新手，可以现在html文件中先写出组件的元素以及需要实现的功能。 评分组件 以评分作为例子： 做评分组件的几个元素： 1、总分有几颗星？ 2、初始时有没有默认星？ 3、怎么实现鼠标往后移动的时候星星被点亮，向前移开的时候星星不亮。鼠标离开评分，恢复默认值 4、鼠标点击的时候，
WEB前端学习第一周总结
bbbbbbxxx的博客
03-21 1460
一周总结 总结 第一天 在第一周的时间里通过第一天的学习，从最初的学习，知道了网页从建立项目，到完工每一步的构成，以及网页的结构，表现，行为三部分。 到后来的WEB标准，知道了W3C和ECMA。 接下来了解了计算机语言和HTML语言的发展。并初次尝试了VSCODE 。 第二天 了解了HTML的基本结构以及每一句语言的含义。同时了解了HTML的语法，以及一些常用的标签。例如标题标签，文本加粗标签等。...
HTML5大前端学习过程第二周（Day06）
SB_Hunter的博客
02-17 2023
2020年2月17日 今天访问量破万了，非常开心，在这里Hunter我谢谢大家的支持，给了我坚持下去的动力，让我知道了有人看，所以我会一直更新下去的。 一. 本节课学习目标。 掌握盒模型的结构。 掌握盒模型的宽高计算方式。 掌握CSS的引入方式。 掌握通配选择器的用法。 通过盒模型编写百度首页。 二. 盒模型的结构。 盒模型简介。 HTML元素在网页中进行呈现的，都是呈现的一个盒子结构的形式...
HTML5大前端学习过程第一周（Day01）
SB_Hunter的博客
02-12 2980
2020年2月11日 一. 本节课学习目标。 了解互联网行业的发展。 了解HTML5的发展史。 了解HTML5的应用场景以及市场前景。 掌握HTML5的概念。 ★重点 掌握HbuilderX开发工具的使用。 ★重点 掌握网页开发基本结构。 ★重点 二. HTML5发展史。 1993年：HTML1.0发布，1993IETF发布草案。 1994年：Tim Berners-Lee创建了非盈利性的W3...
HTML5大前端学习过程第一周（Day02）
SB_Hunter的博客
02-12 3271
2020年2月12日 一. 本节课学习目标。 掌握HTML常用的标签。 重点 掌握HTML常用的标签属性。 掌握emmet快捷键写法。 能够通过HTML基础标签完成简单网页制作。 二. 标签属性。 <meta charset = “UTF-8” /> meta标签，只有一个标签，单标签。 meta元信息，存放一些网页的设置内容。 charset = “UTF-8”，标签属性。 ...
HTML5大前端学习过程第一周（Day05）
SB_Hunter的博客
02-15 2233
今天没有学什么新内容，就做了做作业，仿照做了一个百度首页，由于太菜，做了挺长时间，基本上和百度首页有一点相似了，不过还是有所不同，毕竟有的代码还没学，而且第一次写这种东西，废话不多说了，把代码放上来，大佬们轻喷，谢谢。 作业要求效果图： 我的代码块： <!DOCTYPE html> <html> <head> <meta charset="utf-...
HTML5大前端学习过程第一周（Day03）
SB_Hunter的博客
02-13 3368
2020年2月13日 今天是写博客的第二天，也是学习前端的第三天，毕业设计的课题题目又被打了回来，很难受，很累，不过也算是过得充实吧！毕竟是大四以前的债，唉，欠的都要还的。 一. 本节课学习目标。 掌握HTML标签分类。 了解HTML转义字符。 掌握表格标签的功能以及用法。 ★重点 掌握CSS的使用以及多种CSS选择器的用法。 了解选择器的优先级。 掌握div和span标签的用途。 ★重点 ...
HTML5大前端学习过程第一周（Day04）
SB_Hunter的博客
02-14 4086
2020年2月14日 今天收获还算可以,Android studio终于可以能好可以用了，运行出了HelloWorld，昨天晚上能了三四个小时都没有能好，今天也能了挺长时间吧，除了上课就在搞这个，从来没有用那个软件运行出来HelloWorld这样开心过，可能这就是传说中程序员的HelloWorld的情节吧！ 一. 本节课学习目标。 掌握CSS选择器的优先级以及选择器的区别。 Div和span的用...
2022黑马程序员-前端学习第一阶段（Day01-HTML的认知）
sakura22123的博客
01-29 4420
#HTML认知 ##1.认识网页 ➢ 问题1：网页由哪些部分组成？ ✓ 文字、图片、音频、视频、超链接 ➢ 问题2：我们看到的网页背后本质是什么？ ✓ 前端程序员写的代码 ➢ 问题3：前端的代码是通过什么软件转换成用户眼中的页面的？ ✓ 通过浏览器转化（解析和渲染）成用户看到的网页 ...
WEB前端学习日志第二周 day2
bbbbbbxxx的博客
03-24 476
WEB前端学习日志第二周 day2 今日总结：今天学习了css盒模型中的margin的用法，至此经过这一段的学习共学习了HTML的结构和标签，css的语法、样式表和选择符，同时还有css的文本、边框、列表、背景属性，并学习了浮动知识，再加上今天学习的css盒模型。已经学习了挺多知识，于是开始着手做一个简单的网页。 通过vscode、ps、和浏览器一步一步尝试做除了一个网页。 CSS盒模型中的mar...
06day_前端学习资料_
09-30
这个压缩包包含了第六天的学习内容，可能是一个系统的前端学习计划的一部分，通过逐日递增的方式让学习者逐步深入。 在前端开发中，主要涉及到以下几个关键知识点： 1. HTML（HyperText Markup Language）：HTML ...
前端基础css第一天,对应博客
04-03
在提供的压缩包文件中，我们可以看到不同主题的CSS文件，如`css_1.8.css`可能涵盖了第1天第8个主题的内容，而`css_2.7day.html`可能是第2天第7天的HTML示例，用于展示CSS应用。通过这些文件，你可以逐个学习和实践每...
DAY_2:这是上课第二天的上课活动
03-30
在“DAY_2:这是上课第二天的上课活动”中，我们可以推断这是一次教学活动，重点可能是深入学习HTML的基本概念和技术。 在HTML的学习过程中，第一天可能已经介绍了基本概念，如HTML文档结构、元素、标签和属性等。第...
小米官网HTML5
12-04
这个学习项目结合了理论与实践，使得学习过程更加生动有趣。 HTML5是超文本标记语言（HyperText Markup Language）的第五版，是网页开发的基础，它引入了许多新的元素、属性和API，旨在提高网页的可读性、可访问性...
如何用Eclipse使用jar包（导入jar包）图解
SB_Hunter的博客
03-02 5045
1.选择你要导入jar的项目，这里以项目JavaOOP05为例； 2.点击“Alt+Enter键”进入如下界面； 3.选择“Java Build Path——Libraries——Add External JARs…" 4.进入Jar包的存放位置，选择jar包后点击”打开“ 5.在JARs and class foloders on the build path:里出现你的jar包后点击...
eclipse如何获取查看jar包的源代码（图解）
SB_Hunter的博客
03-02 3948
1、下载jd-gui插件，插件名称是：jd-eclipse-site-1.0.0-RC2 2、运行eclipse，选择菜单栏Help–>Install New Software 3、在右侧窗口，点击Add 4. （1）Name：需要自己填写 （2）Location：选择插件jd-eclipse-site-1.0.0-RC2.zip的路径 之后点击Add 5.勾选添加的插件 6.在de...
Android studio 创建新工程时出现：install repository and sync project show in file
SB_Hunter的博客
02-14 3080
昨天晚上费了三四个小时在用Android studio创建新工程时，都出现了这个问题，出现：install repository and sync project show in file 就是下面这样的 代码是这样的 到今天下午终于知道怎么回事的，首先出现这个提示，编译一下，查看错误的具体信息或者rebuild project ，就是点这个 点过之后，出现这样的错误提示 之后在app...
CSDN写博客时如何显示HTML代码标签
SB_Hunter的博客
02-12 2344
今天写博客时，写今天学习的前端笔记时，想记下HTML标签的格式，结果打出来就消失了，被执行了，由于是新手不太懂，就查了一下，害怕自己再忘了，就记录下来 第一种方法： 如果只是想显示一些标签的字面内容而不想被转换，这时我们需要懂得一些常用的转义字符表： 使用方法：实体名称或者实体编号打出来就是前面的显示结果 例如：你要打<br>，但打出来后，显示却不见了，因为被转换不见了 所以打的形式...
前端学习日记： Day5 - 简单计算与二级联动
在前端开发的学习过程中，HTML和JavaScript是两个核心的组成部分。在这一天的学习中，我们将通过两个实例来深入理解这两个语言的基础用法。 首先，我们来看第一个实例：简单的计算功能。这个例子展示了如何使用HTML...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值