学成在线首页案例

2021/10/12 23:16:42

编程Tag： Font li 首页 height 在线 float color margin 学成

本文主要是介绍学成在线首页案例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

学成在线案例

必备知识：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></a>
            </li>
            <li>
              <a href="#">小米华为中信<span>&gt;</span></a>
            </li>
          </ul>
        </div>
        <div class="course">
          <h2>我的课程表</h2>
          <div class="bd">
            <ul>
              <li>
                <h4>继续学习程序语言</h4>
                <p>正在学习-使用对象</p>
              </li>
              <li>
                <h4>继续学习程序语言</h4>
                <p>正在学习-使用对象</p>
              </li>
              <li>
                <h4>继续学习程序语言</h4>
                <p>正在学习-使用对象</p>
              </li>
            </ul>
            <a class="more" href="#">全部课程</a>
          </div>
        </div>
      </div>
    </div>
    <!-- E banner部分 -->

    <!-- S 精品推荐 -->
    <div class="goods w">
      <h3>精品推荐</h3>
      <ul>
        <li><a href="#">javejs</a></li>
        <li><a href="#">javecss</a></li>
        <li><a href="#">javestml</a></li>
        <li><a href="#">jave</a></li>
        <li><a href="#">jave</a></li>
      </ul>
      <div class="mod">修改兴趣</div>
    </div>
    <!-- E 精品推荐 -->

    <!-- S box 核心内容 -->
    <div class="box w">
      <div class="box-hd">
        <h3>精品推荐</h3>
        <a href="#">查看全部</a>
      </div>
      <div class="box-bd">
        <ul class="clearfix">
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
          <li>
            <img src="./images/pic.png" alt="#" />
            <h4>jlj发放机老街老街方式防方式发送提问守打法</h4>
            <p>高级<span> · 1125人在学习</span></p>
          </li>
        </ul>
      </div>
    </div>
    <!-- E box 核心内容 -->

    <!-- S footer 底部 -->
    <div class="footer">
      <div class="w">
        <div class="copyright">
          <img src="./images/logo.png" alt="" />
          <p>
            学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
            © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
          </p>
          <a class="app" href="#">下载APP</a>
        </div>
        <div class="links">
          <dl>
            <dt>关于学成网</dt>
            <dd><a href="#">关于</a></dd>
            <dd><a href="#">管理团队</a></dd>
            <dd><a href="#">工作机会</a></dd>
            <dd><a href="#">客户服务</a></dd>
            <dd><a href="#">帮助</a></dd>
          </dl>
          <dl>
            <dt>关于学成网</dt>
            <dd><a href="#">关于</a></dd>
            <dd><a href="#">管理团队</a></dd>
            <dd><a href="#">工作机会</a></dd>
            <dd><a href="#">客户服务</a></dd>
            <dd><a href="#">帮助</a></dd>
          </dl>
          <dl>
            <dt>关于学成网</dt>
            <dd><a href="#">关于</a></dd>
            <dd><a href="#">管理团队</a></dd>
            <dd><a href="#">工作机会</a></dd>
            <dd><a href="#">客户服务</a></dd>
            <dd><a href="#">帮助</a></dd>
          </dl>
        </div>
      </div>
    </div>
    <!-- E footer 底部 -->
  </body>
</html>

CSS 样式代码

css 通用代码

/* 清除浮动 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* 清楚内外边距 */
* {
  padding: 0;
  margin: 0;
}
/* 版心 */
.w {
  width: 1200px;
  margin: auto;
}
/* 去除小圆点 */
li {
  list-style: none;
}
/* 去除超链接下划线 */
a {
  text-decoration: none;
}

css 代码

/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
/* 清楚内外边距 */
* {
  padding: 0;
  margin: 0;
}
/* 版心 */
.w {
  width: 1200px;
  margin: auto;
}
/* 去除小圆点 */
li {
  list-style: none;
}
/* 去除超链接下划线 */
a {
  text-decoration: none;
}

/* 头部导航 */
body {
  background-color: #f3f5f7;
}
.header {
  height: 42px;
  margin: 30px auto;
}
.logo {
  float: left;
  width: 198px;
  height: 42px;
  background: url(./images/logo.png);
}
.nav {
  float: left;
  margin-left: 60px;
}
.nav ul li {
  float: left;
  margin: 0 15px;
}
.nav ul li a {
  display: inline-block;
  height: 42px;
  padding: 0 10px;
  line-height: 42px;
  font-size: 18px;
  color: #050505;
}
.nav ul li a:hover {
  border-bottom: 2px solid #00a4ff;
  color: #00a4ff;
}
/* 搜索框 */
.search {
  float: left;
  width: 412px;
  height: 42px;
  background-color: skyblue;
  margin-left: 50px;
}
.search input {
  float: left;
  width: 361px;
  height: 40px;
  border: 1px solid #00a4ff;
  border-right: 0;
  font-size: 14px;
  color: gray;
  text-indent: 15px;
}
.search input:focus {
  outline: none;
}
.search button {
  float: left;
  width: 50px;
  height: 42px;
  background: url(./images/btn.png);
  border: 0;
}
.user {
  line-height: 42px;
  float: right;
  margin-right: 30px;
  font-size: 14px;
  color: red;
}
.user img {
  vertical-align: middle;
}

/* banner部分 */
.banner {
  height: 421px;
  background-color: #1c036c;
}
.banner .w {
  height: 421px;
  background: url(./images/banner2_20190819_210028.png) no-repeat top center;
}
.subnav {
  float: left;
  width: 190px;
  height: 421px;
  background-color: rgba(0, 0, 0, 0.3);
}
.subnav ul li {
  height: 45px;
  line-height: 45px;
  padding: 0 20px;
}
.subnav ul li a:hover {
  color: #00a4ff;
}
.subnav ul li a {
  font-size: 14px;
  color: #fff;
}
.subnav ul li a span {
  float: right;
}
.banner .course {
  float: right;
  width: 230px;
  height: 300px;
  background-color: #fff;
  margin-top: 50px;
}
.banner .course h2 {
  height: 48px;
  background-color: #9bceea;
  line-height: 48px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.banner .course .bd {
  padding: 0 20px;
}
.banner .course .bd li {
  padding: 14px 0;
  border-bottom: 1px solid #ccc;
}
.banner .course .bd h4 {
  font-size: 16px;
  color: #4e4e4e;
}
.banner .course .bd p {
  font-size: 12px;
  color: #a5a5a5;
}
.banner .course .bd .more {
  display: inline-block;
  height: 38px;
  width: 100%;
  text-align: center;
  line-height: 38px;
  color: #00a4ff;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #32b6ff;
  margin-top: 5px;
}

/* 精品推荐 */
.goods {
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  margin-top: 10px;
  box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.2);
}
.goods h3 {
  float: left;
  margin-left: 30px;
  font-size: 16px;
  color: #00a4ff;
}
.goods ul {
  float: left;
  margin-left: 30px;
}
.goods ul li {
  float: left;
}
.goods ul li a {
  padding: 0 30px;
  font-size: 16px;
  color: #050505;
  border-left: 1px solid gray;
}
.goods .mod {
  float: right;
  margin-right: 30px;
  font-size: 14px;
  color: #00a4ff;
}

/* 核心内容 */
.box {
  margin-top: 30px;
}
.box .box-hd {
  height: 45px;
}
.box .box-hd h3 {
  float: left;
  font-size: 20px;
  color: #494949;
}
.box .box-hd a {
  float: right;
  font-size: 12px;
  color: #a5a5a5;
  margin: 10px 30px 0 0;
}
.box-bd ul {
  width: 1225px;
}
.box-bd ul li {
  float: left;
  width: 228px;
  height: 270px;
  background-color: #fff;
  margin-right: 15px;
  margin-bottom: 15px;
}
.box-bd ul li img {
  width: 100%;
}
.box-bd ul li h4 {
  margin: 20px 20px 20px 25px;
  font-size: 14px;
  color: #050505;
  font-weight: 400;
}
.box-bd ul li p {
  margin: 0 20px 0 25px;
  font-size: 12px;
  color: #ff7c2d;
}
.box-bd ul li p span {
  color: #999;
}

/* footer 底部 */
.footer {
  height: 415px;
}
.footer .w {
  padding-top: 35px;
}
.copyright {
  float: left;
}
.copyright p {
  /* 上右下左 顺时针 */
  font-size: 12px;
  color: #666;
  margin: 21px 0 15px 0;
}
.copyright .app {
  display: inline-block;
  width: 118px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  border: 1px solid #00a4ff;
  font-size: 16px;
  color: #00a4ff;
}
.links {
  float: right;
}
.links dl {
  float: left;
  margin-left: 100px;
}
.links dl dt {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}
.links dl dd a {
  font-size: 12px;
  color: #333;
}

学成在线案例效果图

在这里插入图片描述

头部导航

  • 使用了浮动使四个盒子一行显示
  • a 链接转换为行内块元素 , 不给宽度 , 设置一个左右内边距 , 加一个下边框 . 做成了下划线效果
  • 利用链接伪类选择器 hover 做一个鼠标悬停效果
  • 输入框右边框 为 0 ,
  • 输入框和按钮属于行内块元素 , 中间默认会有空隙 , 使用浮动去除空隙
  • 按钮有一个默认边框 , 手动修改边框为 0
  • input:focus 伪类选择器修改点击后输入框的边框线为0
  • vertical-align: middle; 图片和文字的中线对齐

banner

  • 使用浮动使盒子一行显示
  • 使用连接伪类选择器 hover 做一个鼠标悬停效果
  • 课表里面的 a 转为行内块元素 , 设置宽高文本水平垂直居中

精品推荐

  • 利用浮动使三个块元素一行显示
  • li 设置一个左外边距
  • a 设置一个左右边距 , 加一个左边框

核心内容

  • 子元素 li 浮动后父元素 ul 要清除浮动 , 不清除浮动会影响后面元素 (li浮动后不占位置 , 后面的元素会顶上来 , 占用 li 的位置)

  • ul 宽度设置超25px , 就可以忽略最后一列 li 的右外边距了 , 不用单独去修改 li 的外边距 .

  • 图片的宽度给 100% 让它撑满父盒子 , 就不怕图片显示不全或者太小

footer 底部

  • 为例避免外边距合并 盒子塌陷 , 给里面的子盒子设置 padding-top上内边距
  • 使用自定义列表 dl dt dd
  • 使用浮动


这篇关于学成在线首页案例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程