整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天学会html+css，第九天固定定位。
Redmi手机电视笔记本。
今天的学习目标是右侧悬浮工具栏用固定定位实现，它是相对于浏览器窗口的定位方式。
·盒子里的内容用a标签，一个图片加一行文字，此时它的位置在最底部。
·然后给它写上固定定位样式，右侧距离0，下面距离70像素，加上背景颜色，看下效果。
·开始给a标签写样式，固定宽高，text-renderin默认下划线去掉，里面内容居中，看下效果。
·图片写样式之前也要加上这行代码，然后让它的尺寸变小一点，并且左右居中，看下效果。
·文字的颜色、大小也调整一下。
·最后给a标签加上边框、内边距，让里面内容往下挪一挪。
到此，今天的学习完成。
SS中的浮动（Floats）、定位（Positioning）和显示（Display）属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景，帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。
浮动是CSS中用于实现元素排列的一种方式，它可以让元素脱离正常的文档流，并可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位属性允许你控制元素的位置，它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display属性是CSS中最重要的用于控制布局的属性之一，它定义了元素如何显示在页面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在这个例子中，我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航，以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚，并使用固定定位为页面添加了一个始终可见的固定元素。最后，我们使用了overflow: hidden;来清除头部中浮动元素的影响。
浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性，前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展，我们也需要不断学习和适应新的CSS特性，以保持我们技能的前沿性。
篇文章主要给大家介绍一下使用html+css来模仿制作小米官方网站右侧的浮动框。我们来看下边的这个浮动框，位于小米官网的右侧并且随着页面的滚动，一直浮动在右侧不变；
我们通过上边的图片可以看出图片有5个单独的块元素组成，每个块元素鼠标经过都有一个单独的颜色变为黄色的效果，然后第一个块元素鼠标经过还会在左侧弹出更多内容。接下来我们简单说一下制作所用到的核心知识。
1、列表标签（dl dd dt）的使用，使用dl和dd来完成前边5个相同模块的制作
2、鼠标经过（hover）的使用，第一个元素鼠标经过左侧显示，这个跟我们之前将的导航菜单类似，还有鼠标经过文字以及图片改变颜色，这里可以使用hover之后改变背景图片来实现；
3、浮动（fixed）的使用，该内容一直浮动在网页右侧，跟随页面一起滚动，我们可以使用position:fixed来实现；
大体了解了我们所要使用的知识点之后，我们就可以开始根据图片上的内容来制作我们所需要的页面了，具体的实现代码就如下方所示：（首先写一个div盒子，看到列表形式，直接使用dl和dd，然后每个元素内部有文字和图片，使用h4标签和span标签来存放图片和文字内容，就这么搞定了哈哈），来看代码吧。
html代码挺简单的，我们啪啪敲完之后呢，剩下的就是书写css代码，来完成图片所示的布局样式的制作了。那么我们的css代码就如下图所示：（最外层box直接来个fixed和right、bottom配合，让其浮动在右侧，然后写写dl和dd的宽高，控制控制span的背景，随便写写hover事件，ok完成了）。不多说了，看代码吧。
好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信【网站源码】即可。
每日金句：只有知道别人心里在想什么，你才能得到你想要的。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
*请认真填写需求信息，我们会在24小时内与您取得联系。
