静态网页练习（html+css）

最新推荐文章于 2022-08-02 11:01:51 发布

小x今天暴富了吗

最新推荐文章于 2022-08-02 11:01:51 发布

阅读量583

点赞数

文章标签： html5

本文链接：https://blog.youkuaiyun.com/Sawada00/article/details/124234782

版权

本文详细介绍了如何使用HTML5和CSS创建静态网页，涵盖了基本语法、布局技巧以及样式美化等方面，适合初学者进行网页制作练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!-- 导航条 -->
    <div class="nav wrapper">
        <!-- logo -->
        <h1>
            <a href="#"><img src="./images/logo.png" alt=""></a>
        </h1>
        <!-- 功能 -->
        <div class="header">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索框 -->
        <div class="search">
            <input type="text" placeholder="输入关键词"><button></button>
        </div>
        <!-- user -->
        <div class="user">
            <img src="./images/user.png" alt="">
            <span>admin</span>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="wrapper">
            <!-- 左侧列表 -->
            <div class="left">
                <ul>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">后端开发<span>></span></a></li>
                    <li><a href="#">移动开发<span>></span></a></li>
                    <li><a href="#">人工智能<span>></span></a></li>
                    <li><a href="#">商业预测<span>></span></a></li>
                    <li><a href="#">云计算&大数据<span>></span></a></li>
                    <li><a href="#">运维&从测试<span>></span></a></li>
                    <li><a href="#">UI设计<span>></span>

最低0.47元/天解锁文章