css的定位以及html课后作业

yangfeipancc

已于 2024-09-18 23:43:11 修改

阅读量1k

点赞数 9

文章标签： css html 前端

于 2024-09-18 23:23:46 首次发布

本文链接：https://blog.csdn.net/yangfeipancc/article/details/142346172

版权

定位

position

position 属性用于指定元素的定位类型。它决定了元素如何相对于其正常位置、父元素或浏览器窗口进行定位。CSS中有四种常见的定位类型：static、relative、absolute 和 fixed。

static（静态定位）

static 是元素的默认定位类型。在静态定位中，元素按照正常的文档流进行排列，不会受到 top、right、bottom 和 left 属性的影响。

.box {
    position: static;
}

relative（相对定位）

relative 是相对于元素自身正常位置的定位类型。在相对定位中，元素会相对于其正常位置进行定位，可以通过 top、right、bottom 和 left 属性来设置元素的偏移量。

.box {
    position: relative;
    top: 10px;
    left: 20px;
}

在这个例子中，.box元素会相对于其正常位置向下偏移 10px，向右偏移 20px。

absolute（绝对定位）

absolute 是相对于最近的非 static 定位祖先元素的定位类型。在绝对定位中，元素会相对于其最近的非 static 定位祖先元素进行定位，可以通过 top、right、bottom 和 left 属性来设置元素的偏移量。

.parent {
    position: relative;
}

.box {
    position: absolute;
    top: 10px;
    left: 20px;
}

在这个例子中，.box 元素会相对于其最近的非 static 定位祖先元素（.parent）向下偏移10px，向右偏移20px。

fixed（固定定位）

fixed 是相对于浏览器窗口的定位类型。在固定定位中，元素会相对于浏览器窗口进行定位，可以通过 top、right、bottom 和 left 属性来设置元素的偏移量。固定定位的元素会始终保持在浏览器窗口的指定位置，即使页面滚动也不会改变。

.box {
    position: fixed;
    top: 10px;
    left: 20px;
}

在这个例子中，.box 元素会相对于浏览器窗口向下偏移 10px，向右偏移 20px，并始终保持在浏览器窗口的指定位置。

总之，position 属性用于指定元素的定位类型，它决定了元素如何相对于其正常位置、父元素或浏览器窗口进行定位。在现代布局中，position 属性是实现各种定位效果的重要工具。

transfrom

transform 属性用于对元素进行二维或三维变换。它允许你旋转、缩放、倾斜或平移元素，从而创建各种视觉效果。transform 属性主要有以下几种变换类型：

translate（平移）

translate 变换用于在水平和垂直方向上平移元素。它可以接受两个参数，分别表示水平和垂直方向上的平移距离。

.box {
    transform: translate(50px, 100px);
}

在这个例子中，.box元素会在水平方向上平移50px，垂直方向上平移100px。

scale（缩放）

scale 变换用于缩放元素。它可以接受一个或两个参数，分别表示水平和垂直方向上的缩放比例。

.box {
    transform: scale(2, 1);
}

在这个例子中，.box 元素会在水平方向上放大 2 倍，垂直方向上保持不变。

rotate（旋转）

rotate 变换用于旋转元素。它接受一个角度参数，表示元素旋转的角度。

.box {
    transform: rotate(45deg);
}

在这个例子中，.box 元素会旋转45度。

skew（倾斜）

skew 变换用于倾斜元素。它可以接受两个参数，分别表示水平和垂直方向上的倾斜角度。

.box {
    transform: skew(30deg, 15deg);
}

在这个例子中，.box 元素会在水平方向上倾斜30度，垂直方向上倾斜15度。

matrix（矩阵）

matrix 变换用于通过矩阵来定义元素的变换。它接受六个参数，分别表示矩阵的六个元素。

.box {
    transform: matrix(1, 0, 0, 1, 50, 100);
}

在这个例子中，.box 元素会应用一个矩阵变换，该矩阵表示平移 50px 和 100px。

总之，transform 属性用于对元素进行二维或三维变换，它允许你旋转、缩放、倾斜或平移元素，从而创建各种视觉效果。在现代布局中，transform 属性是实现各种视觉效果的重要工具。

HTML课后作业

<!DOCTYPE html>

<head>

<style>

html{

height: 100%;

}

body{

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

</style>

</head>

<body>

<div>

</div>

我的世界

</div>

</body>

</html>

制作一个一直悬浮置顶的 TopBar，高度为8rem，背景色黑色，前景色白色，内容分左右两侧，左侧为 logo + 文字，右侧为导航栏菜单项：首页、新闻、游戏、教育、关于我们，默认 a 标签没有下划线，移上去后显示下划线

<!DOCTYPE html>

<head>

<title>World</title>

<style>

body{

margin: 0;

}

.box{

display: flex;

background-color: black;

color: white;

justify-content: space-between;

padding: 0 2rem;

height: 8rem;

align-items: center;

}

.left-side{

display: flex;

align-items: center;

}

.logo{

height: auto;

width: 10rem;

margin-right: 2rem;

}

.text{

font-size: 3rem;

}

.right-side ul{

display: flex;

padding: 0;

margin: 0;

list-style: none;

}

.right-side li{

margin-left: 3rem;

}

.right-side a{

text-decoration: none;

color: white;

font-size: 1rem;

}

.right-side a:hover{

text-decoration:underline;

}

</style>

</head>

<body>

</div>

<ul >

</ul>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

body{

margin: 0;

}

box-sizing: border-box;

}

ul{

list-style: none;

margin: 0rem;

padding: 1rem;

}

ul>li{

display: flex;

gap: 1rem;

margin-bottom: 1rem;

}

.img{

width: 6rem;

height: 6rem;

border-radius: 0.5rem;

}

.li-right{

flex-grow: 1;

border-bottom: 1px solid rgb(214, 212, 212);

display: flex;

justify-content: space-between;

margin-left: 0.8rem;

}

.li-title{

font-size: 2rem;

font-weight: bold;

}

.li-subtitle{

font-size: 1rem;

margin-left: 0.4rem;

margin-top: 0.9rem;

}

.li-km{

font-size: 1rem;

margin-left: 0.4rem;

margin-top: 0.9rem;

color: rgb(172, 171, 171);

flex-direction: row-reverse;

}

.icon{

display: flex;

flex-direction: row-reverse;

justify-content: space-between;

}

.dian{

background-color: rgb(239, 212, 179);

color: rgb(236, 163, 74);

margin-left: 0.5rem;

font-size: 0.6rem;

padding: 0.2rem;

}

.yu{

background-color: rgb(235, 162, 162);

color: rgb(202, 95, 95);

margin-left: 0.5rem;

font-size: 0.6rem;

padding: 0.2rem;

}

.wai{

background-color: rgb(136, 204, 235);

color: rgb(60, 112, 164);

margin-left: 0.5rem;

font-size: 0.6rem;

padding: 0.2rem;

}

</style>

</head>

<body>

<ul>

<li>

<div>

酥大娘中国烧饼

</div>

江宁区

</div>

<div>

点

</div>

2.6KM

</div>

</li>

<li>

<div>

砸砸嘴鸡米饭·庆小年下饭小火锅

</div>

江宁区

</div>

<div>

预

</div>

点

</div>

444KM

</div>

</li>

<li>

<div>

鲍厨娘

</div>

江宁区

</div>

<div>

点

</div>

3KM

</div>

</li>

<li>

<div>

旺福福串串

</div>

江宁区

</div>

<div>

点

</div>

5.3KM

</div>

</li>

<li>

<div>

一串宗师

</div>

江宁区

</div>

<div>

外

</div>

预

</div>

点

</div>

1.7KM

</div>

</li>

<li>

<div>

刘文祥麻辣烫

</div>

江宁区

</div>

<div>

外

</div>

点

</div>

2.4KM

</div>

</li>

<li>

<div>

桥头排骨女人街店

</div>

江宁区

</div>

<div>

预

</div>

点

</div>

2.5KM

</div>

</li>

</ul>

</body>

</html>

制作卡片

<!DOCTYPE html>

<head>

<title>Sample Layout</title>

<style>

box-sizing: border-box;

}

body{

margin: 0;

}

main{

padding: 1rem;

}

hr{

border-color: rgb(240, 248, 255, 0.238);

}

.card {

width: 40rem;

padding: 1rem;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}

.card>div{

padding: 0.5rem;

}

.card-head{

display: flex;

gap: 1rem;

}

.card-head-logo{

width: 5rem;

height: 5rem;

}

.card-head-logo>img{

width: 100%;

height: 100%;

object-fit: cover;

border-radius: 50%;

}

</style>

</head>

<body>

<main>

<div>

<div style="font-weight: bold;">Title</div>

<div style="font-size: 0.8rem; color: rgb(146, 147, 147);">April 01, 2024</div>

</div>

<hr>

<div style="font-size: 0.9rem; color: rgb(146, 147, 147);">我的世界我的世界我的世界我</div>

<hr>

</div>

</main>

</body>

</html>

yangfeipancc

关注

9
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

css的定位以及html课后作业

定位

position

static（静态定位）

relative（相对定位 ）

absolute（绝对定位）

fixed（固定定位）

transfrom

translate（平移）

rotate（旋转）

skew（倾斜）

matrix（矩阵）

HTML课后作业

relative（相对定位）