前端CSS小作业练习（二）

最新推荐文章于 2024-06-23 10:20:32 发布

梦境工程师-335

最新推荐文章于 2024-06-23 10:20:32 发布

阅读量1.5k

点赞数

分类专栏：前端_CSS3 前端_HTML5 文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_41136216/article/details/106001105

版权

前端_CSS3 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端_HTML5

5 篇文章 1 订阅

订阅专栏

题目要求

设计出和图片相同的内容

CSS布局与定位基本用法
层定位
图片如下>>>

第一题我们可以将其分解为一个正方形的底，4个红色小正方形的角，父级采用相对定位，子级采用绝对定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: black;
        }

        .redDiv {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
        }

        .redDiv:nth-child(1) {
            top: 0;
            left: 0;
        }

        .redDiv:nth-child(2) {
            top: 0;
            right: 0;
        }

        .redDiv:nth-child(3) {
            bottom: 0;
            right: 0;
        }

        .redDiv:nth-child(4) {
            bottom: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="square">
        <div class="redDiv">1</div>
        <div class="redDiv">2</div>
        <div class="redDiv">3</div>
        <div class="redDiv">4</div>
    </div>
</body>

</html>

在这里插入图片描述

第二题直接来个左浮动，然后相对左侧20px的距离就ok了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            float: left;
            width: 400px;
            margin-left: 20px;
            background-color: #ddd;
        }
    </style>
</head>

<body>
  <div>
    <div>
        <h2>HTML</h2>
        <p>超文本标记语言(Hyper Text Markup language)，标准通用标记语言超文本标记语言(Hyper Text Markup language)，标准通用标记语言超文本标记语言(Hyper Text
            Markup language)，标准通用标记语言超文本标记语言(Hyper Text Markup language)，标准通用标记语言超文本标记语言(Hyper Text Markup
            language)，标准通用标记语言</p>
    </div>
    <div>
        <h2>CSS</h2>
        <p>层叠样式表(英文全称Cascading Style Sheets)层叠样式表(英文全称Cascading Style Sheets)层叠样式表(英文全称Cascading Style
            Sheets)层叠样式表(英文全称Cascading Style Sheets)层叠样式表(英文全称Cascading Style Sheets)</p>
    </div>
  </div>
</body>

</html>