学成在线项目-轮播图banner

1、效果图如下

2、html代码如下：

<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="./css/index.css"><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>
</head><body><!-- 网站的首页，所有网站的首页都叫index.html，因为服务器找首页都是找index.html --><!-- 布局，从上到下，从左到右 --><!-- css:浮动/display；盒子模型；文字样式 --><!-- 头部header：负责头部区域的样式，wrapper只负责版心的效果 --><div class="header wrapper"><h1><a href="#"><img src="./images/logo.png" alt=""></a></h1><!-- 导航 --><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" placeholder="输入关键词"><button></button></div><!-- 用户 --><div class="user"><img src="./images/user.png" alt=""><span>汪涛</span></div></div><!-- ===============================第二篇博客的html代码===================--><!-- 轮播图banner --><div class="banner"><div class="wrapper"><div class="left"><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="#">前端开发<span>></span></a></li><li><a href="#">前端开发<span>></span></a></li></ul></div><div class="right"><h2>我的课程表</h2><div class="content"><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl></div><a href="#" class="more">全部课程</a> </div></div></div></body></html>

3、css部分的代码

/* index.css是用来美化首页的 */
* {margin: 0;padding: 0;/* 内减模式 */box-sizing: border-box;
}/* 去除小li的前面的点 */
li {list-style: none;
}
/* 去掉超链接的下划线 */
a {text-decoration: none;
}.clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both;}.body {background-color: rgb(248, 245, 242);
}.wrapper {width: 1200px;margin: 0 auto;/* background-color: antiquewhite; */
}.header {height: 42px;margin: 30px auto;
}h1{float: left;
}/* 导航 */
.nav {float: left;margin-left: 70px;height: 42px;
}
.nav li {float: left;margin-right: 26px;
}.nav li a {display: block;padding: 0 9px;height: 42px;line-height: 42px;/* border-bottom: 2px solid #00a4ff; */font-size: 18px;color: #050505;
}/* 鼠标移动到标签上，变成蓝色 */
.nav li a:hover {border-bottom: 2px solid #00a4ff;
}.search {float: left;margin-left: 59px;width: 412px;height: 40px;border: 1px solid #00a4ff;
}.search input {float: left;padding-left: 20px;/* 左右加一起的尺寸要小于等于410 */width: 360px;height: 38px;border: 0;
}/* 控制placeholder的样式 */
.search input::placeholder {font-size: 14px;color: #bfbfbf;
}.search button {float: left;width: 50px;height: 38px;background-image: url(../images/btn.png);border: 0;
}.user {float: right;margin-right: 35px;height: 42px;line-height: 42px;
}.user img {/* 调节图片垂直对齐方式, middle:居中 */vertical-align: middle;
}
/*=============================第二篇博客==========================================*/
/* 轮播图  中间的蓝色的大背景*/
.banner {height: 420px;background-color: #1c036c;
}/* 第二层的版心图宽度在wrapper中已经搞过了。自代会继承，就不需要单独设置 */
.banner .wrapper {height: 420px;background-image: url("../images/banner2.png");
}.banner .wrapper .left {float: left;/* 文字离上下距离为0左右距离是20像素 */padding: 0 20px;width: 190px;height: 420px;/* 背景是黑色的，但是是0.3的透明度 */background-color: rgba(0,0,0, 0.3);/* 行高属于控制文字的属性, 能继承 */line-height: 44px;
}.banner .left a {font-size: 14px;color: #fff;}.banner .left span {float: right;
}.banner .left a:hover {color: #00a4ff;
}.banner .right {/* 靠着右边浮动 */float: right;width: 228px;height: 300px;background-color: #FFF;/* 盒子离上边距离为50px */margin-top: 50px;
}.banner .right h2 {/* 设置h2 标签的高度 */height: 48px;background-color: #9bceea;font-size: 18px;/* 设置字体的高度和h2的高度是一样的，就能实现居中 */line-height: 48px;text-align: center;color: white;
}.banner .right .content {/*设置字体离边框的距离*/padding: 0 18px;
}.banner .right .content dl {padding: 12px 0;border-bottom:2px solid #e5e5e5;
}.banner .right .content dt {font-size: 16px;color: #4e4e4e;
}.banner .right .content dd {font-size: 14px;color: #4e4e4e;
}.banner .right .more {display: block;border: #00a4ff;margin: 0 20px;height: 40px;width: 200px;/* 设置边框 */border: 1px solid #00a4ff;margin-top: 10px;line-height: 40px;text-align: center;
}

4、效果图如下：

学成在线项目-轮播图banner相关推荐

学成在线项目note
目录一.index.html 1.头部header 2.轮播图banner 3.精品推荐 4.精品推荐课程 5.footer 二.index.css 1.重要的代码一.index.html < ...
HTML+CSS实战——学成在线项目（含源码、素材、psd文件）
文章目录准备工作版心和清除默认样式 header布局 logo和nav布局搜索--布局和文本框用户区域 banner布局精品推荐版权区域项目源码--点击下载准备工作版心和清除默认样式 ...
黑马程序员HTML+CSS学成在线项目
/*美化首页*/ *{margin: 0;padding: 0;box-sizing: border-box; }li{list-style: none; } a{text-decoration: n ...
项目轮播图功能实现和导航栏的实现
项目轮播图功能实现和导航栏的实现轮播图功能安装依赖模块上传文件相关配置注册home子应用创建轮播图的model模型创建Banner的序列化器创建Banner的视图类配置Banner的路 ...
黑马学成在线--项目环境搭建
完整版请移步至我的个人博客查看:https://cyborg2077.github.io/ 学成在线–项目环境搭建学成在线–内容管理模块学成在线–媒资管理模块学成在线–课程发布模块学成在线–认 ...
学成在线项目开发技巧整理---第一部分
学成在线项目开发技巧整理---第一部分 1.数据字典 2.http-client远程测试插件,可以保存测试数据 3.三种跨域解决 4.具有多层级数据查询思路 5.Mybaits分页插件原理 6.根据文 ...
怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
web前端必学功法之一：轮播图
web前端必学功法之一:轮播图效果演示: <style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none; ...
前端开发——轮播图banner
前端开发--轮播图banner 使用的是swiper.css.要修改的点: ①img的src,其中width和height也可作出相应改变 ②根据所需轮播的图片数量在class值为swiper-wra ...

学成在线项目-轮播图banner

学成在线项目-轮播图banner

1、效果图如下

2、html代码如下：

3、css部分的代码

4、效果图如下：

学成在线项目-轮播图banner相关推荐

最新文章

热门文章