学成在线HTML+css静态页面制作

最新推荐文章于 2023-05-21 12:15:52 发布

Perth.v

最新推荐文章于 2023-05-21 12:15:52 发布

阅读量860

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_58464482/article/details/122959777

版权

本文详细介绍了如何使用HTML和CSS技术来创建静态网页，从基础的HTML标签到CSS样式布局，逐步讲解了页面设计和构建的全过程，适合初学者入门和进阶提升。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!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="style.css"/>
</head>
<body>
    <div class="header w">
        <!--logo部分-->
        <div class="logo"><img src="images/logo.png" alt="logo"></div>
        <!--nav部分-->
        <div class="nav">
            <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>
        <!--用户模块-->
        <div class="user">
            <img src="images/user.png" alt="头像" style="vertical-align:middle">
            v
        </div>
    </div>
    <!--banner-->
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发</a></li>
                    <li><a href="#">后端开发</a></li>
                    <li><a href="#">移动开发</a></li>
                    <li><a href="#">人工智能</a></li>
                    <li><a href="#">商业预测</a></li>
                    <li><a href="#">云计算&大数据</a></li>
                    <li><a href="#">运维&从测试</a></li>
                    <li>