正文

新手必看：前端HTML+CSS实战测试题，轻松提升技能

/0 浏览量
0820

一、HTML基础题

1.1 HTML文档的基本结构

题目描述： 请写出HTML文档的基本结构。

答案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1.2 HTML标签的嵌套

题目描述： 请使用HTML标签创建一个简单的网页，包含标题、段落、列表和图片。

答案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    <img src="image.jpg" alt="图片描述">
</body>
</html>

二、CSS基础题

2.1 CSS选择器

题目描述： 请使用CSS选择器设置标题字体为红色，段落字体为蓝色。

答案：

h1 {
    color: red;
}

p {
    color: blue;
}

2.2 CSS盒子模型

题目描述： 请使用CSS设置一个盒子的宽度、高度、内边距、边框和边距。

答案：

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 20px;
}

三、实战测试题

3.1 制作一个响应式导航菜单

题目描述： 请使用HTML和CSS制作一个响应式导航菜单，当屏幕宽度小于600px时，菜单项变为堆叠显示。

答案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式导航菜单</title>
    <style>
        /* 基本样式 */
        .nav {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav li {
            display: inline-block;
        }
        .nav a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: black;
        }
        /* 响应式样式 */
        @media (max-width: 600px) {
            .nav li {
                display: block;
            }
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">联系</a></li>
    </ul>
</body>
</html>

3.2 制作一个轮播图

题目描述： 请使用HTML、CSS和JavaScript制作一个简单的轮播图。

答案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        /* 轮播图样式 */
        .carousel {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        .carousel img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .carousel .dot {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        .carousel .dot span {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
        .carousel .dot span.active {
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <img src="image1.jpg" alt="图片1">
        <img src="image2.jpg" alt="图片2">
        <img src="image3.jpg" alt="图片3">
        <div class="dot">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        var index = 0;
        var dots = document.querySelectorAll('.carousel .dot span');
        var images = document.querySelectorAll('.carousel img');
        function changeImage() {
            dots[index].classList.remove('active');
            images[index].style.display = 'none';
            index = (index + 1) % images.length;
            dots[index].classList.add('active');
            images[index].style.display = 'block';
        }
        setInterval(changeImage, 3000);
    </script>
</body>
</html>

通过以上实战测试题，相信你已经对前端HTML+CSS有了更深入的了解。希望这些题目能帮助你提升技能，祝你在前端开发的道路上越走越远！

-- 展开阅读全文 --