由HTML+CSS做成的一个简单网页（学成在线）

南山月！

已于 2022-04-23 20:28:10 修改

阅读量5.1k

点赞数 7

分类专栏：前端文章标签： html5 css3 chrome

于 2022-04-03 17:21:48 首次发布

本文链接：https://blog.csdn.net/wym123_/article/details/123940352

版权

写在前面的话：在跟着黑马程序员视频学习的时候，做的一个由简单HTML+CSS知识组成的一个简单小网页分享给大家，可以供新手学习。

网页界面如下

（用到的相关图片是自己胡乱做的，不太好看，大家可以自行更换）：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA57uZ5LqR6ZqQ5Yqg5rK5,size_20,color_FFFFFF,t_70,g_se,x_16

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>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 网站的首页，所有网站的首页都叫index.html，因为服务器找首页都是找index.html -->
    <!-- 布局；从外到内，从上到下，从左到右 -->
    <!-- css：浮动/display;盒子模型;文字样式 -->

    <!--头部header:负责头部区域的样式，wrapper只负责版心效果  -->
    <div class="header wrapper">
        <h1>
            <a href="#"><img src="./images/logo.png" alt="标题"></a>
        </h1>
        <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="">
            <span>小屁孩</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="#">UI设计<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>></s