CSS/HTML 简单样式配合PS做一个小实例(Html+Css)

最新推荐文章于 2025-04-07 16:52:26 发布

Coisini、

最新推荐文章于 2025-04-07 16:52:26 发布

阅读量877

点赞数 2

分类专栏： CSS/HTML 文章标签： CSS/HTML 简单样式配合PS做一个小实例(Html+Css) ps 实例

本文链接：https://blog.csdn.net/kclax/article/details/90750384

版权

这篇博客通过课后作业的形式，详细介绍了CSS中的相对定位和绝对定位概念。相对定位允许元素在其原始位置基础上进行偏移，但仍然保留其原有空间；而绝对定位则将元素从正常文档流中移除，不占用空间，基于最近的已定位祖先元素进行定位。文中通过代码示例和解释帮助读者理解这两种定位方式，并提醒了绝对定位可能与其他元素重叠的问题，强调了z-index属性在控制堆叠顺序中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

课后作业1

在这里插入图片描述

代码：

<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>无标题文档</title>
<style>
#title{
width:277px;
height:206px;
}
 #title-1{
width:277px;
height:206px;
background:url(img/wether.gif) no-repeat;
}
     #title-2{
width:277px;
height:39px;
background:#0664d6 url(img/sun.gif) no-repeat 228px 8px;
border-bottom:1px solid #0e2599;
}
 #title-3{
width:277px;
height:39px;
background:#0664d6 url(img/winter.gif) no-repeat 228px 8px;
border-top:#08aaf5 solid 1px;
border-bottom:1px solid #0e2599;
}
#title-4{
width:277px;
   height:39px;
background:#0664d6 url(img/winter.gif) no-repeat 228px 8px;
border-top:#08aaf5 solid 1px;
}
</style>
</head>

<body>
        <div id=“title”>
       <div id=“title-1”></div>
       <div id=