web前端基础CSS------美化页面“footer”部分

news2024/11/19 21:17:09

一,实验代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于我们</title>
		
		<style type="text/css">
			#footer{
			       margin: 10px 0px;
				   background: #f5f5f5;
				   border: top 1px solid #eee ;
			}
			#footerCon{
				width: 1190px;
				margin: 10px auto 0px;
			}
			#footerCon #links{
				border-bottom: 1px solid #eee;
				overflow: hidden;
				padding-bottom: 20px;
			}
			#footerCon #links dl{
				float: left;
				width: 200px;
				margin-right: 52px;
				overflow: hidden;
			}
			#footerCon #links dl dt{
				color: #646464;
				padding-bottom: 10px;
				font-weight: 700;
				padding-left: 40px;
				font-size: 16px;
				
			}
			#footerCon #links dl dd{
				line-height: 25px;
				
			}
			#footerCon #otherLinks{
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			#footerCon #copyRight{
				line-height: 30px;
				text-align: center;
			}
			
			a {
				text-decoration: none;
				color: deepskyblue;
			}
			a:hover{
				color: red;
			}
			
			
		</style>
	</head>
	<body>
		<div id="footer">
			<div id="footerCon">
				<div id="links">
				
				<dl>
					<dt>用户指南</dt>
					<dd><a href="guide.html">新手指南</a></dd>
					<dd><a href="memberLevel.html">会员积分</a></dd>
					<dd><a href="#">常见问题</a></dd>
					<dd><a href="feedback.html">反馈调查</a></dd>
				</dl>
				     
					<dl>
						 <dt>品牌服务</dt>
						 <dd><a href="#">闪电配送</a></dd>
						 <dd><a href="#">快捷支付</a></dd>
						 <dd><a href="#">售后保障</a></dd>
					 </dl>
					 
					 <dl>
						 <dt>商家合作</dt>
						 <dd><a href="#">商家对接</a></dd>
						 <dd><a href="#">品牌资质</a></dd>
						 <dd><a href="#">进程流程</a></dd>
					 </dl>
					 
					 <dl>
					 	<dt>关于我们</dt>
					 	<dd><a href="#">平台简介</a></dd>
					 	<dd><a href="#">企业文化</a></dd>
					 	<dd><a href="#">经营模式</a></dd>
						<dd><a href="#">招贤纳士</a></dd>
					 </dl>
				</div>
				
				<div id="otherLinks">
					<a href="#">关于我们</a>
					<a href="#">购物指南</a>
					<a href="#">商家合作</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">反馈调查</a>
					<a href="#">反馈调查</a>
				</div>
				
				<div id="copyRight">
					Copyright &copy;2016 - 2026 MobileShop 版权所有| 消费者维权热线:
					408888888888
				</div>
			</div>
		</div>
	</body>
</html>

二、实验结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1109469.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序componentPlaceholder解决分包后不同包组件调用报错问题

这里 我做了个分包的环境 为了演示 只分类 AB两个包 然后呢 A包的 page用了B包的组件 组件肯定是没问题 但是我们运行到A包page的代码 这里会报错 告诉你找不到 很简单 在调用组件的地方 "componentPlaceholder": {"组件代理名":"view"}然后…

教育课堂小程序,三分钟打造专属小程序 带完整搭建教程

大家好哇&#xff0c;今天来给大家分享一款教育课堂小程序。现如今&#xff0c;线上教育已经普及&#xff0c;在大学课堂里&#xff0c;老师尝尝是使用各种各样的学习APP进行点名&#xff0c;签到&#xff0c;答题&#xff0c;考试等等&#xff0c;相较于传统的APP来说&#xf…

C语言--冒泡排序和简答选择排序

冒泡排序 一种典型的交换排序 类似水冒泡&#xff0c;大元素经不断的交换由水底慢慢的浮出 从头到尾&#xff0c;循环比较两相邻的元素 大的元素移到后面&#xff0c;小的放前面-每次循环&#xff0c;大的元素会排到最后 代码如下&#xff1a; #include<stdio.h> …

RK3568笔记三:部署ResNet50模型

若该文为原创文章&#xff0c;转载请注明原文出处。 通过ResNet50网络训练了识别10类车的模型并成功了转换成了onnx模型 具体训练过程可以参考文章AI项目十七&#xff1a;ResNet50训练部署教程-CSDN博客 这里部署使用rknn-toolkit2工具转换成RKNN模型并测试 rknn-toolkit2工…

12款SCADA软件功能比较

数据采集​​软件 SCADA是可用于监控工厂运营或工业流程的软件。通过使用SCADA软件&#xff0c;我们可以将硬件和软件结合起来&#xff0c;组成一个更好的控制系统。为了改进工业过程或纠正过程故障&#xff0c;SCADA 会将所需的命令信号发送到 PLC 或 RTU&#xff0c;这些设备…

大模型发展进入深水区,企业如何打造专属AI原生应用?

目录 &#x1f4e2;前言 大模型发展进入深水区&#xff0c;企业如何打造专属AI原生应用&#xff1f;一、人工智能领域发展现状及行业特点二、百度GBI 的诞生三、百度GBI的特点和优势四、百度GBI的作用及应用场景五、 重磅发布“千帆AI原生应用开发工作台”六、千帆AI原生应用开…

亿赛通电子文档安全管理系统 Update.jsp SQL注入

目录 0x01 漏洞介绍 0x02 影响产品 0x03 语法特征 0x04 漏洞复现页面 0x05 漏洞修复建议 0x01 漏洞介绍 亿赛通电子文档安全管理系统是国内最早基于文件过滤驱动技术的文档加解密产品之一&#xff0c;保护范围涵盖终端电脑&#xff08;Windows、Mac、Linux系统平台&#…

跬智信息(Kyligence)入选 IDC《中国数据智能市场生态图谱V4.0》

近日&#xff0c;IDC 咨询正式发布了《中国数据智能市场生态图谱V4.0》&#xff0c;该报告深入分析了当前中国数据智能市场的综合状况和市场格局。作为领先的大数据分析和指标平台供应商&#xff0c;跬智信息&#xff08;Kyligence&#xff09;凭借在 Data AI 领域的长期技术积…

1.33 定时器总结篇

文章目录 1、定时器相关描述1.1 定时器总类1.2 定时器整体与时钟来源1.2 定时对应总线时钟1.3定时器计数模式 1、定时器相关描述 1.1 定时器总类 定时器类型位数计数模式产生DMA请求捕获/比较通道互补输出特殊运用场景高级定时器TIM1、TIM816向上、向下、向上/下可以4有带可编…

Vue实现购物车页面

包括全选反选、数据的统计和本地持久化的处理。 html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"view…

289. 生命游戏 Python

文章目录 一、题目描述示例 1示例 2 二、代码三、解题思路 一、题目描述 根据 百度百科 &#xff0c; 生命游戏 &#xff0c;简称为 生命 &#xff0c;是英国数学家约翰何顿康威在 1970 年发明的细胞自动机。 给定一个包含 m n 个格子的面板&#xff0c;每一个格子都可以看成…

以“大数据+云服务”为核心的SaaS云平台 智慧校园管理平台 教师端、家长端、学生端全套源码

智慧校园全套源码 电子班牌系统源码 家校互联小程序源码 智慧校园以互联网为基础&#xff0c;以“大数据云服务”为核心&#xff0c;融合校园教学、管理、生活软硬件平台&#xff0c;定义智慧校园新生活。智慧校园管理平台管理者、教师、学生、家长提供一站式智慧校园解决方案…

基于Java+SpringBoot+Vue前后端分离的宠物领养系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 近年来&#xff0c;随…

和鲸ModelWhale与中科可控X系列异构加速服务器完成适配认证,搭载海光芯片,构筑AI算力底座

AIGC 时代&#xff0c;算力作为新型生产力&#xff0c;是国家和企业构建竞争优势的关键。而随着传统计算方式无法满足新时代激增的算力需求&#xff0c;计算场景的多元化和计算应用的复杂化推动了 CPUGPU 异构平台的加速组建。在此全球激烈角逐的大趋势下&#xff0c;我国信创产…

再有国产手机宣布自研操作系统,去美国化成潮流,谷歌自作自受

在小米正在大举宣传自研操作系统之后&#xff0c;日前vivo也宣布将自研操作系统&#xff0c;它们未来的目标都是从兼容安卓到实现真正的独立自主&#xff0c;摆脱对美国谷歌的依赖&#xff0c;实现类似于苹果的封闭系统。 国产手机自研操作系统&#xff0c;首先是考虑到系统的供…

事件知识图谱综述10.17+10.18 弃

事件知识图谱综述 摘要介绍2 什么是事件知识图谱&#xff1a;历史视角2.1 EKG的简要历史2.2 EKG的定义 什么是EKG&#xff1a;本体视角3.1 事件架构归纳 摘要 除了以实体为中心的知识&#xff0c;通常以知识图谱&#xff08;KG&#xff09;的形式组织外&#xff0c;事件也是世…

单身狗1和单身狗2(C语言版)

目录 1. 单身狗1 2. 单身狗2 1. 单身狗1 题目&#xff1a; 一个数组中只有一个数字是出现一次&#xff0c;其他所有数字都出现了两次。 编写一个函数找出这一个只出现一次的数字。 例如&#xff1a;有数组的元素是&#xff1a;1&#xff0c;2&#xff0c;3&#xff0c;4&a…

输入/输出的实用性-SOLIDWORKS 2024新功能

导出为 Extended Reality 您可以将 SOLIDWORKS CAD 文件导出为 .glb 或 .gltf 文件格式。 文件包含以下信息&#xff0c;例如几何体、外观、纹理、动画、运动算例、配置、显示状态、爆炸视图、光源 和元数据。对于大文件&#xff0c;导出支持 Draco&#xff0c;这是 .glb 和 .…

ChatGPT对于留学生论文写作有哪些帮助?

2022年11月&#xff0c;OpenAI公司的智能聊天产品ChatGPT横空出世&#xff0c;并两个月之内吸引了超过1亿用户&#xff0c;打破了TikTok&#xff08;抖音国际版&#xff09;9个月用户破亿的纪录。 划时代的浪潮 ChatGPT的火爆立即引起了全球关注并成为热门话题&#xff0c;它…

Mysql 内外链接,索引,事务,用户管理以及用C语言链接Mysql

文章目录 内外链接索引索引的相关操作全文索引 事务事务的操作事务的隔离级别隔离级别3个记录隐藏列字段 用户管理权限修改 使用C语言链接数据库 内外链接 两张表直接做笛卡尔积为内连接&#xff0c;之前使用的都是内连接 两张表&#xff1a;stu和exam 将两张表进行连接&…