流体布局mooc网项目演示资源-CSDN文库

共30个文件

jpg：9个

png：7个

css：7个

72 浏览量 2024-11-24 09:58:01 上传评论收藏 1.22MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

流体布局.zip （30个子文件）

流体布局

.vscode

settings.json 40B

css

course.css 744B

tabbar.css 450B

layout.css 625B

reset.css 714B

header.css 987B

slider.css 39B

icons

iconfont.ttf 13KB

iconfont.css 11KB

iconfont.woff2 7KB

iconfont.svg 66KB

iconfont.eot 13KB

iconfont.woff 8KB

index.html 6KB

images

course_free

2.jpg 28KB

1.jpg 84KB

3.jpg 48KB

4.jpg 36KB

logo.png 7KB

course_coding

2.jpg 40KB

1.jpg 93KB

6.png 17KB

5.png 31KB

4.png 80KB

3.jpg 94KB

slider

2.jpg 68KB

3.png 160KB

1.jpg 91KB

7.png 165KB

5faa6d2809bc21e806860232.png 156KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>流体布局</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/slider.css"> <link rel="stylesheet" href="css/course.css"> <link rel="stylesheet" href="icons/iconfont.css"> <link rel="stylesheet" href="css/tabbar.css"> <style> </style> </head> <body>  <header class="header-layout">  <div class="header"> <a href="./index.html" class="header-logo"> <img src="./images/logo.png" alt="" class="header-logo-img"> </a> <button id="header-toggle" class="header-toggle"> <span class="header-toggle-bar"></span> <span class="header-toggle-bar"></span> <span class="header-toggle-bar"></span> </button> </div> </header>  <div class="main-layout">  <div class="slider-layout"> <img src="images/slider/1.jpg" alt=""> </div>  <div class="course-layout">  <div class="course"> <h2 class="course-title">免费课程</h2> <ul class="course-list"> <li class="course-item"> <a href=""> <p class="course-pic"> <img src="./images/course_free/1.jpg" alt="" class="course-img"> </p> <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p> <p class="course-price">免费</p> </a> </li> <li class="course-item"> <a href=""> <p class="course-pic"> <img src="./images/course_free/2.jpg" alt="" class="course-img"> </p> <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p> <p class="course-price">免费</p> </a> </li> <li class="course-item"> <a href=""> <p class="course-pic"> <img src="./images/course_free/3.jpg" alt="" class="course-img"> </p> <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p> <p class="course-price">免费</p> </a> </li> <li class="course-item"> <a href=""> <p class="course-pic"> <img src="./images/course_free/4.jpg" alt="" class="course-img"> </p> <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p> <p class="course-price">免费</p> </a> </li> </ul> </div> </div>  <div class="course-layout"> <div class="course"> <h2 class="course-title">实战课程</h2> <ul class="course-list"> <li class="course-item"> <a href=""> <p class="course-pic"> <img src="./images/course_free/1.jpg" alt="" class="course-img"> </p> <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p> <p class="course-price">免费</p> </a> </li> <li class="course-item"> <a href=""> <p class="course-pic"> <img src="./images/course_free/2.jpg" alt="" class="course-img"> </p> <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p> <p class="course-price">免费</p> </a> </li> <li class="course-item"> <a href=""> <p class="course-pic"> <img src="./images/course_free/3.jpg" alt="" class="course-img"> </p> <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p> <p class="course-price">免费</p> </a> </li> <li class="course-item"> <a href=""> <p class="course-pic"> <img src="./images/course_free/4.jpg" alt="" class="course-img"> </p> <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p> <p class="course-price">免费</p> </a> </li> </ul> </div> </div>  <div class="tabbar-layout"> <div class="tabbar"> <a href="index.html" class="tabbar-item tabbar-item-active"> <i class="iconfont icon-home"></i> <span>首页</span> </a> </div> <div class="tabbar"> <a href="index.html" class="tabbar-item"> <i class="iconfont icon-search"></i> <span>搜索</span> </a> </div> <div class="tabbar"> <a href="index.html" class="tabbar-item"> <i class="iconfont icon-personal"></i> <span>我的</span> </a> </div> </div> </div>  </body> </html>

评论收藏

内容反馈