css案例1：学成网在线教育平台首页01
2019-02-11 本文已影响0人
riverhh
简介
这是一个简单的案例会把之前博客中讲到的CSS的基本知识串起来，算是一个稍微综合一点的案例了！这里我会详细的每一部分的进行介绍！
分析首页的结构
学成网首页.jpg
从这张图中我们可以看到首页大致分为如下的几个部分：
- 导航栏部分
- 精品推荐部分
- 页面尾部部分
准备工作
CSS初始化
/* css初始化 */
* {
/* 清除所有HTML标记的默认边距 */
margin: 0px;
padding: 0px;
}
.clearfix:before,
.clearfix:after {
/* 清楚浮動 */
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
ul {
/* 清楚li的小圆点 */
list-style: none;
}
a { /* 超链接的样式 */
color: #050505;
text-decoration: none;
}
input {
border: 0; /* 所有的表单边框为0 */
box-sizing: border-box; /* CSS3盒子模型 border 和 padding 都包含到 width 里面去 */
}
.container { /*版心的宽度都是1200，所以集体声明*/
width: 1200px;
margin: 0 auto;
}
/* css初始化结束 */
确定版心的大小
可以使用PS的矩阵选框工具确定
版心的大小.png
如图所示版心的宽为1200px;
导航栏
导航栏的大小为1366px
导航栏的大小.png
可以分为四部分来做：logo、navbar、search、personal
页面结构部分：
<!-- 页面头 -->
<header>
<nav>
<!-- logo -->
<div class="logo">
<img src="images/logo_03.png" alt="">
</div>
<!-- 导航栏 -->
<div class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 个人中心部分 -->
<div class="personal">
<a href="#">个人中心<img src="images/ling_06.png" alt=""></a>
<a href="#"><img src="images/tou_03.png" > 刘德华</a>
</div>
<!-- 搜索框部分 -->
<div class="search">
<form action="">
<input type="text" placeholder="请输入关键字">
<input type="submit" value="">
</form>
</div>
</nav>
</header>
CSS的样式部分
/* 页面头开始 */
body {
background-color: #f3f5f7;
}
header {
height: 100px;
overflow: hidden; /* 嵌套的盒字margin合并消除影响 */
}
nav {
width: 1366px;
height: 42px;
margin: 30px auto; /*嵌套的子盒子margin合并*/
}
.logo {
float: left;
}
.navbar {
float: left;
height: 42px;
line-height: 42px; /*让文字水平居中，行高给父亲，行高可以继承*/
margin-left: 50px;
}
.navbar li {
float: left;
font-size: 16px;
}
.navbar li a{
display: block; /*行内元素给高需要转化为行内块*/
padding: 0 9px;/*行内元素不给上下内边距，左右给内边距*/
height: 42px;
}
.navbar li a:hover {
border-bottom: 1px solid #00a4ff; /*鼠标放入底边框*/
}
/* 搜索框部分 */
.search {
width: 410px;
height: 38px;
border: 1px solid #00a4ff;
float: right;
}
.search input[type=text] { /*属性选择器*/
width: 360px;
height: 38px;
padding-left: 20px;
box-sizing: border-box; /*css3的属性，防止padding撑大盒子*/
float: left; /*文本框属于行内元素，行内元素之间并排显示，中间有空隙，所以添加浮动*/
}
.search input[type=submit] {
width: 50px;
height: 38px;
float: left;
background: #00a4ff url(images/search_06.png) no-repeat center center;
}
/*个人中心部分*/
.personal {
float: right;
height: 42px;
line-height: 42px; /* 这个行高给父亲， 行高会继承 */
margin: 0 15px 0 35px; /* 上0 右 15 下0 左 35 */
}
.personal img {
margin: 0 8px;
vertical-align: middle; /*用来控制图片/表单与文字的对齐*/
}
/* 个人中心部分结束 */
其中需要注意的几个点是：
- 因为页面的底色不是白色所以给body一个大的背景色#f3f5f7
- 导航使用的是ul>li>a的形式
- head里面嵌套着nav盒子，使用overflow: hidden消除影响
- 是文字文水平居中对齐时，行高可以给父亲盒子，并且此时不用给父盒子高度，行高是可以继承的
-
box-sizing: border-boxcss3的属性，防止padding撑大盒子 -
vertical-align: middle用来控制图片/表单与文字的对齐
banner部分
结构
<!-- banner部分 -->
<div class="banner">
<div class="banner-in container">
<!-- 左侧导航栏 -->
<div class="slidebar">
<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="#">UI设计<span>></span></a></li>
<li><a href="#">产品<span>></span></a></li>
</ul>
</div>
<!-- 右侧课表 -->
<dl class="timetable">
<dt>我的课程表</dt>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</dd>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</dd>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</dd>
<dd>
<a href="#">全部课程</a>
</dd>
</dl>
<!-- 小圆圈 -->
<ul class="circle">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
css样式为：
/* banner开始 */
.banner {
height: 420px;
background-color: #1c036c;
}
.banner-in {
height: 420px ;
background: url(images/banner_03.png) 0 0 no-repeat;
position: relative;
}
.slidebar {
height: 420px;
width: 190px;
background-color: rgba(0,0,0,0.3); /* 盒字背景半透明*/
float: left;
}
.slidebar li a {
color: #fff;
font-size: 14px;
padding: 0 20px; /*上下0 左右20px*/
display: block;
height: 45px;
line-height: 45px; /*大多数情况下有了行高就不需要给定高度*/
}
.slidebar li a span {
float: right;
font-family: arial; /*符号一般使用这个字体*/
}
.slidebar li a:hover {
color: #00a4ff;
}
.timetable {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.timetable dt {
height: 50px;
background-color: #9bceea;
text-align: center; /*文字水平居中*/
line-height: 50px;
color: #fff;
font-weight: 700;
letter-spacing: 2px; /*设置字间距*/
margin-bottom: 5px;
}
.timetable dd {
width: 193px;
height: 60px;
margin: 0 auto;
border-bottom: 1px solid #ccc;
padding-top:12px;
box-sizing: border-box;
}
.timetable dd h4{
font-weight: normal;
font-size: 16px;
color: #4e4e4e;
}
.timetable dd p {
color: #a5a5a5;
font-size: 14px;
}
.timetable dd:last-child {
border: 0; /*消除最后一个底边框*/
}
.timetable dd a {
display: block;
height: 38px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-weight: 700;
}
.timetable dd a:hover {
background-color: #00a4ff;
color: #fff;
}
/* 小圆点模块 */
.circle {
width: 180px;
height: 22px;
position: absolute;
bottom: 10px;
left: 50%; /*父盒子宽度的一半*/
margin-left: -90px; /*自己宽度的一半*/
}
.circle li {
float: left;
width: 12px;
height: 12px;
margin: 6px 8px;
border-radius: 50%;
background-color: rgba(255,255,255,0.4);
}
/* banner结束 */
注意点：
- 因为banner里面有个透明的盒子，和课程表，使用子绝父相进行定位
- 盒子背景半透明的写法需要注意
-
font-family: arial; 符号一般使用这个字体 - 子盒子水平居中对齐的方法
精品推荐模块
结构
<!-- 精品推荐部分 -->
<div class="recommand container">
<a href="#">精品推荐</a>
<a href="#">Jquery</a>
<a href="#">Spark</a>
<a href="#">MySql</a>
<a href="#">javaWeb</a>
<a href="#">MySql</a>
<a href="#">javaWeb</a>
<a href="#">修改兴趣</a>
</div>
<!-- 精品推荐大模块 -->
<div class="recom-products container">
<!-- 头部 -->
<div class="recom-hd clearfix">
<h4>精品推荐</h4>
<a href="#">查看全部</a>
</div>
<!-- 精品推荐主题部分 -->
<div class="recom-bd clearfix">
<ul>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
</ul>
</div>
</div>
CSS样式：
/* 精品推荐开始 */
.recommand {
height: 60px;
background-color: #fff;
margin-top: 8px;
line-height: 60px;
/* 盒子阴影 水平位置 垂直位置 模糊距离 影子颜色 */
box-shadow: 0 2px 2px rgba(0,0,0,0.2)
}
.recommand a {
padding: 0 30px;
/* 行内元素可以设置border */
border-right: 1px solid #ccc;
}
.recommand a:hover {
color: #00a4ff;
}
.recommand a:first-child {
color: #00a4ff;
font-weight: 700;
}
.recommand a:last-child {
float: right;
border: 0;
color: #00a4ff;
}
.recom-products {
margin-top: 35px;
}
.recom-hd h4 {
float: left;
color: #494949;
}
.recom-hd a {
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 14px;
color: #a5a5a5;
}
.recom-hd a:hover {
color: #00a4ff;
}
.recom-bd ul li,
.prom-bd-l-bottom ul li {
width: 228px;
height: 270px;
background-color:#fff;
overflow: hidden; /*溢出的部分隐藏*/
/* box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影； */
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
float: left;
margin-right: 15px;
margin-top: 15px;
}
.recom-bd ul li:nth-child(5n) { /*第五个第十个的外边距为0*/
margin-right: 0;
}
.recom-bd ul li h5,
.recom-bd ul li p,
.prom-bd-l-bottom ul li h5,
.prom-bd-l-bottom ul li p {
padding: 0 20px 0 24px;
margin-top: 12px;
}
.recom-bd ul li h5,
.prom-bd-l-bottom ul li h5 {
line-height: 22px;
font-weight: normal;
font-size: 14px;
}
.recom-bd ul li p ,
.prom-bd-l-bottom ul li p {
font-size: 12px;
color: #999;
}
.recom-bd span,
.prom-bd-l-bottom ul li p span {
color: #ff7c2d;
}
/* 精品推荐结束 */
需要注意的是
- 精品推荐的大模块是使用的是父盒子不给高度，让子盒子撑大父盒子此时需要清除浮动
- 注意靠最右边的盒子是如何清除边距的
入门编程部分
结构
<!-- 编程入门 -->
<div class="programer container">
<!-- 头部 -->
<div class="progm-hd clearfix">
<h4>编程入门</h4>
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
<a href="#">查看全部</a>
</div>
<!-- 主题部分 -->
<div class="prom-bd clearfix">
<div class="prom-bd-l">
<img src="images/rumen.png" alt="">
</div>
<div class="prom-bd-r">
<div class="prom-bd-l-top">
<img src="images/rumen2.png" alt="">
</div>
<div class="prom-bd-l-bottom">
<ul>
<li>
<div class="over"><img src="images/rumen3.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/rumen3.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/rumen3.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="over"><img src="images/rumen3.png" alt=""></div>
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> • 1125人在学习</p>
</li>
</ul>
</div>
</div>
</div>
</div>
样式
/* 编程入门开始 */
.programer {
margin-top: 35px;
}
.progm-hd h4 {
float: left;
color: #494949;
margin-right: 352px;
}
.progm-hd > a {
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 14px;
color: #a5a5a5;
}
.progm-hd a:hover {
color: #00a4ff;
}
.progm-hd ul {
float: left;
}
.progm-hd ul li{
float: left;
font-size: 16px;
padding: 0 36px;
}
.progm-hd ul li a{
color: #a7a8a9;
}
.prom-bd {
margin-top: 15px;
}
.prom-bd-l {
width: 228px;
height: 390px;
float: left;
margin-right: 15px;
overflow: hidden;
}
.prom-bd-r {
float: right;
}
.prom-bd-l-bottom ul li:nth-child(4n) {
margin-right: 0;
}
注意：
- 注意结构是如何划分的
- css的样式代码和之前的精品推荐有重叠的部分，大部分一致
底部
结构
<div class="footer">
<div class="footer-in container">
<div class="footer-l">
<img src="images/logo_03.png" alt="">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="#">下载APP</a>
</div>
<div class="footer-r">
<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>
样式css
/* 页面底部分 */
.footer {
height: 270px;
background-color: #ffffff;
margin-top: 100px;
}
.footer-in {
padding-top: 30px; /*盒子没有给高度不用担心撑开盒子*/
}
.footer-l {
float: left;
}
.footer-l p {
font-size: 12px;
line-height: 18px;
color: #999;
margin-top: 20px;
}
.footer-l a {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
text-align: center;
font-size: 16px;
line-height: 33px;
margin-top: 15px;
}
.footer-r {
float: right;
color: #333;
}
.footer-r dl {
float: left;
width: 225px;
}
.footer-r dt {
font-size: 16px;
height: 30px;
}
.footer-r dd {
font-size: 12px;
height: 20px;
}
.footer-r dd a:hover {
color: #00a4ff;
text-decoration: underline; /* 添加下划线 */
}
注意
- 这里最值得学习的地方时高度和宽度剩余法
结果
学成在线首页.gif
