2022.6.10项目日志

一.今日笔记和知识点总结：

1、<footer>标签
   <footer> 标签定义文档或节的页脚。

   <footer> 元素应当含有其包含元素的信息。

   页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

   您可以在一个文档中使用多个 <footer> 元素。
2、CSS选择器
(1)基本选择器：id(#),class(.),标签
(2)常用选择器：后代选择器(选择器1   选择器2)，子选择器(选择器1>选择器2)，群组选择器(选择器1,选择器2)
(3)伪类选择器：
/* 未访问的链接 */

a:link {
  color: #FF0000;
}

/* 已访问的链接 */

a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */

a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */

a:active {
  color: #0000FF;
}

3、引入CSS样式的方法
(1)行内 CSS：

<a style="font-size :100px；">bbbbbb</a>

(2)内部 CSS：在head标签里的style标签里写
(3)外部 CSS：定义一个css文件，在页面head里用link引用
4、CSS样式书写的语法规则
选择器(属性名称1：属性1;属性名称2：属性2;属性名称3：属性3......)
5、CSS中的优先级
行内>内部>外部；id>class>标签

二.今日作业

实现项目页尾

 1.添加页尾div

html中

<div id="d1">

</div>

<div id="d2">

</div>

2.添加a标签，填写内容文字

<div id="d1">
					<a id="a1" style="margin-left: 30px; margin-bottom: 20px;">品牌动态</a>
					<a id="a2" style="margin-left: 30px; margin-bottom: 20px;">|</a>
					<a id="a1" style="margin-left: 15px; margin-bottom: 20px;">生产经营资质</a>
					<a id="a2" style="margin-left: 20px; margin-bottom: 20px;">|</a>
					<a id="a1" style="margin-left: 15px; margin-bottom: 20px;">企业合作</a>
					<a id="a2" style="margin-left: 20px; margin-bottom: 20px;">|</a>
					<a id="a1" style="margin-left: 15px; margin-bottom: 20px;">发票申请</a>
					<a id="a2" style="margin-left: 20px; margin-bottom: 20px;">|</a>
					<a id="a1" style="margin-left: 15px; margin-bottom: 20px;">平台规则</a>
					<a id="a2" style="margin-left: 20px; margin-bottom: 20px;">|</a>
					<a id="a1" style="margin-left: 15px; margin-bottom: 20px;">帮助服务</a>
					<a id="a2" style="margin-left: 20px; margin-bottom: 20px;">|</a>
					<a id="a1" style="margin-left: 15px; margin-bottom: 20px;">联系我们</a>
					<a  style="margin-left: 50px; margin-bottom: 20px;"><img src="img/tel_03.jpg" id="a3"></a>
					<a id="a1" style="margin-left: 0px; margin-bottom: 20px;">400-999-6665</a>
					<a id="a1" style="margin-left: 20px; margin-bottom: 20px;">WEIBO</a>
					<a id="a1" style="margin-left: 20px; margin-bottom: 20px;">WECHAT</a>
					<a id="a1" style="margin-left: 20px; margin-bottom: 20px;">京东商城</a>
					</div>
					<div id="d2">
						<a id="a4" style="margin-left: 50px;">深圳市悦选商城科技股份有限公司</a>
						<a id="a4" style="margin-left: 30px;">粤ICP备16039394号-6</a>
						<a id="a4" style="margin-left: 30px;">京共网安备44030702002399</a>
						<a id="a4" style="margin-left: 30px;">公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</a>
					</div>

 3.修改完善页面样式

添加css样式

1.设置字体样式

#a1{
				color: #FFFFFF;
				font-weight: bold;
				padding-bottom: 20px;
			}
			#a2{
				color: #FFFFFF;
				padding-bottom: 20px;
			}

 2.设置图片样式

#a3{
				background: 1px solid red;
				width: 18px;				
				background-image: url(../img/tel_03.jpg);
				margin-top: 20px;
			}

 3.效果展示

 三.作业中存在的问题

两行文字如何换行

四.解决问题

通过设置两个div来分别设置两行文字，再分别设置字体样式。