HTML CSS写页尾案例
HTML CSS实现页面页尾案例
项目日志
一.笔记
二.知识点
1、<footer>标签
2、CSS选择器
CSS 选择器是用来选择标签的，选出来以后给标签加样式，在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。CSS选择器的5种常见的基本选择器（通配符选择器 类选择器 元素选择器 ID选择器 群组选择器）
a.通配符选择器
通用选择器用*来表示，用来选择所有元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通配符选择器</title>
<style>
*{marigin: 0;
padding: 0;
font-size: 20px;
}
</style>
</head>
<body>
</body>
</html>b.类选择器
类选择器的声明是一个’.'加上类名，大括号内写上样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
.L1{
color: blueviolet;
background-color: aquamarine;
border-radius: 15px;
text-align: center;
}
</style>
</head>
<body>
<h1 class="L1">类选择器</h1>
</body>
</html>c.元素选择器
元素选择器，是直接使用HTML元素的名称作为选择器（如 html、p、h1、em、a、img等）
元素选择器字体设置为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
.L1 {
width: 100px;
height: 200px;
margin: 50px auto;
}
span{
color: red;
}
</style>
</head>
<body>
<div class="L1">
<p>这里使用<span>元素选择器</span>改变了样式</p>
</div>
</body>
</html>d.ID选择器
id选择器是在名称前使用"#"
ID选择器特别注意：
1：一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；
2：id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；
3：可以在不同的文档中使用相同的id名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#L1{
width: 100px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="L1">ID选择器</div>
</body>
</html>
e.群组选择器
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
.L1 {
width: 100px;
height: 800px;
margin: 50px auto;
background: red;
}
p,li{
color: blueviolet;
}
.L1,.L2{
color:black;
}
</style>
</head>
<body>
<div class="L1">
<p>这里是一个段落!!!!!</p>
<ul><li>列表</li></ul>
<a href="#" class="L2">转接</a><br>
<span class="L2">文字文字！</span>
</div>
</body>
</html>
3、引入CSS样式的方法（行内 内部 外部）
a.行内样式
在网页元素上通过style=""属性
<div style="color: red; margin-top: 5px;border: 1px solid black">行内样式</div>b.内部样式
在HTML头部head部分内，引用style编写CSS样式
<html>
<head>
<style type="text/css">
div{font-size:10px; color: aqua;}/*这里是设置CSS内部样式内容*/
</style>
</head>
<body>
<div>css内部样式</div>
</body>
</html>
3.使用link来调用外部CSS样式文件（外部）
<link rel="htvgb-fff" href="#" type="text/css" />
（注意:调用外部的CSS样式文件就不需要style标签，而是直接通过link一个样式来引用外部样式）
4、CSS中的优先级
CSS样式优先级顺序：
行内>内部>外部；id>class>标签
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
三.项目公共底部案例
1.步骤
底部分为四个部分（一个大的div里面套三个小的div）
第一个大的div整体负责模块的整体部分
第一个小的div主要是存放（品牌动态 |生产经营资质| 企业合作 | 发票申请 | 平台规则 | 帮助服务 | 联系我们）功能通过<a>标签.CSS来实现
第二个小的div存放（电话的图标 400-999-6665 WEIBO WECHAT 京东商城）
电话的图标是根据图片的定位来实现的
background-image:url("img/tel_03.jpg");
background-position: 0px 0px;后面通过<a>标签 CSS来实现
第三个小的div存放（深圳市幸福商城科技股份有限公司 粤ICP备16039394号-6 京公网安备44030702002399 公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼）通过<a>标签 CSS来实现
<footer>
<div id="b1">
<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>
<div id="b2">
<img src="img/tel_03.jpg">
<span>400-999-6665</span>
<span>WEIBO</span>
<span>WECHAT</span>
<span>京东商城</span>
</div>
<div id="b3">
<span>深圳市悦轩商城科技股份有限公司</span>
<span>粤lCP备16039394号-6</span>
<span>京公网安备44030702002399</span>
<span>公司地址:深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</span>
</div>
</footer>2.案例实现存在的问题
公共底部和头部div混乱 ，a标签 span标签 会发生冲突
div分不清了，写的太乱了
3.解决方法
查百度进行寻找解决办法一步步测试，footer页脚的使用可以解决此问题
footer{
background-color: #442B1C;
width: 1400px;
height: auto;
position: absolute;
bottom: 0;
}div 进行细分，理清关系，进行分析测试
4.实现效果
四.学习收获
实现了网页页脚的HTML CSS样式，对html css的认识更加深刻，同时对其结构更加清晰.
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献4条内容
所有评论(0)