BJFU2023Web前端实验二

Haanyu

已于 2023-05-23 20:13:57 修改

阅读量66

点赞数

分类专栏： Web前端开发文章标签：前端 html css

于 2023-05-23 19:53:00 首次发布

本文链接：https://blog.csdn.net/m0_74216578/article/details/130834127

版权

Web前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实验二：学会使用border-radius，使用CSS实现下拉列表

最终效果如图：

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>实验二</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="img">
            <img src="images/user.png" alt="users">
        </div>
        <br><br>
        <div class="bigbox">
            <div class="text">
                <h2>HTML</h2>
                <br>
                <p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
            </div>
            <div class="text">
                <h2>CSS</h2>
                <br>
                <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] 
                    CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
            </div>
            <div class="text">
                <h2>JavaScript</h2>
                <br>
                <p>JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

*{
    margin: 0 auto;
    padding: 0;
}

.container{
    margin: 0 auto;
    width: 800px;
    height: 800px;
    background-color: antiquewhite;
}

.img img{
    width: 200px;
    height: 200px;
    border-radius: 100px 100px;
    border: 1px solid;
}

.bigbox{
    width: 300px;
    border: 2px solid black;
}

.text{
    border: 2px solid black;
    width: 300px;
    height: 30px;
    overflow: hidden;
}

.text:hover{
    height: 300px;
    transition: all 1s ease-in-out;
}
h2:hover{
    background-color: rgb(106, 106, 236);
}

图片文件夹命名"images"