css 作业 2

文章目录

前言

昨天写了前面三次作业,今天把剩下的七个作业写完

第四题

http://127.0.0.1:5500/index1.html,就用这个网址查看代码在网页的展示效果

代码评测过不了,但是代码没有问题,试了好几个浏览器,也尝试了手机端,不管了

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 300px;
            height: 300px;
        }

        div:nth-child(1) {
            border-width: 10px;
            border-style: solid dotted inset dashed;
            border-color: blue red blue red;
            border-radius: 50%;
        }

        div:nth-child(2) {
            border: solid 3px black;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

第五题

修改之前的网页

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            display: block;
            width: 500px;
            height: 500px;
            padding: 10px;
            margin: 20px;
            background-color: lightblue;
        }

        .inline-block-div {
            display: inline-block;
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            background-color: blue;
            color: white;
        }

        span {
            display: inline;
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 20px;
            margin-right: 20px;
            background-color: bisque;
            color: green;
        }

        .block-div {
            display: block;
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            background-color: blue;
            color: white;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="inline-block-div">div-1</div>
        <div class="inline-block-div">div-2</div>
        <div class="inline-block-div">div-3</div>
        <br>
        <span>span-1</span>
        <span>span-2</span>
        <span>span-3</span>
        <br>
        <div class="block-div">
            123456789101112
        </div>
    </div>
</body>

</html>

第六题

修改之前

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: lightsalmon;
        }

        div:nth-child(1) {
            padding: 10px 20px 30px 40px;
            margin: 10px 20px 30px 40px;
        }

        div:nth-child(2) {
            margin: 0 auto;

        }
    </style>
</head>

<body>
    <div>文本1</div>
    <div>文本2</div>
</body>

</html>

第七题

修改之前

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 300px;
            height: 300px;
            padding: 10px;
            margin: 10px;
            background-color: lightblue;
            border: solid 10px gray;
        }

        div:nth-child(1) {
            box-sizing: content-box;
        }

        div:nth-child(2) {
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
</body>

</html>

第八题

修改之前效果

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            height: 2000px;
            margin: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
        }

        div:nth-child(1) {
            position: static;
        }

        div:nth-child(2) {
            position: relative;
            left: 50px;
            top: 15px;
        }

        div:nth-child(3) {
            position: absolute;
            background-color: rgba(0, 0, 255, 0.5);
            left: 30px;
            top: 30px;
        }

        div:nth-child(4) {
            position: fixed;
            background-color: rgba(0, 255, 0, 0.5);
            left: 100px;
            top: 250px;
        }

        div:nth-child(10) {
            position: sticky;
            background-color: rgba(255, 0, 0, 0.5);
            bottom: 10px;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</body>

</html>

修改之后

第九题

修改之前

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            width: 500px;
            height: 500px;
            background-color: lightblue;
        }

        .item {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: lightcoral;
            float: left;
        }

        .next-line {
            width: 150px;
            height: 150px;
            background-color: rgba(0, 0, 255, 0.5);
            clear: left;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="next-line"></div>
    </div>
</body>

</html>

修改之后的样式

第十题(子标签)

修改之前的样式

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            display: flex;
            width: 50%;
            height: 500px;
            background-color: lightblue;
            margin: 10px;
        }

        .container>div {
            width: 120px;
            height: 120px;
        }

        .container>div:nth-child(odd) {
            background-color: lightsalmon;
        }

        .container>div:nth-child(even) {
            background-color: lightgreen;
        }

        .container:nth-child(1) {
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: flex-start;
        }

        .container:nth-child(2) {
            flex-direction: row-reverse;
            flex-wrap: nowrap;
        }

        .container:nth-child(2)>div:nth-child(odd) {
            flex-grow: 3;
            flex-shrink: 3;
        }

        .container:nth-child(2)>div:nth-child(even) {
            flex-grow: 1;
            flex-shrink: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>

    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

</html>

修改之后的样式

相关推荐
慧一居士17 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead19 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app