学成在线简易小网站

最新推荐文章于 2024-02-04 20:54:19 发布

VIP文章邻家的疯丫头

最新推荐文章于 2024-02-04 20:54:19 发布

阅读量2.6w

点赞数 15

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

本文链接：https://blog.csdn.net/qq_45495031/article/details/105306841

版权

学成在线案例

必备知识：html和css基础知识，主要考察html标签和css基础样式的使用

具体代码如下：
html部分

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线首页</title>
    <!-- 利用link标签引入css样式 -->
    <!-- <link rel="指定链接类型" href="需加载资源的地址"> -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 头部区域开始啦 -->
    <!-- 头部区域为一个大盒子里面包含了四个盒子，分别为logo区域、导航栏区域nav、搜索块区域search、用户模块user -->
    <div class="header w">
        <!-- 插入logo样式 -->
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <!-- 导航栏部分nav -->
        <!-- 用li+a进行实现导航栏,给li加浮动让其在一行上显示，把a转换成块级元素，对其进行定义高度，宽度由内容决定 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索模块search -->
        <!-- 利用表单标签<input type="属性值" value="默认显示的文字"> -->
        <div class="search">
            <input type="text" value="请输入关键词">
            <button></button>
        </div>
        <!-- 用户模块user -->
        <div class="user">
            <!-- vertical-align使图片与文字中部对齐 -->
            <img src="images/user.png" alt="" style="vertical-align: middle;">
            qq-lishui
        </div>
    </div>
    <!-- 头部区域结束啦 -->


    <!-- banner部分开始了 -->
    <!-- banner部分为一个大盒子里面包括两个大盒子，左边subnav,右边course -->
    <div class="banner">
        <!--确定版心 -->
        <div class="w">
            <div class="subnav">
                <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></a></li>
                    <li><a href="#">产品<span>></span></a></li>
                </ul>
            </div>
            <!-- course模块 -->
            <!-- 课程表分为三部分，标题h2,内容ul，简单链接a -->
            <div class="course">

最低0.47元/天解锁文章

邻家的疯丫头

关注

15
点赞
踩
45

收藏

觉得还不错? 一键收藏
38
评论
学成在线简易小网站

学成在线案例必备知识：html和css基础知识具体代码如下：html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
复制链接

扫一扫