CSS学习_04(案例)

最新推荐文章于 2024-09-29 09:53:09 发布

我会一直陪着你

最新推荐文章于 2024-09-29 09:53:09 发布

阅读量122

点赞数 5

分类专栏： HTML和CSS的学习文章标签：学习 css html5

本文链接：https://blog.csdn.net/qiwulmj/article/details/134233550

版权

下面让我们做个案例吧!!!!!!!!!!!!

学成在线案例

(图片不是重要的,你们随便找几张图片,用width和height调整宽高就ok)

THML的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/index.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="header wrapper">
        <h1><a href="#"><img src="./img/zu13.png" alt="tupain"></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="sousuo">
            <input type="text" placeholder="请输入关键字">
            <div class="sousuo_logo">
                <a href="#"><img src="./img/fa-search.png" alt="sousuo"></a>
            </div>
        </div>
        <div class="user">
            <img src="./img/touxiang.png" alt="user.pnd">
            <span>lilei</span>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="div1">
        <div class="zhuti 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="#">前端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                </ul>
            </div>
            <div class="right">
                <span>我的课程表</span>