学成在线首页案例

学成在线案例

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

具体代码如下 :

代码

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>学成在线首页</title>
    <!-- <link rel="指定链接类型" href="需加载资源的地址"> -->
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <!-- S 头部导航 -->
    <div class="header w">
      <!-- logo部分 -->
      <div class="logo">
        <!-- <img src="./images/logo.png" alt=""> -->
      </div>
      <!-- 导航栏 -->
      <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="#" />
        lon-fei
      </div>
    </div>
    <!-- E 头部导航 -->

    <!-- S banner部分 -->
    <div class="banner">
      <!-- 版心 -->
      <div class="w">
        <div class="subnav">
          <ul>
            <li>
              <a href="#">小米手机 <span>&gt;</span></a>
            </li>
            <li>
              <a href="#">小米手<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">小米手机<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">小米手机<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">小米手机商城<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">小米<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">小米手机<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">小米手机<span>&gt;</span>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值