week1-前端基础知识

最新推荐文章于 2024-01-14 16:10:09 发布

溜溜球历险记

最新推荐文章于 2024-01-14 16:10:09 发布

阅读量1k

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_46637999/article/details/128166731

版权

文章目录

day1-HTMl常用标签

1.head中的标签

head中能使用的标签：

meta标签(网页配置)
title标签(设置网页标签)
link(导入外部文件)
style(设置内部样式)
script(添加内部js文件)

格式：<标签名属性名1=“属性值1” 属性名2=“属性值2”>标签内容</标签名>

<!DOCTYPE html>
<html>
	<head>
		<!-- 设置网页文本编码方式：设置成utf-8，中文不会乱码 -->
		<meta charset="utf-8">
		
		<!-- 设置网页标题 -->
		<title>百度一下，你就知道</title>
		
		<!-- link标签的使用
		 1）设置网页图标：
			rel属性  -  icon
			href属性  -  图片地址
		 2）导入外部样式
			rel属性  - stylesheet
			href属性  - css文件地址
		 -->
		<link rel="icon" href="img/猫头鹰.png">
		
	</head>
	<body>
		你好 世界
		
	</body>
</html>

网页基本结构

html标签 - 代表整个网页
head标签 - 代表网页头部内容
body标签 - 代表网页内容部分

2.文字相关标签和相关符号

1.标题标签：h1~h6

2.段落标签：p

需要在网页上显示一段文字就使用一个段落标签，默认情况段落会独占一行

3.行内文字标签：sapn

多段文字内容在一行显示

4.具有特殊功能的行内文字标签：b、strong、i、em

b - 文字加粗
strong - 文字加粗
i - 文字倾斜
em - 文字倾斜

5.换行和空格

在html代码中之间按换行和空格在网页中无效
如果在网页上需要换行和空格需要使用特定的标签和符号
换行：

空格： (空一个空格)、 (空了一个像素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.标题标签：h1~h6 -->
		<h1>1.标题标签</h1>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h6>六级标题</h6>
		
		<!-- 2.段落标签：p
		 需要在网页上显示一段文字就使用一个段落标签，默认情况段落会独占一行
		 -->
		<h1>2.段落标签</h1>
		<p>凭借一部《卿卿日常》，顺利成为95后新晋甜妹，入围了首轮“95后四小花”推荐艺人。
		9月份，大家心心念念的甜妹还是虞书欣，没想到过去一个月，就又有小花奋勇直追。
		不得不说，95后甜妹的竞争实在是太激烈，谁都有可能成为下一个赵露思！</p>
		<p>细看田曦薇的发展轨迹，像极了当年的赵露思</p>
		<!-- 3.行内文字标签：sapn
			多段文字内容在一行显示
		 -->
		<span>2022-11-28 08:18</span>
		<span>湖南</span>
		<span>|</span>
		<span>娱乐圈事迹</span>
		
		<!-- 4.具有特殊功能的行内文字标签：b、strong、i、em
		 b - 文字加粗
		 strong - 文字加粗
		 i - 文字倾斜
		 em - 文字倾斜
		 -->
		 <h1>4.加粗和倾斜文字</h1>
		<p><b>细看田曦薇的发展轨迹，像极了当年的赵露思</b>
		<i>细看田曦薇的发展轨迹，像极了当年的赵露思</i>
		田曦薇是1997年出生的重庆妹子，<i><b>毕业于上海戏剧学院</b></i>。
		4年前，凭借青春爱情剧《在悠长的时光里等你》正式进入演艺圈。
		之后演了都市情感剧《我的真朋友》和校园青春励志剧《如此可爱的我们》。
		</p>
		
		<!-- 5.换行和空格
			在html代码中之间按换行和空格在网页中无效
			如果在网页上需要换行和空格需要使用特定的标签和符号
			换行：<br>
			空格：&emsp;(空一个空格)、&nbsp;(空了一个像素)
		 
		 -->
		<p>你好<br>世界！</p>
		<br><br>
		<p>今天天气真好</p>
		<p>
			&emsp;&emsp;窗前明月光，<br>
			&nbsp;&nbsp;疑是地上霜。<br>
			举头望明月，<br>
			低头思故乡</p>

	</body>
</html>

3.图片和超链接

1.图片标签

1）img标签显示本地图片

2）img标签网页显示图片

3）加载失败的提示信息

4）图片标题

2.超链接

1）文字超链接

2）图片超链接

3）图片和超链接混合的

4）本地页面跳转

图片：img

src属性：提供图片地址(既可以是本地图片地址，也可以是网页图片地址)
alt属性：图片加载失败的时候显示得的提示信息
title属性：图片标题(鼠标悬停在图片上的时候才会显示)

超链接：a

标签内容：决定可见可点击的部分
href属性：决定目标地址
a.网页地址 - 点击打开指定的网页
b.本地html文件地址 - 点击打开自己写的网页
c.id选择器 - 页面内定位
d.空串 - 重新加载页面
target属性：设置跳转方式（_blank - 在新的窗口打开新的页面；_self -默认值，在当前窗口中打开新的页面）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="top">目录</h1>
		<a href="#p1">第一章：图片</a>
		<a href="#p2">第二章：超链接</a>
		<a href="#p3">第三章：一人之下</a>
		<a href="#d1">底部</a>
		<br>
		<hr>
		<h1 id="p1">第一章：图片</h1>
		<!-- 1.图片：img 
			src属性：提供图片地址(既可以是本地图片地址，也可以是网页图片地址)
			alt属性：图片加载失败的时候显示得的提示信息
			title属性：图片标题(鼠标悬停在图片上的时候才会显示)
		-->
		<h1>1.图片标签</h1>
		<!-- 1）img标签显示本地图片 -->
		<img src="img/xz1.png">
		<br>
		<img src="img/xz3.png">
		<br>
		<!-- 2）img标签网页显示图片 -->
		<img src="https://img0.baidu.com/it/u=78662227,3773386650&fm=253&fmt=auto&app=138&f=JPEG?w=343&h=499">
		
		<!-- 3）加载失败的提示信息 -->
		<br>
		<img src="img/https://img2.baidu.com/it/u=1585726115,970627327&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800111" alt="图片错误">
		<br>
		<br>
		<!-- 4）图片标题 -->
		<img src="img/xz2.png" title="肖战">
		<br>
		<br>
		<!-- hr是间隔线 -->
		<hr>
		<h1 id="p2">第二章：超链接</h1>
		<!-- 2.超链接：a 
			1）标签内容：决定可见可点击的部分
			2）href属性：决定目标地址
					a.网页地址  -  点击打开指定的网页
					b.本地html文件地址  -  点击打开自己写的网页
					c.id选择器  -  页面内定位
					d.空串  -  重新加载页面
			3）target属性：设置跳转方式（_blank - 在新的窗口打开新的页面；
				_self -默认值，在当前窗口中打开新的页面）
		-->
		<!-- 文字超链接 -->
		<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
		
		<!-- 图片超链接 -->
		<a href="https://www.baidu.com" target="_blank">
			<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
		</a>
		
		<!-- 图片和超链接混合的 -->
		<a href="https://www.baidu.com/s?wd=2022%E5%8D%A1%E5%A1%94%E5%B0%94%E4%B8%96%E7%95%8C%E6%9D%AF&rsv_dl=Worldcup_PC_2022_index_tips">
			<img src="img/狗.png" alt="">
			<span>直播现场</span>
			<img src="img/猫.png" alt="">
		</a>
		
		<br>
		
		<!-- 本地页面跳转 -->
		<a href="02文字相关标签和相关符号.html" target="_blank">第一章 文字相关标签</a>
		<br>
		<br>
		<a href="01head中的标签.html" target="_blank"> 第二章 head中的标签</a>
		<br>
		<hr>
		<h3 id="p3">第三章：一人之下</h3>
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
		<br>
		<a href="#top">回到顶部</a>
		<h3 id="d1">底部</h3>
		
	</body>
</html>

4.列表标签

1.有序列表：ol、li

ol标签 - 整个列表对应的容器

li标签 - 列表中每个元素对应的标签

2.无序列表：ul、li

ul标签 - 整个列表对应的容器

li标签 - 列表中每个元素对应的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>第一次月考考试成绩排名：</h2>
		<!----- 1.有序列表 ：ol、li------>
		<!-- 
			ol标签  -  整个列表对应的容器
			li标签  -  列表中每个元素对应的标签
		 -->
		<ol>
			<li>小明</li>
			<li>张三</li>
			<li>李四</li>
			<li>老王</li>
		</ol>
		
		<h2>已经拿到驾照的学生：</h2>
		<!----- 2.无序列表 ----->
		<!-- 
			ul标签  -  整个列表对应的容器
			li标签  -  列表中每个元素对应的标签
		 -->
		 <ul>
			 <li>小红</li>
			 <li>李华</li>
			 <li>小花</li>
			 
		 </ul>
		 
		 <hr>
		 <h2>千锋成都校区所有的学科</h2>
		 <ul>
			 <li>
				 <p>python数据分析</p>
				 <img src="https://img1.baidu.com/it/u=1906853383,3468850965&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" alt="">
				 <p><b>数据分析</b>是指用适当的统计分析方法对收集来的大量数据进行分析，将它们加以汇总和理解并消化，以求最大化地开发数据的功能，发挥数据的作用。
				 <br>数据分析是为了提取有用信息和形成结论而对数据加以详细研究和概括总结的过程。</p>
			 </li>
			 
			 <li>
				 <p>java后端开发</p>
				 <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.ancii.com%2Farticle%2Fimage%2Fv1%2FFo%2FP3%2FOL%2FLOPo3FmXqu_snLxPX13L_gdxVOs4ZQPDpqQLlDZqZBUq-j0sWhhHkDkL3SOVuiX38anDmYihvf8VJlBTHTZoBpPs8R3Zr3oeI-It4n06qAM.jpg&refer=http%3A%2F%2Fcdn.ancii.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672212313&t=b7924c062fe872464e633d856449bc5c" alt="">
				 <p><b>Java</b>是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。
				 <br>
				 Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p>
			 </li>
			 
			 <li>
				 <p>前端开发</p>
				 <img src="https://img1.baidu.com/it/u=350221313,1085486866&fm=253&fmt=auto&app=138&f=JPEG?w=584&h=350" alt="">
				 <p><b>前端开发</b>是一种通过使用HTML、CSS和JavaScript将数据转换为图形界面的实践，以便用户可以查看该数据并与之交互。</p>
			 </li>
		 </ul>
		 
		 <hr>
		 <ul>
			 <li>
				 <p><b>神探狄仁杰</b></p>
				 <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa.cvimg.cn%2FUploadFile%2FUserFiles%2F2011%2F2-13%2Fe2978c7d-5a13-4241-a78e-7823d75a15b4.bmp&refer=http%3A%2F%2Fa.cvimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672215278&t=897d9405fceec59c048cddfd3bbc6592" alt="">
				 <p>
					 <b>简介：</b><br>
					 &emsp;&emsp;狄仁杰的一生，可以说是宦海浮沉；狄仁杰为人正直，疾恶如仇，把孝、忠、廉称之为大义。狄仁杰作为一个封建统治阶级中杰出的政治家，每任一职，都心系民生，政绩卓著。在他身居宰相之位后，辅国安邦，对武则天弊政多所匡正；狄仁杰在上承贞观之治，下启开元盛世的武则天时代，作出了卓越的贡献。
				 </p>				 
			 </li>
			 
			 <li>
				 <p>少年包青天</p>
				 <img src="" alt="">
				 <p>
					 <b>简介：</b><br>
					 &emsp;&emsp;《少年包青天》是根据古典著作《三侠五义》改编的古装连续剧，由胡明凯执导，周杰、任泉、释小龙、李冰冰、刘怡君、郑佩佩领衔主演，陈道明特别出演，王绘春、贾致罡主演。
				 </p>
			 </li>
			 
			 <li>
				 <p>唐朝诡实录</p>
				 <img src="https://img0.baidu.com/it/u=4043443585,591899129&fm=253&fmt=auto&app=138&f=JPEG?w=891&h=500" alt="">
				 <p>
					 <b>简介：</b><br>该剧改编自作家魏风华同名原著，讲述了在繁华的大唐盛世之下发生的一系列奇闻异事，长安金吾卫中郎将卢凌风将与狄公亲传弟子苏无名携手共破诡案，守护苍生，担负起挽救社稷于危急的使命故事
					 
				 </p>
			 </li>
		 </ul>

	</body>
</html>

5.input标签

input标签会因为type值的不同，表现出完全不同的功能

1.text(默认)：普通文本输入框

value属性：输入框内容
placeholder(占位符)属性：输入提示信息
maxlength属性：限制输入的最大长度
name属性：定义输入数据的意义（主要用于数据的提交）

2.password：密码输入框

3.单选按钮、复选按钮

name属性：同一组选项的name属性值必须一致
checked属性：添加checked可以让按钮处于选中状态

4.普通文字按钮

value属性：属性值就是按钮上显示的文字

5.button标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- input标签会因为type值的不同，表现出完全不同的功能 -->
		<!-----1.text(默认)：普通文本输入框 
			1）value属性：输入框内容
			2）placeholder属性：输入提示信息
			3）maxlength属性：限制输入的最大长度
			4）name属性：定义输入数据的意义（主要用于数据的提交）
		----->
		<h2>输入账号和密码</h2>
		<label for="i1"><b>账号：</b></label>
		<input type="text" value="张三" placeholder="请输入账号" maxlength="6" name="username" id="i1">
		<br><br>
		
		<!-----2. password：密码输入框 ----->
		<label for="i2"><b>密码：</b></label>
		<input type="password" value="123456" placeholder="请输入密码" maxlength="6" name="密码" id="i2">
		<br><br>
		
		<label for="i3"><b>验证码</b></label>
		<input type="text" name="146623" id="i3">
		
		<br><br>
		<!-----3.单选按钮、复选按钮 
			1)name属性：同一组选项的name属性值必须一致
			2）checked属性：添加checked可以让按钮处于选中状态
		----->
		<h2>选择性别：</h2>
		<input type="radio" name="gender" id="g1" checked><label for="g1">男</label>
		<input type="radio" name="gender" id="g2"><label for="g2">女</label>
		
		<br><br>
		<h2>兴趣爱好:</h2>
		<input type="checkbox" name="interest" id="in1" checked><label for="in1">篮球</label>
		<input type="checkbox" name="interest" id="in2"><label for="in2">足球</label>
		<input type="checkbox" name="interest" id="in3"><label for="in3">羽毛球</label>
		<input type="checkbox" name="interest" id="in4"><label for="in4">乒乓球</label>
		
		<br><br>
		<hr>
		<br>
		<!-----4.普通文字按钮 
			value属性：属性值就是按钮上显示的文字
		 ----->
		<input type="button" value="登录">
		<input type="button" value="注册">
		
		
		<!-----5.button标签  ----->
		<button>取消</button>
		<br><br>
		<button style="background-color: rgba(0,0,0,0);border:none;">
			<img src="img/相机.png" alt="">
		</button>
		
		<hr>
		<input type="color">
		<input type="date">
		<input type="email">
		<input type="file">
		<input type="image">
		
		
	</body>
</html>

6.form标签

form标签又叫表单标签，它是一个容器，单独使用没有任何意义。
这个容器中一般放表单相关标签用于用户信息收集：input、select、textarea。

在form标签可以通过input标签来提供重置按钮和提高按钮，对表单中的内容进行整体的重置和数据体检操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!----- form标签 
			form标签又叫表单标签，它是一个容器，单独使用没有任何意义。
			这个容器中一般放表单相关标签用于用户信息收集：input、select、textarea。
			在form标签可以通过input标签来提供重置按钮和提高按钮，对表单中的内容进行整体的重置和数据体检操作
		
		----->
		
		<form action="">
			<h3>姓名：</h3>
			<input type="text" name="姓名">
				
			<h3>生日：</h3>
			<input type="date" name="生日">
				
			<h3>性别：</h3>
			<input type="radio"  checked name="gender" id=""><label for="">男</label>
			<input type="radio" name="gender" id=""><label for="">女</label>
		
			<br><br>
			<!-- 如果希望重置按钮有效，必须将重置按钮和需要重置的内容放在同一个form标签中 -->
			<input type="reset">
			<input type="submit">
		
		</form>

day2-CSS基本语法

1.常用标签

1.下拉列表：select、option、optgroup

select标签：代表整个容器
c标签：代表列表中的每一个元素（下拉表中的每个选项）
optgroup标签：对选项进行分组

2.多行文本域：textarea

1）标签内容：输入框内容
2）placeholder：输入提示信息
3）maxlength：能输入的字符的最大个数
4）rows：能同时显示的行数
5）cols：设置一行能显示的字符的个数（不精确）

3.无语义标签：div

一般不会使用div来给网页提供内容；div主要用于对于网页中的内容进行分块分区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!----- 1.下拉列表：select、option、optgroup
			select标签：代表整个容器
			option标签：代表列表中的每一个元素（下拉表中的每个选项）
			optgroup标签：对选项进行分组
		----->
		<label for="">所在省份</label>
		<select>
			<!-- 使用option标签的时候必须同时给标签内容和value属性赋值，一般赋相同的值 -->
			<option value="四川省">四川省</option>
			<option value="湖南省">湖南省</option>
		</select>
		<select name="" id="">
			<option value="成都市">成都市</option>
			<option value="乐山市">乐山市</option>
		</select>
		
		<hr>
		<label for="">所在城市</label>
		<select>
			<optgroup label="四川省">
				<option value="成都市">成都市</option>
				<option value="德阳市">德阳市</option>
				<option value="眉山市">眉山市</option>
			</optgroup>
			
			<optgroup label="广东省">
				<option value="深圳市">深圳市</option>
				<option value="广州市">广州市</option>
				<option value="珠海市">珠海市</option>
			</optgroup> 
		</select>
		
		<hr>
		<!-----2.多行文本域：textarea 
			1）标签内容：输入框内容
			2）placeholder：输入提示信息
			3）maxlength：能输入的字符的最大个数
			4）rows：能同时显示的行数
			5）cols：设置一行能显示的字符的个数（不精确）
		----->
		<textarea placeholder="请输入你的建议..." maxlength="100" rows="3" cols="40">"张三"</textarea>
		
		
		<!----- 3.无语义标签：div 
			一般不会使用div来给网页提供内容；div主要用于对于网页中的内容进行分块分区
		----->
		<div>
			<div></div>
				<div>
					<a href=""></a>
					<a href=""></a>
					<a href=""></a>
					<a href=""></a>
				</div>
				<div>
					<button></button>
					<button></button>
				</div>
				<div>
					<a href=""></a>
					<div></div>
				</div>

			<div></div>
			<div></div>
		</div>
	</body>
</html>

2.CSS基础语法

1.认识css

css又叫层叠样式表（简称样式表），它是专门用来给标签设置样式和布局

2.css代码写在哪

1）内联样式表：将css代码写在标签的style属性中（只作用于一个标签）
2）内部样式表：将css代码写在style标签中（style标签既可以放在head中，也可以放在body中，一般放在head中）-作用于整个html文件
3）外部样式表：将css代码写在css文件中，然后在html中通过link标签导入css文件- 可以作用于所有的html文件

3.css代码怎么写

1)css语法结构：选择器{属性1:属性值1; 属性2:属性值; …}
2)说明：
a.选择器 - 选择器是用来选中需要添加样式的标签的（注意：内联样式不需要写选择器{}）
b.属性 - 必须以"属性名:属性值"的形式存在，多个属性之间用分号隔开
常用属性：color(字体颜色)、font-size(字体大小)、background-color(背景颜色)、width(宽度)、height(高度)
c.属性值
1.颜色值：颜色对应的英文单词、#开头的16进制颜色值、0~255RBG颜色值：rgb(红，绿，蓝)、rgba（红、绿、蓝、透明度）
2.数值大小：带单位(px)的数字、使用百分比(10%)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 2）内部样式 -->
		<style>
			/* 这里面写的是css的代码 */
			a{
				color:blueviolet;
				font-size: 40px;
			}
		</style>
		
		<!-- 3.外部样式 -->
		<link rel="stylesheet" href="css/demo1.css">
	
	</head>
	<body>
		<!-- 1）内联样式 -->
		<p style="font-size: 20px; color: greenyellow;">我是段落1</p>
		<p>我是段落2</p>
		<a href="">我是段落3</a>
		<br><br>
		<span>今天真冷</span>
		<a href="">真的吗</a>
		
	</body>
</html>

demo1:

/* 在这写css代码 */
span{
	color: coral;
	font-size: 18px;
}

3.常用的选择器

选择器：css中选择器的作用是选中需要设置样式的标签

1.元素选择器

直接将标签作为选择器，选择html中所有的指定标签

例如：
p{} - 选中所有的p标签
a{} - 选中所有的a标签

2.id选择器

在id属性值前加#作为一个选择器，选中id属性值为指定值的标签

#p1{} - 选中id属性值为p1的标签
#a{} - 选中id属性值为a的标签

**注意：**整个网页中同一个id属性只能出现一次

3.class选择器 -

在class属性值前加.作为一个选择器，选中class属性值为指定指的所有标签

.p1{} - 选中class属性值为p1的所有标签
.a{} - 选中class属性值为a的所有标签
.c1.c3{} - 选中class属性值同时为c1和c3的所有标签
div.c1{} - 选中class属性值为c1的div的标签

注意：

1）不同的标签可以有相同的class值

2）同一个标签可以同时拥有多个不同的class值（给标签的class属性赋值的时候，多个class值空一格，以后面的为准，后来者居上）

4.通配符

直接将*作为选择器，选中当前页面中所有的标签

5.群组选择器

将多个选择器用逗号隔开作为一个选择器，同时选中用逗号隔开的每个选择器中的所有标签

p,a{} - 选中所有的p标签和a标签
p,c1{} - 选中所有的p标签和所有class值为c1的标签
#p1,.c1 - 选中id值为p1的标签和class值为c1的标签

6.后代选择器

将多个选择器用空格隔开作为一个选择器

7.子代选择器

将多个选择器用>隔开作为一个选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!-- 		案例1：元素选择器
		<p>段落1</p>
		<a href="">超链接1</a>
		<span>我是span1</span>
		<p>段落2</p>
		<div>我是div1</div>
		<a href="">超链接2</a>
		<p>段落3</p>
		
		<style>
			p{
				color: green;
			}
			
			a{
				background:red ;
			}
			
		</style> -->
	
		<!-- 案例2：id选择器 -->
	<!-- 	<p>段落1</p>
		<a id="c2">超链接1</a>
		<br>
		<span>我是span1</span>
		<p id="p1">段落2</p>
		<div>我是div1</div>
		<a id="name">超链接2</a>
		<p>段落3</p>
		
		<style>
			#p1{
				color: orangered;
			}
			
			#name{
				color: greenyellow;
				font-size: 40px;
			}
			
			#c2{	
				color: blue;
				font-size: 20px;
			}
		</style> -->
	
		<!-- 案例3：class选择器 -->
		<!-- <p class="c1 c3">段落1</p>
		<a href="" class="a b">超链接1</a>
		<br>
		<span class="c1">我是span1</span>
		<p id="p1" class="c3">段落2</p>
		<div class="c1">我是div1</div>
		<a id="name">超链接2</a>
		<p class="c1">段落3</p>
		
		<style>
			/* .c1{
				color:red;
			}
			.c3{
				background-color: azure;
			}
			
			.c1.c3{
				font-size: 40px;
			}
			
			.a.b{
				font-weight: 900;
				background-color: aqua;
			} */
			p.c1{
				color:gold;
			}
		</style> -->
		
		<!-- 案例4.通配符 -->
		<!-- <p>段落1</p>
		<a href="">超链接1</a>
		<span>我是span1</span>
		<p>段落2</p>
		<div>我是div1</div>
		<a href="">超链接2</a>
		<p>段落3</p>
		<style>
			*{
				color:greenyellow;
			}
		</style> -->
		
		<!-- 案例5.群组通配符 -->
	<!-- 	<p class="c1 c3">段落1</p>
		<a href="" class="a b">超链接1</a>
		<br>
		<span class="c1">我是span1</span>
		<p id="p1" class="c3">段落2</p>
		<div class="c1">我是div1</div>
		<a id="name">超链接2</a>
		<p class="c1">段落3</p> -->
			
<!-- 		<style>
			p,a{
				color:green;
			}
			#p1,.c1{
				background-color: yellow;
			}
		</style> --> 
		
		
		<!-- 案例6：子代、后代选择期 -->
		<p>段落1</p>
		<div id=box1"">
			<p>段落2</p>
			<a href="">超链接1</a>
			<div a="box2">
				<p class="c1">段落3</p>
				<span>
					<p>段落4</p>
					<a href="">超链接2</a>
				</span>
			</div>
			<span>
				<a href="">超链接3</a>
				<p>段落5</p>
			</span>
		</div>
		
		<span>
			<p>段落6</p>
		</span>
		
		<style>
			/* 选中属于div子代的p标签 */
			div>p{
				color:greenyellow;
			}
			
			/* 选中属于div中div中的p标签，前后是父子关系 */
			div>div>p{
				color:red;
			}
			
			/* 选中属于div后代的p标签 */
			div p{
				background:skyblue;
			}
			
			/* 选中属于span子代的a标签 */
			span>a{
				font-size: 45px;
			}
			/* class选择器的子代选择器无效 */
			.c1>a{
				color: red;
			}
			
		</style>
		
	</body>
</html>

4.伪类选择器

1.普通选择器和伪类选择器的区别：

普通选择器选中的是标签（选中标签的所有状态，所以通过普通选择器选中标签设置的样式会作用这个标签的所有状态）

伪类选择器选中的时候标签的某种状态

2.伪类选择器的写法

普通选择器：伪类选择器{} - 选中指定标签的指定状态

常见的伪类选择器：

1）link - 链接未访问过对应的状态（只有a标签有效）

2）visited - 链接已经访问过对应的状态（只有a标签有效）

3）hover - 鼠标悬停在标签上的时候对应的状态（针对所有的标签有效）

4）active - 鼠标在标签上按下的时候对应的状态（针对所有的标签有效）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 案例1.link和visited -->
		<a id="a1" href="https://www.baidu.com" target="_blank">百度</a>
		<style>
			#a1:link{
				color:red;
			}
			#a1:visited{
				color:green;
			}
		</style>
		<br><br>
		
		<!-- 案例2.hover -->
		<div id="box1">
			<a href="https://www.jd.com">京东</a>
			<p>段落1</p>
			<button>确定</button>
		</div>
		
		<style>
			#box1>a{
				color:#666666;
				/* 去掉a标签的下划线 */
				text-decoration: none;
			}
			
			#box1>a:hover{
				color: red;
				/* 添加下划线 */
				text-decoration: underline;
			}
			button{
				background-color: crimson;
				width: 100px;
				height:45px ;
				border:none;
				color: beige;
				font-size: 18px;
			}
			
			button:hover{
				font-size:30px;
				color: aqua;
				border:none;
				width:100px;
				height: 100px;
				background-color: gold;
			}
			
			#box1>p:hover{
				/* 让光标变成手指 */
				cursor:pointer;
			}
			
			#box1>p:active{
				color: coral;
				font-size: 80px;
			}
		</style>
		
	</body>
</html>

5.选择期优先级

1.内联样式表样式的优先级高于内部和外部（内部和外部本身没有高低之分，看选择器）

2.在内部和外部样式中：权重值越高优先级越高

元素选择器 - 1

class选择器 - 2

id选择器 - 4

群组选择器看各自的权重

后代和子代的权重，是各个选择器权重相加

3.在’!important’面前，选择器的优先级无意义，它对应的样式一定有效

最后排序：!important > 内联样式 > id选择器 >class选择器 > 元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<p id="p1" class="c1" style="color">段落1</p>
		</div>
		
		<style>
			div>p{
				color: slateblue;
			}
			#p1{
				color: yellow;
			} 
			 .c1{
				color: red;
			}
			p{
				color: green !important;
			}
			
		</style>
	</body>
</html>

day3-CSS布局相关属性

1.CSS核心属性

1.文本属性

1)字体大小：font-size

2)文字颜色：color:rgb( )

3)设置字体名称：font-family

4)文字加粗：font-weight （100~900对应九个等级）

5)文字倾斜：font-style： italic/oblique/normal

6)设置对齐方式：text-align:center;

7)设置行高：line-height

8)添加文字装饰：text-decoration

9)首行缩进：text-indent

10)字间距：letter-spacing

2.背景相关属性

1)单独设置背景颜色：background-color

2)同时设置背景相关属性：background:背景图地址是否平铺 x方向位置 y方向位置背景颜色

3.边框属性

1)同时设置四个边的边框框

2)单独设置某一边的边框

4.圆角属性

1)同时设置四个角的圆角弧度：border-radius:弧度大小

2)单独设置四个角的弧度： border-top-left-radius: 50px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.文本属性 -->
		<p id="p1">新冠肺炎疫情全球流行了近3年，几乎每个人都受到了不同程度的影响。
		近期部分地区疫情加剧，加上个别地方封控时间过长，部分人心理压力增大，产生了焦虑、不安、恐慌等不良情绪。</p>
	
		<p id="p2">段落1</p>
		
		<div style="background-color: aqua;text-align: center;">
			<a href="">百度</a>
			<a href="">爱奇艺</a>
			<a href="">淘宝</a>
			<a href="">京东</a>
		</div>
		
		<style>
			#p1{
				/* 1)字体大小 */
				font-size: 18px;
				
				/* 2)文字颜色 */
				color: rgb(0, 30, 255);
				
				/* 3)设置字体名称*/
				font-family: "楷体";
				
				/* 4)文字加粗 
					100~900对应九个等级
				*/
				font-weight: 800;
				
				/*5)文字倾斜: italic/oblique/normal*/
				font-style: italic;
				
				/* 7)设置行高 */
				line-height:60px ;
				
				/* 8)添加文字装饰 
					none - 取消下划线
					underline - 添加下划线
					overline - 添加上划线
					line-through -添加删除线
				*/
			   text-decoration:line-through;
			   
				/* 9)首行缩进 
					常见单位：
					px - 像素
					cm - 厘米
					em - 空格
				*/
				
				text-indent: 2em;
				
				/* 10)字间距 */
				letter-spacing: 10px;
				
			}
			
			#p2{
				background-color: chartreuse;
				width: 50%;
				/* 6)设置对齐方式 */
				text-align: center;
				
			}
		</style>
		
		<hr>
		<!-- 2.背景相关属性 -->
		<div id="div1"></div>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				
				/* 1)单独设置背景颜色 */
				background-color: greenyellow;
				
				/* 2)同时设置背景相关属性
					background:背景图地址 是否平铺 x方向位置 y方向位置 背景颜色
				*/
			   background:url(img/12.png) no-repeat center 60px  yellowgreen;
			}
	
		</style>
	
		<hr>
		<!-- 3.边框属性 -->
		<div id="div2"></div>
		<style>
			#div2{
				width: 200px;
				height: 200px;
				background-color: thistle;
				
				/* 1)同时设置四个边的边框 
					border:none;   -   去掉自带边框
					border:边框宽度 边框风格 边框颜色
					
					边框风格  -  solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)
				*/
				border:5px solid red;
				
				/* 2)单独设置某一边的边框 
					border-left:边框宽度 边框风格 边框颜色
					border-right:边框宽度 边框风格 边框颜色
					border-top:边框宽度 边框风格 边框颜色
					border-bottom:边框宽度 边框风格 边框颜色
				*/
				border-bottom: 5px solid seagreen;
				border-top: 5px solid tomato;
				border-left: 8px double chocolate;
				}
	
		</style>
		<br>
		<hr>
		
		<!-- 4.圆角属性 -->
		<div id="div3"></div>
		<style>
			#div3{
				width: 400px;
				height: 200px;
				background-color: hotpink;
				
				/* 1)同时设置四个角的圆角弧度 
					border-radius:弧度大小
				*/
				border-radius: 100px;
				
				/* 2)单独设置四个角的弧度*/
				/* border-top-left-radius: 50px;
				border-bottom-right-radius: 50px; */
			}
		</style>
	</body>
</html>

2.标准流布局

1.标准流

签在没有添加任何布局相关属性的时候，标准默认的布局方式，就是按照标准流布局。
根据标签在标准流中布局的特点可以将标签分为三大类：块级标签、行内标签、行内块标签。

2.三种不同类型的标签

1）块级标签：一个占一行；设置宽高有效；默认宽度是父标签的宽度，默认高度是内容高度。
例如：p、div、ul、li等

2）行内标签：一行可以显示多个；设置宽高无效；默认大小是内容的大小
例如：a、span、label、b、i等

3）行内块标签：一行可以显示多个；默认大小是内容的大小；设置宽高有效。
例如：img、input(输入框)

3.改变标签类型：display属性

none - 隐藏标签
block - 块级标签
inline - 行内标签
inline-block - 行内块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.块级标签案例 -->
		<p>我是段落1</p>
		<p>我是段落2</p>
		<style>
			p{
				background-color: chartreuse;
				width: 200px;
				height: 50px;
			}
		</style>
		
		<!-- 2.行内标签案例 -->
		<a href="">我是超链接1</a>
		<a href="">我是超链接2</a>
		<style>
			a{
				background-color: orange;
				width: 400px;
				height: 60px;
			}
		</style>
		<!-- 设置行内标签的的高宽无效 -->
		
		<!-- 3.行内块标签案例 -->
		<div>
			<img id="img1"src="img/12.png" alt="">
		</div>
		<img id="img2" src="img/12.png" alt="">
		<style>
			#img2{
				width: 200px;
				height: 200px;
			}
		</style>
		
		<hr>
		<!-- 4.修改标签的类型案例 -->
		<div id="box">
			<div style="background-color: coral;">我是div1</div>
			<div style="background-color: hotpink;">我是div2</div>
		</div>	
		<div style="background-color: khaki;width: 100px; height: 50px;">我是div3</div>
			<style>
				#box>div{
					display:inline-block;
					width: 200px;
					height: 100px;
				}
			</style>
	</body>
</html>

3.浮动

1.脱离标准流

浮动和定位都可以让标签脱流，标签一旦脱流不管什么标签都会像行内块一样布局（一行可以显示多个，默认大小都是内容大小，设置宽高都有效）

2.浮动：float属性

left - 左浮动
right - 右浮动

3.浮动的应用场景：让竖着的显示的横着

主要用于整体结构布局中有左右结构的时候

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.浮动会脱流 -->
		<!-- <div id="box1">
			<p>我是段落1</p>
			<p>我是段落2</p>
			<a href="">超链接1</a>
			<a href="">超链接2</a>
		</div>
		
		<style>
			#box1>p{
				background-color: hotpink;
				width: 100px;
				height: 100px;
				
				/* 左浮动 */
				float: left;
			}
			#box1>a{
				background-color: tomato;
				width: 200px;
				height: 80px;
				
				/* 左浮动 */
				float: left;
			}
		</style> -->
		
		<!-- 2.网页结构1：上下结构 
			直接使用div在标准中布局
		-->
	<!-- 	<div style="background-color: bisque; height: 150px;"></div>
		<div style="background-color: coral; height: 500px;"></div>
		<div style="background-color: darkcyan; height: 1000px;">
			<a href="">关于百度</a>
			<a href="">百度一下</a>
			<a href="">你就知道</a>
			<a href="">帮助中心</a>
		</div> -->
		
		<!-- 3.纯左右结构 -->
		<!-- <div style="background-color: bisque; height: 1200px; width:25%;"></div>
		<div style="background-color: coral; height: 1200px; width:60%;"></div>
		<div style="background-color: forestgreen;height: 1200px; width: 15%;"></div>
		<style>
			div{
				float:left
			}
		</style> -->
		
		<!-- 4.上加左右结构 -->
	<!-- 	<div style="background-color: bisque; height: 200px; width:100%;"></div>
		<div style="background-color: coral; height: 500px; width:60%;"></div>
		<div style="background-color: forestgreen;height: 500px; width: 40%;"></div>
		<style>
			div{
				float:left
			}
		</style> -->
		
		<!-- 5.上 左右 下 结构 -->
		<!-- <div style="background-color: bisque; height: 200px; width:100%;"></div>
		<div style="background-color: coral; height: 500px; width:33%;"></div>
		<div style="background-color: forestgreen;height: 500px; width: 34%;"></div>
		<div style="background-color: coral; height: 500px; width:33%;"></div>
		<div style="background-color:deepskyblue;height: 200px; width: 100%;"></div>
		
		<style>
			div{
				float:left
			}
		</style>
		 -->
		 
		 <div id="box2">
			 <ul id="u1">
				 <li>京东首页</li>
				 <li>|</li>
				 <li>成都</li>
			 </ul>
			 <ul id="u2">
				 <li>你好，请登录</li>
				 <li>|</li>
				 <li>免费注册</li>
				 <li>|</li>
				 <li>我的订单</li>
				 <li>|</li>
				 <li>我的京东</li>
				 <li>|</li>
				 <li>京东会员</li>
			 </ul>
		 </div>
		 
		 <style>
			 #box2{
				 height:45px ;
				 background-color: rgb(228, 228, 228);
			 }
			 #u1{
				 float: left;
			 }
			#u2{
				 float:right
			 }
			#box2 li{
				 float: left;
				 margin-left: 20px;
			 }
			 
			 #box2>ul{
				list-style-type:none
			 }
		 </style>
		 
	</body>
</html>

4.定位

1.定位

定位相关属性：left、right、top、bottom、position，前四个属性设置距离的，position是设置参考对象的

1)距离属性

left - 当前标签的左边到参考标签的左边的距离
right - 当前标签的右边到参考标签的右边的距离
top - 当前标签的上边到参考标签的上边的距离
bottom - 当前标签的下边到参考标签的上边的距离

注意：只设置距离不设置参考对象，距离无效

2)position参考属性

absolute（绝对定位） - 将第一个position属性值不为默认值（initial、static）的前辈标签作为参考对象

注意：除了body以外，所有的标签在没有给position属性赋值的时候position的值是initial

relative（相对定位） - 将标签的position设置为relative，是为了让当前标签能够成为其后代标签绝对定位的参考对象

fixed（相对浏览器定位） - 将浏览器作为参考对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box4" style="width: 800px; height: 600px;background-color: red;">
			<div id="box3" style="width: 400px; height: 400px;background-color: yellowgreen;">
				<div id="box2" style="width: 200px; height: 200px;background-color: skyblue;">
					<div id="box1" style="width: 100px; height: 100px;background-color: silver;">
					</div>	
				</div>
			</div>	
		</div>
		
		<style>
			#box4{
				position:relative;
			}
			#box1{
				right:30px;
				
				position:absolute;
			}
		</style>
		
		<div style="width: 100px; height: 200px;background-color: blueviolet;"></div>
			
		<button>退出</button>
		<style>
			button{
				right: 100px;
				bottom: 100px;
					
				position: fixed;
			}
		</style>
	</body>
</html>

5.盒子模型

1.什么是盒子模型

每一个标签都是由content、padding、border和margin 四个部分组成，四个构成的整体就是盒子模型

1）content（内容） - 设置标签的宽度和高度就是在设置content的大小
给标签添加内容（包括子标签），是添加到content上的

2）padding（内边距） - 设置标签的背景颜色和背景图，会同时作用于标签的padding和content
标签如果需要内边距，内边距需要单独设置

3）margin（外边距） - 不可见的但是占位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				/* 关闭网页中所有标签自带的外边距和内边距 */
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="div1" style="background-color: coral; width: 100px; height: 100px; ">
			我是div1
		</div>
		
		<style>
			#div1{
				
				/* 1.设置内边距 */
				/* 1）同时设置四个内边距的大小 */
				/* padding:20px; */
				
				/* 2)单独设置某一边 */
				padding-left:20px;
				padding-top:20px;
				
			}
		</style>
		
		<br>
		<!-- 内边距应用1 -->
		<div id="div2">
			<img src="img/1130.png" alt="">
			<input type="text">
		</div>
		<style>
			#div2{
				width: 250px;
				height: 37px;
				
				border:1px solid darkgray;
			}
			
			#div2>input{
				height: 35px;
				
				/* 设置垂直对齐方式：top、bottom、middle */
				vertical-align: top;
				
				/* 去掉边框 */
				border: none;
				width:200px ;
				
				/* 去掉选中后出现的边框 */
				outline:none;
				
				padding-left: 2px;
			}
			
			#div2>img{
				width: 37px;
				height: 37px;
				
				border: 1px solid darkgray;
			}
		</style>
		
		<!-- 内边距应用2 -->
		<P id="p1">我是段落1</P>
		<style>
			#p1{
				height: 37px;
				line-height: 37px;
				/* 添加背景图片 */
				background: url(img/1130.png) no-repeat 0 0;
				padding-left: 38px;
			}
		</style>
		
		<!-- 内边距应用2 -->
		<p id="p2">我是段落2</p>
		<style>
			#p2{
				width: 100px;
				/* 设置对齐方式 */
				text-align: center;
				/* 添加边框 */
				border:1px solid green;
				/* 添加边框弧度 */
				border-radius:10px;
				/* 添加内边距 */
				padding:5px;
			}
		</style>
		
		<!-- 外边距的使用 -->
		<div id="div3">
			<div></div>
			<div></div>
			<div></div>
		</div>
		
		<style>
			
			#div3>div{
				width: 100px;
				height: 100px;
				background-color: chartreuse;
				
				float: left;
				
				/* 1.同时设置4个外边距*/
				margin: 10px;
				
				/* 2.单独设置1个方向的外边距 */
				/* margin-right: 20px; */
				
			}
		</style>
		
	</body>
</html>

day4-京东登录页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<!-- 设置标题 -->
		<title>京东-欢迎登录</title>
		
		<!-- 设置图标 -->
		<link rel="icon" href="img/jd_logo.ico">
		
		<!-- 导入外部样式 -->
		<link rel="stylesheet" href="css/login.css">
		<link rel="stylesheet" href="css/loginTop.css">
		<link rel="stylesheet" href="css/loginMiddle.css">
		<link rel="stylesheet" href="css/loginBottom.css">
		
	</head>
	
	<body>
		<!------------------------------------------- 网页顶部 ------------------------------------------------------->
		<div id="top-box">
			<!-- 1.放网页logo部分 -->
			<div id="logo-box">
				<!-- 前面两张图片对应的盒子 -->
				<div>
					<a href="https://www.jd.com/">
						<img src="img/logo.png" alt="">
					</a>
					<img src="img/l-icon.png" alt="">
				</div>
				
				<!-- 后面的调查问卷 -->
				<a href="https://wj-dongjian.jd.com/q/61a05143f2ec2b00b35e40a6" target="_blank">登录页面，调查问卷</a>
			</div>
			
			<!------- 2.隐私政策 ------------>
			<div id="privacy-box">
				<p>
					<img src="img/warning.png" alt="">
					依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a target="_blank" href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
				</p>
			</div>
		</div>
		
		<!------------------------------------- 网页中间 ----------------------------------------------------->
		<div id="middle-box">
			<!-- ---中间的大盒子----- -->
			<div>
				<!------------ 上面放登录按钮的部分 ----------------------->
				<div id="btn-box">
					<p><img src="img/warning.png" alt="">京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
					<div>
						<button>扫码登录</button>
						<span>|</span>
						<button>账号登录</button>
					</div>
				</div>
					
				<!-------  放输入框的部分 ---------------->
				<div id="message-box">
					<!-- 账号输入框 -->
					<div>
						<img src="img/pygame.png" alt="">
						<input type="text" placeholder="手机/邮箱/登录账号">
					</div>
					
					<!-- 密码输入框 -->
					<div>
						<img src="img/password_icon.png" alt="">
						<input type="password"  placeholder="密码">
						
					</div>
					
					<!-- 忘记密码 -->
					<a  target="_blank" href="https://aq.jd.com/process/findPwd?s=1">忘记密码</a>
					
					<!-- 登录按钮 -->
					<button>登录</button>
				</div>
				
				<!-- -------------第三方登录部分按钮------------ -->
				<div id="third-party-box">
					<a id="qq" href="">QQ</a>
					<span>|</span>
					<a id="weixin">微信</a>
					<a id="register">立即注册</a>
				</div>
			</div>
		</div>
		
		<!------------- 网页底部 --------------------->
		<div id="bottom-box">
			<div>
				<a href="">关于我们</a>
				<span>|</span>
				<a href="">联系我们 </a>
				<span>|</span>
				<a href="">人才招聘 </a>
				<span>|</span>
				<a href="">商家入驻 </a>
				<span>|</span>
				<a href="">广告服务 </a>
				<span>|</span>
				<a href="">手机京东  </a>
				<span>|</span>
				<a href="">友情链接 </a>
				<span>|</span>
				<a href="">销售联盟 </a>
				<span>|</span>
				<a href="">京东社区 </a>
				<span>|</span>
				<a href="">京东公益</a>
			</div>
			<p>Copyright © 2004-2022  京东JD.com 版权所有</p>
		</div>
	</body>
</html>

login.css

/*关闭网页中所有标签自带的外边距和内边距 */
*{
	margin:0
	padding:0	
}

#top-box{
	height: 120px;
}

#middle-box{
	height:500px;

}

#bottom-box{
	height: 150px;
}s

loginTop.css

/* #top-box>div:nth-child(1){
	height: 80px;
} */

/* #privacy-box>div:nth-child(2){
	height: 40px;
	background-color: rgb(255, 248, 241);
} */


/*-----------------1.网页logo部分 ------------------*/
#logo-box{
	height: 80px;
	position: relative;
}
/* 1)设置京东图标的位置 */
#logo-box>div{
	position: absolute;
	left:220px;
	/* 京东图标居住对齐 40-30 */
	top:10px;
}

/* 2)设置京东与欢迎页面的距离 */
#logo-box>div>img{
	margin-left: 15px;
}
/* 去掉京东图片出现的下划线 */
#logo-box>div>a{
	text-decoration: none;
}
/* 3)设置登录页面调查问卷的的位置 */

#logo-box>a{
	position: absolute;
	right: 225px;
	bottom: 10px;
	
	/* a.字体颜色和大小 图柏欧尼 */
	font-size: 12px;
	color: rgb(170, 170, 170);
	text-decoration: none;
	/* 插入图片 */
	background: url('../img/q-icon.png') no-repeat left center;
	padding-left: 22px;

}

/* b.设置点击过后变颜色 没有下划线 */
#logo-box>a:hover{
	color:rgb(211, 73, 70);
	text-decoration: underline;
	
}

/*------------------2.隐私政策 --------------------*/
#privacy-box{
	height: 40px;
	background-color: rgb(255, 248, 241);
}

#privacy-box>p{
	font-size: 12px;
	color:rgb(170, 170, 170);
	
	/* 水平方向居中 */
	text-align:center;
	
	/* 垂直方向居中 */
	height:40px;
	line-height: 40px;
}
/* 超链接字体颜色没有下划线 */
#privacy-box a{
	color:rgb(51, 51, 51);
	text-decoration: none;

}
/* 点击连接变色没有下划线 */
#privacy-box a:hover{
	text-decoration: underline;
}

/* 图片位置 */
#privacy-box img{
	vertical-align: middle;
}

loginMiddle.css

#middle-box{
	background: url('../img/bg.png') no-repeat left center rgb(221, 46, 19);
	
	position: relative;
}

#middle-box>div{
	width: 345px;
	height: 420px;
	background-color: white;
	
	/* 定位 */
	position: absolute;
	right:225px ;
	top:10px;
}
/* --------------放按钮的盒子 ---------------*/
#btn-box{
	height:100px;
	
}

/* ---上面的提示信息的部分----- */
#btn-box>p{
	height: 40px;
	background-color: rgb(255, 248, 240);
	
	color: rgb(170, 170, 170);
	font-size: 12px;
	text-align:center;
	line-height: 40px;
}

#btn-box img{
	vertical-align: middle;
}
/* 下面按钮的部分 */
#btn-box>div{
	height: 50px;
}

#btn-box button{
	border:none ;
	background-color: rgba(0, 0, 0,0);
	height: 50px;
	width: 165px;
	font-size: 18px;
	color: rgb(102, 102, 102);
	font-weight: 400px;
}

#btn-box>div>button:nth-child(3){
	color:rgb(211, 46, 19)
	
}
#btn-box span{
	color: rgb(250, 250, 250);
	font-size: 20px;
	font-weight: 100px;
}

/* -------------放登录信息的盒子 ------------*/
#message-box{
	height: 255px;
	border-top:1px solid rgb(245, 245, 245);
	border-bottom:1px solid rgb(245, 245, 245);
	
	position: relative;
}

/* --账号和密码输入框-- */
#message-box>div{
	width: 305px;
	height: 38px;
	margin-left: 20px;
	margin-top: 32px;
	border: 1px solid rgb(190, 190, 190);
}

#message-box>div:nth-child(2){
	margin-top: 20px;
}

#message-box img{
	width: 38px;
	height: 38px;
	border-right: 1px solid rgb(190, 190, 190);
}

#message-box input{
	height: 35px;
	width: 250px;
	
	vertical-align: top;
	border:none;
	outline: none;
	font-size:14px;
}


/* --忘记密码---- */
#message-box>a{
	position: absolute;
	right: 20px;
	margin-top: 23px;
	
	color:rgb(109, 109, 109);
	font-size:12px;
	text-decoration: none;
}

#message-box>a:hover{
	text-decoration: underline;
	color:rgb(221, 46, 19);
	
}

/* --登录按钮-- */
#message-box>button{
	position: absolute;
	left: 20px;
	bottom: 30px;
	
	width: 305px;
	height: 35px;
	background-color: rgb(211, 46, 19);
	color: white;
	font-size: 22px;
	border: none;
	letter-spacing:25px;
}

/* ---------放第三方登录信息的盒子 ------------*/
#third-party-box{
	height:50px;
	line-height: 50px;
	position: relative;
}

#qq,#weixin{
	color: rgb(109, 109, 109);
	font-size: 13px;
	text-decoration: none;
	padding-left: 27px;
}

#qq{
	margin-left: 20px;
	background: url('../img/qq.png') no-repeat left center;
}

#weixin{
	background: url('../img/weixin.png') no-repeat left center;
}

#qq:hover,#weixin:hover{
	color:rgb(211, 46, 19);
	text-decoration: underline;
}

#third-party-box>span{
	color: rgb(204, 204, 204);
	font-size: 10px;
	margin-left: 5px;
	margin-right: 3px;
}

/* 注册按钮 */

#register{
	position: absolute;
	right: 20px;
	
	font-size: 14px;
	color: rgb(189, 49, 48);
	text-decoration: none;
	
	background: url('../img/right.png') no-repeat left center;
	padding-left: 27px;
}

#register:hover{
	text-decoration: underline;
}

loginBottom.css

#bottom-box>div{
	height: 50px;
	line-height: 50px;
	text-align: center;
}

#bottom-box a{
	color: rgb(105, 105, 105);
	font-size: 12px;
	text-decoration: none;
}

#bottom-box a:hover{
	text-decoration: underline;
	color: rgb(229, 56, 60);
}

#bottom-box span{
	color:rgb(105, 105, 105);
	font-size:12px;
	margin-left: 8px;
	margin-right: 8px;
}

#bottom-box>p{
	color:rgb(105, 105, 105);
	font-size: 12px;
	text-align:center;
}

day5-隐藏菜单和js基础

1.简单的隐藏菜单

简单的隐藏菜单的要求：

在一个盒子里面放两个子标签，一个是默认可见的部分，一个是隐藏的部分
必须设置盒子的大小和可见的部分的大小一样
必须通过定位的方式调整可见部分和不可见部分的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<span id="visible">更多</span>
			<div id="invisible"></div>
		</div>
		
		
		<style>
			/* 必须设置盒子的大小和可见的部分的大小一样 */
			#box{
				position: relative;
				width: 60px;
				height: 30px;
				margin-left: 300px;
			}
			
			#visible{
				position: absolute;
				top:0px;
				
				width: 60px;
				height: 30px;
				background-color: coral;
			}
			
			#invisible{
				width:200px ;
				height:90px ;
				background-color: greenyellow;
				
				position: absolute;
				top: 30px;
				right: 0;
				
				/* 默认隐藏 */
				display: none;
			}
			
			/* 核心操作
				#box:hover{}  -  鼠标悬停在id为box的标签上的时候设置id为box标签的样式
				#box:hover #invisible  -  鼠标悬停在id为box的标签的时候设置为id的visible的样式
			 
			*/
			#box:hover #invisible{
				display: block;
			}
			
			#box:hover #visible{
				color: white;
			}
		</style>
		
		<hr>
		<!------------------------ 例子 ------------------------->
		<div id="box2">
			<p>段落1</p>
			<a href="">超链接1</a>
		</div>
		
		<style>
			#box2{
				width: 200px;
				height: 100px;
				background-color: yellow;
			}
			#box2:hover a{
				background-color: salmon;
			}
		</style>
		
	</body>
</html>

2.复杂的隐藏菜单

总结：

结构上是一个盒子放可见部分和隐藏部分对应的标签
设置盒子的大小和可见部分的大小一样
用定位做整体布局
悬停在盒子上的时候设置可见部分的样式和让隐藏的部分显示出来
画框的话，需要让可见的部分在上面，隐藏的部分在下面

盖住：保证隐藏部分在下面，显示部分在上面:

方法1：修改z坐标，z坐标大的在上面，小的在下面（z-inde）
方法2：先放隐藏部分，再放显示部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<ul id="left">
				<li>河南</li>
			</ul>
			<ul id="right">
				<li>你好，请登录</li>
				<li>免费注册</li>
				<li class="line">|</li>
				<li>我的订单</li>
				<li class="line">|</li>
				
				<li id="my-jd">
					<span id="visible">我的京东</span>
					<div id="invisible"></div>
				</li>
				
				<li class="line">|</li>
				<li >京东会员</li>
				<li class="line">|</li>
				<!-- 第一步 :把显示部分隐藏部分的放在一个盒子里面-->
				<li id="purchase">
					<span class="visible">企业采购</span>
					<div class="invisible"></div>
				</li>
				
				<li class="line">|</li>
				<li>商家服务</li>
				<li class="line">|</li>
				<li>网站导航</li>
				<li class="line">|</li>
				<li>手机京东</li>
				<li class="line">|</li>
				<li>网站无障碍</li>
			</ul>
		</div>
		
		<!--------------------- 企业采购的样式 ----------------------->
		<style>
			/* 第二步：设置盒子的大小和可见部分的大小一样 */
			#purchase{
				width: 70px;
				height: 30px;
				position: relative;
			}
			
			#purchase>.visible{
				/* background-color: fuchsia; */
				display: inline-block;
				height: 30px;
				padding-left: 10px;
				padding-right: 10px;
				
				/* 第五步：通过定位方式构建出显示部分和隐藏部分的位置关系，再设置z坐标显>隐藏 */
				position: absolute;
				top: 0;
				z-index: 2;
			}
			
			/* 第三步：设置隐藏部分显示的时候的样式  然后再隐藏*/
			#purchase>.invisible{
				width: 200px;
				height:250px ;
				background-color:white;
				border:1px solid gray ;
				display:none;
				
				/* 第五步：通过定位方式构建出显示部分和隐藏部分的位置关系，再设置z坐标显>隐藏 */
				position: fixed;
				top: 30px;
				z-index:1;
			}
			
			/* 第四步：设置悬停在父标签上的时候修改可见和隐藏部分的效果 */
			#purchase:hover .visible{
				background-color: white;
				border:1px solid gray ;
				border-bottom: none;
			}
			
			#purchase:hover .invisible{
				display: block;
				
			}
			
		</style>
		
		<!--------------------- 我的京东的样式 ----------------------->
		<!-- -------------------隐藏菜单相关样式 ------------------ -->
		<style>
			
			/* 盒子的样式 */
			#my-jd{
				width: 68px;
				height: 30px;
				
				position: relative;
			}
			
			/* 显示部分的样式 */
			#visible{
				display: inline-block;
				width: 48px;
				height: 30px;
				padding-left: 10px;
				padding-right: 10px;
				/* 设置标签的z坐标改变兄弟标签的上下层关系，值越大越靠上（前提兄弟关系的标签必须做有效定位）*/
				z-index: 2;
				
				position: absolute;
				top: 0px;
			}
			
			/* 隐藏部分的样式 */
			#invisible{
				display: none;
				width: 400px;
				height: 300px;
				border: 1px solid darkgray;
				
				position: absolute;
				left: 0px;
				top: 30px;
				
				z-index: 1;
			}
			
			/* 设置鼠标悬停显示效果 */
			#my-jd:hover #invisible{
				display: block;
			}
			
			#my-jd:hover #visible{
				background-color: white;
				border: 1px solid darkgray;
				border-bottom: none;
			}
			
		</style>
		
		<!----------------------- 普通样式 --------------------------->
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				height: 30px;
				background-color: rgb(228, 228, 228);
				line-height: 30px;
			}
			
			#left{
				float: left;
				margin-left: 80px;
			}
			
			#right{
				float: right;
				margin-right: 80px;
			}
			
			#box li{
				float: left;
				font-size: 12px;
				color: rgb(173,173, 173);
			}
			
			#box>ul{
				list-style-type: none;
			}
			
			.line{
				margin-left: 10px;
				margin-right: 10px;
			}
		</style>
	</body>
</html>

3.认识js

js是负责网页变化的

1.js代码写在哪儿

内联js - 将js代码写在标签的事件属性中
内部js - 将js代码写在script标签中
外部js - 将js代码写在js文件中，然后在html中通过script标签导入

注意：script中标签既可以直接提供内部，还可以用来导入外部js，但是同一个script标签这两个只能选一个

2.js能做什么

修改标签内容、修改标签属性、修改标签样式、删除标签、添加标签、定时操作等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.内联js -->
		<button onclick="alert('hello world!')">确定</button>
		
		<!-- 2.内部js -->
		<script>
			// js的注释语法
			alert('内部js')
		</script>
		
		<!-- 3.导入外部js文件 -->
		<script src="js/demo.js"></script>
		
	</body>
</html>