前端CSS小作业练习(二)

题目要求

设计出和图片相同的内容

  1. CSS布局与定位基本用法
  2. 层定位
  3. 图片如下>>>
    前端CSS小作业练习(二)_第1张图片前端CSS小作业练习(二)_第2张图片

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


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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">1div>
        <div class="redDiv">2div>
        <div class="redDiv">3div>
        <div class="redDiv">4div>
    div>
body>

html>

前端CSS小作业练习(二)_第3张图片

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


<html lang="en">

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

<body>
  <div>
    <div>
        <h2>HTMLh2>
        <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>CSSh2>
        <p>层叠样式表(英文全称Cascading Style Sheets)层叠样式表(英文全称Cascading Style Sheets)层叠样式表(英文全称Cascading Style
            Sheets)层叠样式表(英文全称Cascading Style Sheets)层叠样式表(英文全称Cascading Style Sheets)p>
    div>
  div>
body>

html>

前端CSS小作业练习(二)_第4张图片

你可能感兴趣的:(前端_CSS3,前端_HTML5)