小花带你一周入门html+css（五）CSS进阶之切图丨【WEB前端大作战】
【摘要】 相信大家应该都听过说：Java、Asp.net、Php、Python、C、C++、C#、网站前端，网页设计等这些技术，但是可能你不知道，这些技术都需要掌握两个基础的技术—html+css。接下来我将带领大家一起，在一周的时间内，轻松搞定这两个技术。
今天我们来了解一下css扩展能力-切图
切图、滑动门、图片精灵、banner图制作、导航等。
CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！
关于CSS的各种属性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~
完全就是我们需要什么，只要凭着需求去寻找。~follow me~
本节课案例里面有用到css3的知识点，可以稍微先提前了解一下。
1.切图
作为了解，知道一些切图方法即可。
这里介绍两个常见的工具：
高效的产品设计协作平台，团队协作工具——蓝湖
高效易用的自动标注工具, 生成前端代码, 设计研发协作利器——pxcook
当然也可以使用ps的切片工具，不做硬性要求
2.滑动门
主要是网页上的圆角按钮，线上很多网站有很多圆角按钮，圆角按钮可以使网页看着更和谐，那我们网站开发人员该如何制作呢？
下面我们看一下基础滑动门制作方法
所有的盒子都要左浮动float:left;
准备三个小图片，分别用来做左边圆角，右边圆角，和中间平铺。
一个父盒子包裹三个左浮动的盒子
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.box{overflow:hidden;_zoom:1;}
.left,.right{width:5px;height:40px;float:left;}
.left{background:url(left.jpg) no-repeat;}
.right{background:url(right.jpg) no-repeat;}
.center{float:left;height:40px;width:100px;text-align:center;background:url(center.jpg) repeat-x; line-height:40px;color:#fff;}
</style>
</head>
<body>
<div class="box">
<span class="left"></span>
<div class="center">滑动门</div>
<span class="right"></span>
</div>
</body>
</html>
3.图片精灵
图片精灵 ：将一个页面涉及到的所有零星图片都包含到一张大图中去（CSS精灵 、css sprites ）
减少了浏览器向服务器请求次数
把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置
注意：
background- repeat必须设置no-repeat;
盒子的宽高必须严格和背景的宽高保持一致。
下面以云课堂为例子体验一下精灵图片
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
/*css reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,pre, form, fieldset, input, textarea, p, blockquote, th, td {padding: 0; margin: 0;font-family:"PingFang SC",PingFangSC-Regular,"Helvetica Neue","Microsoft YaHei Regular","Microsoft YaHei","宋体",sans-serif}
fieldset, img { border: 0; }
table {border-collapse: collapse; border-spacing: 0;}
ol, ul {list-style: none; }
address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 100%;}
q:before, q:after {content: '';}
abbr, acronym {border: 0;}
a{text-decoration:none;color:#808080;}
/*内容区域*/
.content {width: 1200px;margin: 0 auto; }
/*云课堂区域*/
.content .class-box ,.market-box,.activity-box{ width:1200px; text-align:center; padding: 30px 0 40px;}
.class-box-title h3{font-size: 24px; font-weight:bold; color: #293040; margin: 0 0 16px;}
.class-box-title span{font-size: 16px; color: #575d6c;}
.course{overflow: hidden; padding-top: 40px;}
.course li{ width:378px; margin: 0 30px 30px 0;float: left; border: 1px solid #f7f8fa;box-shadow: 0 4px 16px 0 rgba(124,142,227,.12); border-radius: 12px;cursor: pointer;background: #fff; }
.content .course li:hover,.market-box .course li:hover{transform: translateY(-6px); transition: all .1s ease-out; box-shadow: 0 16px 20px 0 rgba(124,142,227,.24); z-index: 50;}
.course li.no_right{margin-right: 0;}
.course .img{width: 100%; height: 200px;border-radius: 12px 12px 0 0; overflow: hidden; background-image: url(https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/cloud-class.5974862e24f459dd518a.png); background-position: 0px 0px;}
.course li:nth-child(2) .img{background-position:0px -200px;}
.course li:nth-child(3) .img{background-position:0px -400px;}
.course li:nth-child(4) .img{background-position:0px -600px;}
.course li:nth-child(5) .img{background-position:0px -800px;}
.course li:nth-child(6) .img{background-position:0px -1000px;}
.course-content{padding:20px;text-align:left;}
.course h4{width: 100%; font-size: 16px; color: #293040; text-align:left;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight:bold;}
.course .top{margin-top: 8px; color: #959eb2; font-size: 12px;margin-bottom: 30px;}
.icon-user,.icon-address{background-image: url(https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/classroom.sprite.d2922e64a1fdfbcab62c.png);display: inline-block;width: 16px;height: 16px;vertical-align: text-top;}
.icon-user{background-position: -312px -464px;}
.icon-address{background-position: -408px -440px;margin-left: 10px;}
.time{float: right;border-radius: 8px;border: 1px solid #eee;border-radius: 12px;padding: 2px 8px;}
.center{height: 48px; line-height: 24px; width: 100%;font-size: 14px; color: #5e6678; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; letter-spacing: .5px; word-break: break-all;}
.bottom{border-top: 1px solid rgba(0,0,0,.05);margin-top: 5px;padding:14px;}
.bottom input[type=button]{font-size: 14px; text-align: center; line-height: 20px; color: #e41f2b; padding: 2px 4px; border-radius: 2px; border:none;background-color: rgba(228,31,43,.1); float: right;}
.more{height: 40px; font-size: 16px; color: #293040!important; line-height: 24px; background: #fafafa; border: 1px solid #e3e5e9; box-shadow: 0 2px 4px -1px rgba(0,0,0,.05); border-radius: 20px; margin-right: 12px; padding: 9px 20px; min-width: 80px;}
.icon-chevron-right{position: relative; top: 3px; left: -3px; font-size: 16px;}
</style>
</head>
<body>
<div class="content">
<div class="class-box">
<!--云课堂区域-->
<div class="class-box-title">
<h3>云课堂</h3>
<span>免费精品公开课，覆盖丰富知识点、课件与在线习题</span>
</div>
<ul class="course">
<li>
<div class="img"></div>
<div class="course-content">
<h4>区块链精品实践课</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">6小时</span>
</div>
<p class="center">本课程由浅入深的介绍区块链技术缘起、原理机制、演进和发展现状，分享区块链典型应用场景及特点。了解华为云区块链的方案及特点，参与动手实验。从入门到实践，循序渐进一站式学习。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li>
<div class="img"></div>
<div class="course-content">
<h4>基于新工科的软件工程企业级专家实践课</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> 马瑞新&姚冬、庄表伟等</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 大连理工大学&华为云</span></span>
<span class="time">6小时</span>
</div>
<p class="center">停课不停学，为了能够让同学们在家即可学习JAVA，大连理工大学软件学院基于华为云Classroom组织在线直播授课，采用基础知识讲解、在线编程、自动评分、任务闯关、项目训练等多种形式进行教学与实践，欢迎全国有JAVA学习和教学需求的学生和老师在线上观看教学。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li class="no_right">
<div class="img"></div>
<div class="course-content">
<h4>HE2E DevOps实践</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">16小时</span>
</div>
<p class="center">HE2E即华为端到端的DevOps实施框架，集合了业界先进的实践，结合华为30年研发经验，形成的一套可操作可落地的敏捷开发方法论，并基于DevCloud工具链进行承载。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li>
<div class="img"></div>
<div class="course-content">
<h4>C语言程序设计</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">96小时</span>
</div>
<p class="center">本课程适合作为高等学校计算机专业及相关专业C语言程序设计课程的教材，也可作为计算机等级考试参考书，还可供从事计算机软件开发人员参考使用。主要包含，C语言概述，数据类型，基本语句与结构化程序设计，数组，函数和模块化程序设计，指针，预处理命令，复杂数据类型，文件。附有习题，习题覆盖知识重点，题型丰富。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li>
<div class="img"></div>
<div class="course-content">
<h4>Web实践课</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">96小时</span>
</div>
<p class="center">本门课程涵盖：WEB基础、CSS、JS、H5等教学内容组成，学生可以逐步提升前端开发能力。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li class="no_right">
<div class="img"></div>
<div class="course-content">
<h4>人工智能：算法与实践</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">96小时</span>
</div>
<p class="center">本课程讲述的是有关人工智能算法与实践的内容，并介绍相关的数学基础、相关应用及工具，以及如何在实际环境中使用它们。课程不仅仅介绍了各种人工智能算法的理论知识，更是通过建立多个实际案例、习题测评，引导学生在实际项目中学到相关知识经验，同时老师可以灵活安排学生的学习任务，有效地对学生的知识吸收情况做针对性的解决。课程开发环境为python3.6及以上 + Anaconda3 。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
</ul>
<a href="#" class="more">查看更多<span class="icon-chevron-right"></span></a>
</div>
</div>
</body>
</html>
tips：
如果当精灵图和内容位置配合不合适的时候，做法：结构将精灵图放到一个小盒子里面，比如span，b，u，i，s，em。配合background-position
4.banner图制作
img插入 - 此方法可以应用到盒子垂直居中问题
精髓：绝对定位，left设置为50%固定值，margin-left设置为img图像宽度的一半
即：position:absolute;top:0;left:50%;margin-left:img宽度的一半
下面以classroom banner图为例看一下如何制作
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
/*css reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,pre, form, fieldset, input, textarea, p, blockquote, th, td {padding: 0; margin: 0;font-family:"PingFang SC",PingFangSC-Regular,"Helvetica Neue","Microsoft YaHei Regular","Microsoft YaHei","宋体",sans-serif}
fieldset, img { border: 0; }
table {border-collapse: collapse; border-spacing: 0;}
ol, ul {list-style: none; }
address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 100%;}
q:before, q:after {content: '';}
abbr, acronym {border: 0;}
a{text-decoration:none;color:#808080;}
/*轮播图*/
.con{width:100%;height:517px;position:relative;top:0px;overflow: hidden;}
.con ol{position: absolute;bottom:45px; width:100% ;text-align: center;transform: translate3d(0,0,0);z-index: 10;}
.con ol li{width: 8px;height: 8px;margin:0 2px;display: inline-block;border-radius: 100%;background: #000;opacity: .2;}
.con ol li.current{width: 28px!important;background:#5e7ce0!important;border-radius: 5px!important;opacity: 1;}
</style>
</head>
<body>
<div class="header">
<!--页面头部轮播图区域-->
<!--提示：不需要实现轮播图效果-->
<div class="con">
<ul>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/9.1.10.001/banner-2.64b1407e7a8db89d6cf2.jpg" width="100%" height="100%" border="0" alt=""></li>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-2.d69113832d9d49869f17.jpg" width="100%" height="100%" border="0" alt=""></li>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-3.78529fb07dac84804fe4.jpg" width="100%" height="100%" border="0" alt=""></li>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-4.883a698e6a7fc4d886c6.jpg" width="100%" height="100%" border="0" alt=""></li>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-5.ca2846867357442a092f.jpg" width="100%" height="100%" border="0" alt=""></li>
</ul>
<span>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</span>
</div>
</div>
</body>
</html>
分析：Y轴是盒子的中线，插入img的正常位置是在1号位置，最终效果是在3号位置，3号位置是img的一半在y轴的左边一半在y轴的右边，为了实现以y轴为分界线，所以：
我们把img移动到y轴即2号位置，然后对比着y轴向左移动img的一半即可
5.导航
以classroom导航为例，结合之前的内容看一下导航如何制作
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
/*css reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,pre, form, fieldset, input, textarea, p, blockquote, th, td {padding: 0; margin: 0;font-family:"PingFang SC",PingFangSC-Regular,"Helvetica Neue","Microsoft YaHei Regular","Microsoft YaHei","宋体",sans-serif}
fieldset, img { border: 0; }
table {border-collapse: collapse; border-spacing: 0;}
ol, ul {list-style: none; }
address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 100%;}
q:before, q:after {content: '';}
abbr, acronym {border: 0;}
a{text-decoration:none;color:#808080;}
/*导航样式*/
body{background-color: #fff;}
.nav { position: fixed;z-index: 1000; display: flex; align-items: center; height: 60px; width: 100%; padding: 0 40px; background-color: #fff; border-bottom: 1px solid #eee; }
.nav .nav_l { float: left; } /*logo*/
.nav_l h1 { float: left; width: 120px; height: 40px; background-image: url(https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/logo.ee14f183979fd61abac2.svg); background-size: 100% 100%; }
.nav_l h1 a { width: 100%; height: 100%; display: inline-block; }
/*导航菜单*/
.nav_l ul { float: left; margin: 6px 0 0 40px; }
.nav_l ul li { float: left; }
.nav_l ul li.act a { color: #5e7ce0; }
.nav_l ul li a:hover { color: #5e7ce0; }
.nav_l ul li a { display: block; float: left; font-size: 14px; color: #293040; line-height: 32px; margin-right: 48px; font-weight: bold; } /*导航条右侧*/
</style>
</head>
<body>
<div class="nav">
<!--页面导航区域-->
<div class="nav_l">
<h1 class="public-logo"><a href="#"></a></h1>
<ul>
<li class="act"><a href="#">首页</a></li>
<li><a href="#">教学市场</a></li>
<li><a href="#">云课堂</a></li>
<li><a href="#">培训认证</a></li>
<li><a href="#">云端实验室</a></li>
<li><a href="#">新工科实验班</a></li>
<li><a href="#">学习交流</a></li>
</ul>
</div>
</div>
</body>
</html>
tips学习小技巧:
学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！资历有限，错误难免，欢迎大力指正。
【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）