CSS之项目练习小案例-05

其他 2018-08-18 05:14:22 阅读次数: 0

1.案例目录:

2.案例完成展示图:

 

 

 

3.细节展示:

 

 

 

4.GitHub源代码下载地址: https://github.com/godlikecheng/CSS_Code_Demo/

视频学习地址: https://ke.qq.com/course/276437

5.源代码:

(1)index.html

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

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/base.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/cssrest.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>哈工大出版社在线教育网</title>
</head>

<body>
  <!-- ==>S 网站头部区域 -->
  <div class="h-header">
    <!-- S 顶部的用户导航区域 -->
    <div class="top-nav clearfix">
      <!-- 网站的logo -->
      <div class="logo">
        <!-- h1标题仅仅用于SEO优化，不用于显示给用户看 -->
        <h1>哈工大出版社在线教育网</h1>
        <a href="#">
          <img src="./img/logo.jpg" alt="logo" title="哈工大出版社在线教育网">
        </a>
      </div>

      <!-- 右侧用户导航 -->
      <div class="user-nav">
        <ul class="clearfix">
          <!-- 消息框 -->
          <li class="msg-wrap user-nav-item">
            <a href="#" class="msg">
              <span class="msg-num">12</span>
            </a>
          </li>

          <!-- 用户头像和用户名 -->
          <li class="user user-nav-item">
            <a href="#">
              <img src="./img/a2.jpg" class="avatar" alt="李三的头像" title="头像">
            </a>
            <div href="#" class="username">
              张三
              <i class="triangle-down icon"></i>
              <ul class="user-menu-cover triangle-up-s cover">
                <li><a href="#">我的资源</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">个人资料</a></li>
                <li><a href="#">退出登陆</a></li>
              </ul>
            </div>
          </li>

          <!-- 选择教师端 -->
          <li class="user-nav-item"><a href="#">教师端 <i class="triangle-down icon"></i> </a></li>
        </ul>
      </div>

      <!-- 搜索框 -->
      <div class="search">
        <div class="course-sel">课程<i class="triangle-down icon-sel"> </i>
          <ul class="course-menu cover">
            <li><a href="#">课程</a></li>
            <li><a href="#">教材</a></li>
          </ul>
        </div>
        <input type="text">
        <a href="#" class="icon-serach"></a>
      </div>

    </div>
  </div>
  <!-- E 顶部的用户导航区域 -->

  <!-- S 主导航区 -->
  <div class="site-nav">
    <!-- 下面是做右侧背景的盒子 -->
    <div class="bg-red-wrap">
      <!-- 右侧背景的子盒子，是父盒子的50% -->
      <div class="bg-red"></div>
    </div>

    <div class="site-nav-wrap">
      <!-- 网站的主导航区域 -->
      <div class="main-nav">
        <ul class="main-nav-list">
          <li class="menu-item"><a href="#" class="cur">首页</a></li>
          <li class="menu-item"><a href="#">课程</a></li>
          <li class="menu-item"><a href="#">教材</a></li>
          <li class="menu-item">|</li>
          <li class="menu-item"><a href="#">我的学习</a></li>
        </ul>
      </div>

      <!-- 导航条的右侧的链接 -->
      <div class="aside-nav clearfix">
        <ul class="aside-nav-list">
          <li><a href="#">通过课程邀请码加入课程</a></li>
          <li> | </li>
          <li><a href="#">通过序列号获取资源权限</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- E 主导航区 -->
  </div>
  <!-- ==>E 网站头部区域 -->

  <!-- ==>S 网站banner区域 -->
  <div class="h-banner">
    <div class="slide-bar">
      <ul class="slide-bar-list">
        <li class="slide-btn">
          <a href="#" class="cur-banner"></a>
        </li>
        <li class="slide-btn">
          <a href="#"></a>
        </li>
        <li class="slide-btn">
          <a href="#"></a>
        </li>
      </ul>
    </div>
    <a href="#"><img class="banner-img" src="./img/banner.png" alt=""></a>
  </div>
  <!-- ==>E 网站banner区域 -->

  <!-- ==>S 网站主要列表区 -->
  <div class="h-main">
    <!-- 课程列表 -->
    <div class="course-list p-module">
      <!-- 课程列表的顶部 -->
      <div class="p-module-head clearfix">
        <div class="p-module-title">
          <h3>推荐课程</h3>
        </div>
        <a href="#" class="p-module-more">more...</a>
      </div>

      <!-- 课程列表区域 -->
      <div class="p-module-body clearfix">
        <ul class="p-list">
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>

          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>

          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>

          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>

          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
        </ul>

      </div>
    </div>

    <!-- 教材列表 -->
    <div class="book-list p-module">
      <div class="p-module-head clearfix">
        <div class="p-module-title">
          <h3>推荐教材</h3>
        </div>
        <a href="#" class="p-module-more">more...</a>
      </div>
      <!-- 课程列表区域 -->
      <div class="p-module-body clearfix">
        <ul class="p-list">
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p2.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">教材名称</a>
            </div>
          </li>
          <li class="p-list-item">
              <div class="p-img">
                <img src="./img/p2.jpg" alt="">
              </div>
              <div class="p-name">
                <a href="#">教材名称</a>
              </div>
            </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p4.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>

          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p4.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>

          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p2.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>

          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
          <li class="p-list-item">
            <div class="p-img">
              <img src="./img/p1.jpg" alt="">
            </div>
            <div class="p-name">
              <a href="#">课程名字课程名字课程米国i</a>
            </div>
          </li>
        </ul>

      </div>
    </div>
  </div>
  <!-- ==>E 网站主要列表区 -->

  <!-- ==>S 网站底部区域 -->
  <div class="h-footer">
    <p>Copyrignt © 2004-2016 哈尔滨工业大学出版社  版权所有    京ICP备11017824号-7</p>
  </div>
  <!-- ==>E 网站网站底部区域 -->

</body>

</html>

 

(2)index.css

@charset "utf-8";

body {
  color: #666;
  font-size: 12px;
}
a {
  color: #666;
}

/* S 顶部区域 */
.h-header {}

.h-header .top-nav {
  margin: 0 auto;
  width: 1190px;
  height: 74px;
  padding-top: 24px;
  /* border: 1px solid darkblue; */
}

/* S  logo区域 */
.h-header .top-nav .logo {
  float: left;
}
.top-nav .logo h1 {
  position: absolute;
  text-indent: -99999px;
}
/* E  logo区域 */


.h-header .top-nav .user-nav {
  float: right;
}

/* S 搜索框区域 */
.h-header .top-nav .search {
  margin: 0 265px 0 357px;
  padding-top: 10px;
  line-height: 30px;
  position: relative;
}

.h-header .search .course-sel {
  position: relative;
  display: inline-block;
  width: 66px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

/* 搜索文本框 */
.h-header .search input {
  display: inline-block;
  width: 400px;
  height: 30px;
  line-height: 30px;
  padding-left: 1em;
  border: 1px solid #e0e0e0;
}
.search .course-sel, .search input {
  float: left;
}

/* 下拉的三角形 */
.h-header .search .icon-sel {
  float: right;
  margin: 14px 6px;
}

/* 设置弹出的课程选择层 */
.h-header .search .course-menu {
  position: absolute;
  top: 30px;
  left: -1px;
  display: none;
}
.h-header .course-menu li {
  border: 1px solid #e0e0e0;
  width: 66px;
}
.h-header .course-menu li:hover {
  background-color: #ccc;
}

/* 当鼠标滑动到课程上的时候，弹出显示的选择层 */
.h-header .course-sel:hover .course-menu {
  display: block;
}


/* 设置放大镜的样式 */
.h-header .search .icon-serach {
  position: absolute;
  left: 445px;
  top: 15px;
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../img/search.gif) no-repeat;
}

/* E 搜索框区域 */

/* S 用户导航区域 */
.h-header .top-nav .user-nav {
  padding-top: 5px;
}
.h-header .user-nav .user-nav-item {
  float: left;
  height: 42px;
  line-height: 42px;
  margin: 0 11px 0 14px;
}
/* 设置头像 */
.h-header .user-nav .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.h-header .user-nav .username {
  display: inline-block;
}

.h-header .user-nav .user {
  position: relative;
}

/* 设置弹出来的用户的菜单 */
.h-header .user-nav .user-menu-cover {
  position: absolute;
  left: 0;
  top: 40px;
  display: none;
  z-index: 1000;
}

.user-nav .user:hover .user-menu-cover {
  display: block;
}
/* 设置用户菜单弹出的层li */
.user-menu-cover li {
  display: block;
  border: 1px solid #f1f1f1;
  width: 124px;
  height: 40px;
  text-align: center;
}

.user-menu-cover li:hover {
  background-color: #cecece;
}

/* 设置消息li */
.h-header .user-nav .msg-wrap {
  position: relative;
  top: 15px;
  width: 34px;
  height: 40px;
  background: url('../img/sprite-msg.png') no-repeat left top;
}
/* 设置消息数字 */
.h-header .user-nav .msg {
  position: relative;
  top: -19px;
  right: -15px;
  display: inline-block;
  width: 34px;
  height: 40px;
  line-height: 16px;
  padding-left: 4px;
  background: url('../img/sprite-msg.png') no-repeat left bottom;
}

.h-header .user-nav .msg-num {
  color: #fff;
}

.h-header .user-nav i.icon {
  display: inline-block;
  float: right;
  margin: 17px 0 0 7px;
}
/* E 用户导航区域 */

/* E 顶部区域 */

/* ================================================================== */
/* S 主导航区  */
/* 通栏盒子设置背景色 */
.site-nav {
  background-color: #3598db;
  font-size: 16px;
}

/* 设置背景右侧的红色div */
.site-nav .bg-red-wrap {  /*父盒子*/
  margin-left: 1190px;
  position: relative;
}

/* 设置背景的子盒子 */
.site-nav .bg-red-wrap .bg-red {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 60px;
  background-color: #e7594d;
}

/* 版心盒子 */
.site-nav .site-nav-wrap {
  margin: 0 auto;
  height: 60px;
  width: 1190px;
}

.site-nav li, .site-nav a {
  color: #fff;
}
/* 左侧主导航*/
.site-nav .main-nav {
  float: left;
  height: 60px;
  line-height: 60px;
}
.site-nav .main-nav .menu-item {
  float: left;
  margin-right: 10px;
}

.site-nav .menu-item a {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0 22px;
  border-radius: 3px;
}

.site-nav .menu-item a.cur {
  background: #2db0f9;
}

.site-nav .menu-item a:hover {
  background: #2db0f9;
}

/* 右侧附属导航 */
.site-nav .aside-nav {
  float: right;
  padding-left: 20px;
  background-color: #e7594d;
}

.site-nav .aside-nav li {
  float: left;
  line-height: 60px;
  height: 60px;
  margin-left: 20px;
}

/* E 主导航区  */
/* ====================================================================== */
/* S banner区域 */
.h-banner {
  overflow: hidden;
  height: 404px;
  width: 100%;
  position: relative;
  background-color: #61caff;
}

.h-banner .banner-img {
  width: 100%;
}

.h-banner .slide-bar {
  position: absolute;
  left: 50%;
  margin-left: -45px;
  z-index: 100;
  top: 376px;
  width: 90px;
  height: 14px;
  /* background-color: #d09; */
}

.h-banner .slide-bar .slide-btn {
  float: left;
}

.h-banner .slide-btn a {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('../img/ico_circle.png') no-repeat -73px 0;
  margin-right: 15px;
}

.h-banner .slide-btn a.cur-banner, .h-banner .slide-btn a:hover {
  background: url('../img/ico_circle.png') no-repeat -58px -22px;
}

/* E banner区域 */
/* ===================== S 课程列表区域 ========================================== */
.h-main .course-list, .h-main .book-list {
  margin: 0 auto;
  width: 1190px;
  padding-top: 40px;
}

/* 设置课程列表的标题 */
.p-module .p-module-head {
  font-size: 22px;
  height: 22px;
  color: #1a1a1a;
}
.p-module .p-module-head .p-module-title {
  float: left;
  padding-left: 18px;
  height: 22px;
  line-height: 22px;
  border-left: 7px solid #2db0f9;
}

/* more超级链接处理 */
.p-module .p-module-head .p-module-more {
  float: right;
  line-height: 22px;
  font: 12px;
  color: #5da7df;
}

/* 设置课程列表项 */
.p-module .p-module-body {
  overflow: hidden;
}

.p-module .p-module-body .p-list-item {
  padding-top: 30px;
  margin: 0 14px;
  font-size: 14px;
  line-height: 28px;
  color: #1a1a1a;
  float: left;
}

.p-module .p-list-item img {
  height: 180px;
  width: 207px;
  border: 1px solid #e1e1e1;
}

/* ======================E 课程列表=============================================== */


/* ======================S 底部区域================================================ */
.h-footer {
  background: #373a43;
  height: 141px;
  text-align: center;
  padding-top: 44px;
  font-size: 16px;
  color: #fff;
}
/* ======================E 底部区域================================================ */

 

(3)base.css

@charset "utf-8";
/*
* 一般情况下，所有页面的根样式都会写在这里面。Common.css
*/

/* 倒三角 */
.triangle-down {
  border: 5px solid #666;
  border-style: solid dashed dashed;
  border-color: #666 transparent transparent;
  width: 0;
  height: 0;
}

/* 单三角 */
.triangle-up-s {
  position: relative;
}
.triangle-up-s:before, .triangle-up-s:after {
  content: " ";/*一定要给content，不然不显示*/
  border: 6px solid #f1f1f1;
  border-style: dashed dashed solid;
  border-color: transparent transparent #f1f1f1;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: -12px;
}

.triangle-up-s:after {
  border-color: transparent transparent #fff;
  top: -10px;
}

.clearfix:befor, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
  height: 0;
  line-height: 0;
  visibility: hidden;
}

/* 弹出的层的基类 */
.cover {
  /* 设置弹出来的层的背景色为白色。 */
  background-color: #fff;
}

 

(4)cssrest.css(所有网站通用CSS初始化布局样式)

@charset "utf-8";
html, input {
  background-color: #fff;
  color: #000;
  font-size: 12px
}

body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,
p,blockquote,th,td,pre,xmp {
  margin: 0;
  padding: 0
}

body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp {
  line-height: 1.5;
  font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif
}

h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select {
  font-size: 100%
}

h1,h2,h3,h4,h5,h6 {
  font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif
}

h1,h2,h3,h4,h5,h6,b,strong {
  font-weight: normal
}

address,cite,dfn,em,i,optgroup,var {
  font-style: normal
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left
}

caption,th {
  text-align: inherit
}

ul,ol,menu {
  list-style: none
}

fieldset,img {
  border: 0
}

img,object,input,textarea,button,select {
  vertical-align: middle
}

article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu {
  display: block
}

audio,canvas,video {
  display: inline-block;
  *display: inline;
  *zoom: 1
}

blockquote:before,blockquote:after,q:before,q:after {
  content: "\0020"
}

textarea {
  overflow: auto;
  resize: vertical
}

input,textarea,button,select,a {
  outline: 0 none
}

button::-moz-focus-inner,input::-moz-focus-inner {
  padding: 0;
  border: 0
}

mark {
  background-color: transparent
}

a,ins,s,u,del {
  text-decoration: none
}

sup,sub {
  vertical-align: baseline
}

CSS基础学习:

(1)  CSS的选择器和优先级-01

(2)  CSS的颜色和文本-02

(3)  CSS的/盒模型/盒边框/内外边距/浮动/定位方式/层次划分/案例等 -03

(4)  CSS的背景效果和CSS画三角圆角等案例 -04

猜你喜欢

转载自blog.csdn.net/qq_40820862/article/details/81629332
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022