二十四学成在线案例_banner部分
Posted 上善若水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了二十四学成在线案例_banner部分相关的知识，希望对你有一定的参考价值。
效果
banner制作
代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学车在线首页</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 1.头部区域开始啦 -->
<div class="header w">
<!-- logo部分 -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 导航栏部分 nav -->
<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="">
qq-lilei
</div>
</div>
<!-- 头部区域结束啦 -->
<!-- 2. banner部分start -->
<div class="banner">
<!-- 版心 -->
<div class="w">
<div class="subnav">
<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>
<!-- course 课程表模块 -->
<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 href="#" class="more">全部课程</a>
</div>
</div>
</div>
</div>
<!-- banner部分end -->
</body>
</html>
index.css
*
margin: 0;
padding: 0;
.w
width: 1200px;
margin: auto;
body
background-color: #f3f5f7;
li
list-style: none;
a
text-decoration: none;
.clearfix:before,.clearfix:after
content:"";
display:table;
.clearfix:after
clear:both;
.clearfix
*zoom:1;
.header
height: 42px;
/* background-color: pink; */
/* 注意此地方会层叠 w 里面的margin */
margin: 30px auto;
.logo
float: left;
width: 198px;
height: 42px;
.nav
float: left;
margin-left: 60px;
.nav ul li
float: left;
margin: 0 15px;
.nav ul li a
display: 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搜索模块 */
.search
float: left;
width: 412px;
height: 42px;
margin-left: 70px;
.search input
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
.search button
float: left;
width: 50px;
height: 42px;
/* 按钮button默认有个边框需要我们手动去掉 */
border: 0;
background: url(images/search.png);
.user
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
/* banner区域 */
.banner
height: 421px;
background-color: #1c036c;
.banner .w
height: 421px;
background: url(images/banner2.png) no-repeat top center;
.subnav
float: left;
width: 190px;
height: 421px;
background: rgba(0,0,0, 0.3);
.subnav ul li
height: 45px;
line-height: 45px;
padding: 0 20px;
.subnav ul li a
font-size: 14px;
color: #fff;
.subnav ul li a span
float: right;
.subnav ul li a:hover
color: #00a4ff;
.course
float: right;
width: 230px;
height: 300px;
background-color: #fff;
/* 浮动的盒子不会有外边距合并的问题 */
margin-top: 50px;
.course h2
height: 48px;
background-color: #9bceea;
text-align: center;
line-height: 48px;
font-size: 18px;
color: #fff;
.bd
padding: 0 20px;
.bd ul li
padding: 14px 0;
border-bottom: 1px solid #ccc;
.bd ul li h4
font-size: 16px;
color: #4e4e4e;
.bd ul li p
font-size: 12px;
color: #a5a5a5;
.bd .more
display: block;
height: 38px;
border: 1px solid #00a4ff;
margin-top: 5px;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-size: 16px;
font-weight: 700;
以上是关于二十四学成在线案例_banner部分的主要内容，如果未能解决你的问题，请参考以下文章
Python爬虫(二十四)_selenium案例：执行javascript脚本