css 学成在线案例

最新推荐文章于 2023-11-25 23:01:28 发布

myaijarvis

最新推荐文章于 2023-11-25 23:01:28 发布

阅读量122

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/Jruo911/article/details/115691515

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

该网页设计包含了典型的头部布局，包括logo、导航栏、搜索框和用户模块。头部区域使用了HTML div元素和class属性进行结构划分，同时展示了基础的导航链接和用户登录状态。页面的其他部分如banner、精品推荐和主体内容没有详细展开，但可以推测是网页的主要展示区。整体设计符合常规网站布局，便于用户交互。

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

链接：https://www.bilibili.com/video/BV14J4114768?p=200

页面布局思路

在这里插入图片描述

头部

在这里插入图片描述

<!-- 1.头部区域开始啦 -->
<div class="header w">
    <!-- logo部分 -->
    <div class="logo">
        <img src="images/logo.png" alt="">
    </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" value="输入关键词">
        <button></button>
    </div>
    <!-- 用户模块 -->
    <div class="user">
        <img src="images/user.png" alt="">
        qq-lilei
    </div>
</div>
<!-- 头部区域结束啦 -->