青训营X豆包MarsCode 技术训练营第2课 ｜ 豆包MarsCode AI 刷题

用户59107331801
VIP.1 初学乍练
4 阅读4分钟

这是我写的一个个人的网页用了HTML和css，自己不会用js语言基础，课上的内容听不懂，这门课程确实不适合新手直接使用，因此无法实现动态页面渲染效果导致了页面缺失了灵动性整体上我用了grid 布局虽然比较麻烦但是grid 布局可以描绘出其他的布局可以做flex box排版，我也用了position:fixed，使部分内容脱离了常规流,悬浮在常规流上，一直位于页面左上角，左上角这部分是个人简历。中间内容没大填。

`

` div { width: 2000px; height: 5000px; background-color: #fff; background-size: 4em 4em; } 

    .lian {
        width: 50px;
        height: 50px;
    }
    
    .zp {
        position: fixed;
        top: 50px;
        left: 10px;
    }
    
    .container {
        display: grid;
        grid-template-columns: 300px 400px 300px 1fr 1fr;
        grid-template-rows: 200px 400px 400px 400px 400px 1fr 1fr;
        position: relative;
        background-color: #fff;
    }
    
    .container1 {
        position: relative;
    }
    
    nav {
        position: fixed;
        line-height: 3;
        background: rgba(0, 0, 0, 0.3);
        width: 100%;
    }
    
    .go-top {
        position: fixed;
        right: 1em;
        bottom: 1em;
        color: #fff;
    }
    
    nav a {
        padding: 0 1em;
        color: rgba(255, 255, 255, 0.7);
    }
    
    nav a:hover {
        color: #fff;
    }
    
    body {
        margin: 0;
        font-size: 14px;
    }
    
    a {
        color: #fff;
        text-decoration: none;
    }
</style>

    <nav>
        <a href="file:///D:/gerenbk/boke01.html#">首页</a>
        <a href="C:\Users\HP\Desktop\3.html">现在的我</a>
        <a href="D:\nba1.html">曾经的我</a>
        <a href="">个人求学经历</a>
    </nav>
    <div1 style="background-color: aqua;" class="zp">头像<img src="https://ts4.cn.mm.bing.net/th?id=OIP-C.Uoz1-5uTFTJ7s8fymTUhYgAAAA&w=250&h=250&c=8&rs=1&qlt=90&r=0&o=6&dpr=1.5&pid=3.1&rm=2" width="100px" height="100px">
        <p>qq:1336832764</p>
        <a href="https://www.bilibili.com/">我的B站</a>
        <p>我的联系方式：13645472316</p>
    </div1>
    <div2 style="background-color: rgb(13, 6, 235); grid-area: 2/2/3/3;" class="container1">
        <div2 style="background-color: black; position: relative; top: 10px; left: 10px; width: 50px;height: 50px;">

        </div2>
    </div2>


    <a href="#" class="go-top">返回顶部</a>
</div>





<a href="#" class="go-top">返回顶部</a>
` 用AI搞得求通过

这是一个基本的 HTML 页面结构，包含了<!DOCTYPE html>声明以及<html>、<head>和<body>等主要标签。

<head>部分

  • 样式定义：在<style>标签内定义了一系列的 CSS 样式规则。

    • 针对div元素：设置了宽度为2000px，高度为5000px，背景颜色为白色（#fff），背景尺寸为4em 4em。
    • 类名为.lian的元素：宽度和高度都设置为50px。
    • 类名为.zp的元素：设置为固定定位（position: fixed），距离顶部50px，左边10px。
    • 类名为.container的元素：使用了网格布局（display: grid），定义了具体的列和行模板，并且设置了相对定位（position: relative），背景颜色为白色。
    • 类名为.container1的元素：设置了相对定位。
    • nav元素：固定定位在页面顶部，设置了行高为3，背景为半透明黑色（rgba(0, 0, 0, 0.3)），宽度为100%。
    • 类名为.go-top的元素：固定定位在页面右下角（right: 1em，bottom: 1em），颜色为白色。
    • 对于nav中的a标签：设置了内边距（padding: 0 1em），默认颜色为半透明白色（rgba(255, 255, 255, 0.7)），鼠标悬停时颜色变为白色。
    • 对于页面中的a标签（除了nav内的部分情况）：颜色设置为白色，并且无文本装饰（text-decoration: none）。
    • 针对body元素：设置了外边距为0，字体大小为14px。

<body>部分

  • 导航栏（nav） ：包含了几个导航链接，分别指向不同的页面，如首页（file:///D:/gerenbk/boke01.html#）、现在的我（C:\Users\HP\Desktop\3.html）、曾经的我（D:\nba1.html）等，但其中 “个人求学经历” 链接的href属性值有误（应该是href而不是herf）。

  • 头像及相关信息部分（.zp） ：包含一个头像图片（img标签），设置了宽度和高度为100px，来源是一个指定的 URL 地址。同时还展示了 QQ 号、B 站链接以及联系方式等信息，但这里的外层标签应该是div而不是div1（可能是笔误），并且同样存在herf属性的拼写错误（应该是href）。

  • 带有特定样式的div2元素：设置了背景颜色为蓝色（rgb(13, 6, 235)），并通过grid-area属性指定在网格布局中的位置。内部还嵌套了一个更小的div2元素，设置了黑色背景，并且有相对定位的偏移。

  • 返回顶部链接（.go-top） ：页面中有两个 “返回顶部” 的链接，都指向#，当点击时应该会触发回到页面顶部的操作（通常需要配合 JavaScript 来实现完整功能）。

总体来说，这段代码构建了一个具有一定布局和基本功能的网页框架，但存在一些拼写错误（如herf应为href）以及可能的标签命名不规范（如div1、div2）等小问题，需要修正这些问题以确保页面能正确渲染和交互。

avatar
文章
阅读
粉丝