HTML课后练习

最新推荐文章于 2024-09-27 20:56:43 发布
最新推荐文章于 2024-09-27 20:56:43 发布
阅读量138 收藏
点赞数 1
文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CYL5913/article/details/142345595
版权 

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
    html{
        height: 100%;
    }
    body{
            margin: 0;
            height: 100%;
            display: flex;
            justify-content:center;
            align-items:center;
            flex-direction: column;
        }
   </style>
</head>
<body>
    <img src="./草.png" width="200" height="200">
    <p>我的世界</p>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>topbar</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .beijing {
            height: 5rem;
            background-color: black;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
        }
        .navbar {
            color: white;
            text-decoration: none;
            margin: 1rem;
        }
        .navbar:hover {
            text-decoration: underline;
        }
        .logo {
            display: flex;
            align-items: center;
        }
        .logo>img {
            width: 4rem;
            height: 4rem;
            margin-right: 1rem;
        }
    </style>
</head>
<body>
    <nav class="beijing">
        <div class="logo">
            <img src="./草.png" alt="Logo">
            <span>欢迎</span>
        </div>
        <div class="navbar-menu">
            <a href="#">首页</a>
            <a href="#">新闻</a>
            <a href="#">游戏</a>
            <a href="#">教育</a>
            <a href="#">关于我们</a>
        </div>
    </nav>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美团点餐</title>

    <style>
        * {
            box-sizing: border-box;
        }
        body{
            margin: 0;
            height: 100%;     
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 1rem;
        }
        ul>li{
            display: flex;
            margin-bottom: 1.5rem;
        }
        img{
            border-radius: 0.5rem;
            height: 5rem;
            width: 5rem;
        }
        .li-right{
            flex-grow: 1;
            margin-left: 0.8rem;
            display: flex;
            justify-content: space-between;
            border-bottom: 0.1rem solid rgb(237, 233, 233);
        }
        .title{
            font-size: 1rem;
            font-weight: bold;
        }
        .subtitle{
            font-size: 0.7rem;
            color: rgb(118, 115, 115);
            margin-left: 0.4rem;
            margin-top: 0.8rem;
        }
        .km{
            font-size: 0.7rem;
            color: rgb(118, 115, 115);
            margin-top: 0.8rem;
            display: flex;
            flex-direction: row-reverse;
        }
        .icon{
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
        }
        .dian{
            background-color: rgb(241, 222, 45);
            color: rgb(219, 154, 57);
            margin-left: 0.5rem;
            font-size: 0.6rem;
            padding: 0.2rem;
        }
        .yu{
            background-color: rgb(236, 177, 170);
            color: rgb(240, 89, 78);
            margin-left: 0.5rem;
            font-size: 0.6rem;
            padding: 0.2rem;
        }
        .wai{
            background-color: rgb(195, 200, 241);
            color: rgb(85, 74, 240);
            margin-left: 0.5rem;
            font-size: 0.6rem;
            padding: 0.2rem;
        }
    </style>

</head>
<body>
    <ul>
        <li>
            <div>
                <img src="./photo/苏.png" alt="酥大娘中国烧饼"> 
            </div>
            <div class="li-right">
                <div>
                    <div class="title">
                        酥大娘中国烧饼
                    </div>
                    <div class="subtitle">
                        江宁区
                    </div>
                </div>
                <div>
                    <div class="icon">
                        <div class="dian">
                            点
                        </div>
                    </div>
                    <div class="km">
                        2.6km
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div>
                <img src="./photo/咂.png" alt="咂咂嘴鸡米饭·庆小年下饭小火锅"> 
            </div>
            <div class="li-right">
                <div>
                    <div class="title">
                        咂咂嘴鸡米饭·庆小年下饭小火锅
                    </div>
                    <div class="subtitle">
                        江宁区
                    </div>
                </div>
                <div>
                    <div class="icon">
                        <div class="yu">
                            预
                        </div>
                        <div class="dian">
                            点
                        </div>
                    </div>
                    <div class="km">
                        444m
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div>
                <img src="./photo/鲍.png" alt="鲍厨娘"> 
            </div>
            <div class="li-right">
                <div>
                    <div class="title">
                        鲍厨娘
                    </div>
                    <div class="subtitle">
                        江宁区
                    </div>
                </div>
                <div>
                    <div class="icon">
                        <div class="dian">
                            点
                        </div>
                    </div>
                    <div class="km">
                        3km
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div>
                <img src="./photo/旺.png" alt="旺福福串串"> 
            </div>
            <div class="li-right">
                <div>
                    <div class="title">
                        旺福福串串
                    </div>
                    <div class="subtitle">
                        江宁区
                    </div>
                </div>
                <div>
                    <div class="icon">
                        <div class="dian">
                            点
                        </div>
                    </div>
                    <div class="km">
                        5.3km
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div>
                <img src="./photo/一.png" alt="一串宗师"> 
            </div>
            <div class="li-right">
                <div>
                    <div class="title">
                        一串宗师
                    </div>
                    <div class="subtitle">
                        江宁区
                    </div>
                </div>
                <div>
                    <div class="icon">
                        <div class="wai">
                            外
                        </div>
                        <div class="yu">
                            预
                        </div>
                        <div class="dian">
                            点
                        </div>
                    </div>
                    <div class="km">
                        1.7km
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div>
                <img src="./photo/刘.png" alt="刘文祥麻辣烫"> 
            </div>
            <div class="li-right">
                <div>
                    <div class="title">
                        刘文祥麻辣烫
                    </div>
                    <div class="subtitle">
                        江宁区
                    </div>
                </div>
                <div>
                    <div class="icon">
                        
                        <div class="wai">
                            外
                        </div>
                        <div class="dian">
                            点
                        </div>
                    </div>
                    <div class="km">
                        2.4km
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div>
                <img src="./photo/桥.png" alt="桥头排骨女人街店"> 
            </div>
            <div class="li-right">
                <div>
                    <div class="title">
                        桥头排骨女人街店
                    </div>
                    <div class="subtitle">
                        江宁区
                    </div>
                </div>
                <div>
                    <div class="icon">
                        <div class="yu">
                            预
                        </div>
                        <div class="dian">
                            点
                        </div>
                    </div>
                    <div class="km">
                        2.5km
                    </div>
                </div>
            </div>
        </li>
    </ul>
</body>
</html>

 

 

a1denzzz
关注
课后练习.html
10-10
课后练习.html
08-课后练习.html
09-21
08-课后练习.html
html3章课后练习作业
11-12
在本“HTML3章课后练习作业”中，我们可以深入理解并实践HTML的基本结构和元素，这将有助于掌握网页设计的核心技能。 HTML3章的学习涵盖了HTML的基础知识，包括但不限于以下几个方面： 1. **HTML文档结构**：每个...
ASP.NET课后练习
12-26
在本"ASP.NET MVC程序设计第三版马俊主编课后练习"中，我们将深入探讨ASP.NET的核心概念和技术，包括MVC模式、路由、控制器、视图、模型以及数据访问。 1. **ASP.NET MVC模式**：MVC（Model-View-Controller）是一...
第三天课后作业练习的练习答案展示
02-26
在这个“第三天课后作业练习”的场景中，我们可能涉及到一系列关于HTML的知识点，包括但不限于以下内容： 1. HTML基础结构：一个基本的HTML文件通常包含`<!DOCTYPE html>`声明，指示浏览器使用哪种HTML版本来解析...
day01
JiangMeiXue的博客
09-25 188
目录。
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。
李浩洋
09-24 226
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。up-form组件 :model=“formData” :rules=“rules”要赋初始值
Vue中集中常见的布局方式
张雨的博客
09-24 379
【代码】Vue中集中常见的布局方式。
webview2加载本地页面
qq_25160759的博客
09-23 621
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 416
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
前端全屏模式切换
yangyanqin2545的博客
09-27 115
【代码】前端全屏模式切换。
apply、call和bind的作用和区别
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
09-23 704
javascript中，apply、call和bind的作用和区别介绍。
DC00015基于java web校园网上购物系统
黄昏下的黎明的博客
09-24 647
DC00015【含配套文档】基于java web校园网上购物系统。
grpcweb 客户端请求grpc-java服务器
nddjava的专栏
09-24 377
1. 定义grpc proto文件：HelloWorld.proto。5.grpc-web代理：nginx。3. grpc-web js生成。2. java grpc服务。4. grpc-web代码。
WebGL阴影与后期处理
天涯学馆
09-24 153
在WebGL中实现更复杂的后期处理效果，通常会使用多个步骤，例如使用多个帧缓冲对象进行链式处理。它通过从光源视角渲染场景的深度信息，并在主渲染中使用这个深度信息来判断像素是否在阴影中。DOF（Depth of Field）模拟相机的焦距，使远离焦点的物体变得模糊。色调映射通常用于调整图像的动态范围，使其适应显示器的显示能力。WebGL还可以实现其他高级视觉效果，如SSAO（屏幕空间环境光遮蔽）、DOF（景深）、Bloom（光晕）等。SSAO是一种近似技术，用于模拟物体表面的阴影，增加场景的深度感。
卷轴模式开发的技术架构分析与源代码展示
weixin_43744973的博客
09-24 908
在软件开发中，"卷轴模式"（虽然不是一个广泛认知的术语，在此我们可以理解为一种类似于游戏或应用中内容逐步加载与展示的模式，类似于古代卷轴展开的方式）通常用于处理大量数据或内容，特别是当这些数据或内容不适合一次性加载到内存中时。这种模式在移动应用、网页应用以及游戏开发中尤为常见。本文将分析实现卷轴模式的技术renxb001架构，并通过一个简单的示例代码来展示其基本实现。
HTML·第三章课后练习题
MortalTom的博客
09-26 401
【代码】HTML·第三章课后练习题。
HTML基础用法介绍一
最新发布
xiao_yi666的博客
09-27 542
HTML5基础用法介绍，帮助小白快速了解基础操作，实现HTML5熟练掌握指日可待，快来看看吧！！！
nodejs fs 模块的简介与相关案例
正是修行时，正是修行时，正式修行时...
09-27 211
nodejs fs 模块的简介与相关案例
用多个HTML搭建一个简易的课程网站，包括首页，教师简介，课程简介，课后练习，在首页可以跳转到教师简介，课程简介，在课程简介可以跳转到课后练习，给出具体代码
05-29
好的，以下是一个简易的课程网站的HTML代码示例，包括首页、教师简介、课程简介和课后练习页面： 主页（index.html）： ```html <!DOCTYPE html> <html> <head> <title>课程网站</title> </head> <body> <header> <h1>欢迎来到课程网站</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="teacher.html">教师简介</a></li> <li><a href="course.html">课程简介</a></li> </ul> </nav> </header> <main> <h2>欢迎</h2> <p>这是一个简单的课程网站，提供课程学习和课后练习。</p> <p>请点击上面的链接选择您要了解的课程或教师简介。</p> </main> </body> </html> ``` 教师简介页面（teacher.html）： ```html <!DOCTYPE html> <html> <head> <title>教师简介 - 课程网站</title> </head> <body> <header> <h1>教师简介</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="teacher.html">教师简介</a></li> <li><a href="course.html">课程简介</a></li> </ul> </nav> </header> <main> <h2>教师简介</h2> <p>这是教师简介页面，介绍教师的背景和经历。</p> <p>请点击上面的链接选择您要了解的课程或返回主页。</p> </main> </body> </html> ``` 课程简介页面（course.html）： ```html <!DOCTYPE html> <html> <head> <title>课程简介 - 课程网站</title> </head> <body> <header> <h1>课程简介</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="teacher.html">教师简介</a></li> <li><a href="course.html">课程简介</a></li> </ul> </nav> </header> <main> <h2>课程简介</h2> <p>这是课程简介页面，介绍课程的内容和重点。</p> <p>请点击下面的链接进入课后练习或返回主页。</p> <a href="exercise.html">课后练习</a> </main> </body> </html> ``` 课后练习页面（exercise.html）： ```html <!DOCTYPE html> <html> <head> <title>课后练习 - 课程网站</title> </head> <body> <header> <h1>课后练习</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="teacher.html">教师简介</a></li> <li><a href="course.html">课程简介</a></li> </ul> </nav> </header> <main> <h2>课后练习</h2> <p>这是课后练习页面，提供课程练习题和答案。</p> <p>请点击上面的链接选择您要了解的课程或返回主页。</p> </main> </body> </html> ``` 请注意，以上代码只是示例，你可以根据你的需要进行修改和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值