搜索到
114
篇与
的结果
-
品优购项目-下 目标 能够写出列表页 能够写出注册页 能够把品优购网站部署到本地服务器 能够把品优购网站上传到远程服务器 品优购项目首页制作main 主体模块制作以前书写的就是模块化中的公共部分。main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css main 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动 main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点图模块 main 里面包含右侧盒子，宽度为 250像素，右浮动，newsflash 新闻快报模块结构代码<div class="w"> <div class="main"> <div class="focus"> ... </div> <div class="newsflash"> ... </div> </div> </div> 样式代码.main { width: 980px; height: 455px; margin-left: 220px; margin-top: 10px; } .focus { float: left; width: 721px; height: 455px; background-color: purple; } .newsflash { float: right; width: 250px; height: 455px; } 左侧 focus 模块制作 大的 focus 盒子 包裹 1 号展示图片的盒子，2号 3号 左右箭头的盒子，4号 小圆点的盒子<div class="focus fl"> <a href="#" class="arrow-l"> < </a> <a href="#" class="arrow-r"> > </a> <ul> <li> <a href="#"><img src="upload/focus.jpg" alt=""></a> </li> </ul> <ol class="circle"> <li></li> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> 包裹 1 号盒子（ul > li > a > img），轮播图这样的布局是为了后面方便配置js逻辑代码 2 号盒子 跟 3 号盒子 左右箭头，利用定位的方式来实现样式代码.arrow-l, .arrow-r { position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; } .arrow-r { right: 0; } 4 号盒子 里面放 小圆点 （ol > li） 小圆圈利用边框实现 小圆点里面背景颜色来实现 样式代码.circle { position: absolute; bottom: 10px; left: 50px; } .circle li { float: left; width: 8px; height: 8px; /*background-color: #fff;*/ border: 2px solid rgba(255, 255, 255, 0.5); margin: 0 3px; border-radius: 50%; /*鼠标经过显示小手*/ cursor: pointer; } .current { background-color: #fff; box-shadow: } 右侧 newsflash 模块制作 右侧的模块 分为上中下三个盒子结构代码<div class="newsflash"> <div class="news"> ... </div> <div class="lifeservice"> ... </div> <div class="bargain"> ... </div> </div> 1 号盒子为 news 新闻模块 高度为 165px 分为上下两个结构，但是两个模块都用 div，上面是 news-hd，下面是 news-bd结构代码<div class="news"> <div class="news-hd"> ... </div> <div class="news-bd"> ... </div> </div> 样式代码.news { height: 165px; border: 1px solid #e4e4e4; } 上面是news-hd，设置高度是 33px，设置下边框 里面放一个h5 标题 放一个a标签，内容是 更多，然后让 a 进行右浮动，三角用伪元素设置字体图标就好 结构代码<div class="news-hd"> <h5>品优购快报</h5> <a href="#" class="more">更多</a> </div> 样式代码.news-hd { height: 33px; line-height: 33px; border-bottom: 1px dotted #e4e4e4; padding: 0 15px; } .news-hd h5 { float: left; font-size: 14px; } .news-hd .more { float: right; } .news-hd .more::after { font-family: 'icomoon'; content: '\e920'; } 下面是news-bd 里面包含 ul 和 li 还有链接 给li设置高度，24px，设置单行文字溢出省略： 1. 设置 overflow: hidden; 2.设置 white-space: nowrap; 3. 设置 text-overflow: ellipsis; 结构代码<div class="news-bd"> <ul> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li> </ul> </div> 样式代码.news-bd { padding: 5px 15px 0; } .news-bd ul li { height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2 号盒子为 lifeservice 生活服务模块 高度为 209px 设置边框（左右下 边框） 里面的内容 是 ul > 12*li，给li设置宽 63px，高71px，设置 右边和下边的边框，设置浮动 这样设置后，第四个li会装不开，掉下来，解决办法如下 lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li 可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个 小 li lifeservice 盒子 overflow 隐藏多余的部分就可以了 在 li 里面放一个 i（里面放图标），下面的文本用 p 标签包裹 给 i 设置 24px宽和28px的高（注意 i 是行内元素， 转成行内块），给 li 设置 text-align:center 让里面内容居中显示 结构代码<div class="lifeservice"> <ul> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> </ul> </div> 样式代码.lifeservice { overflow: hidden; height: 209px; /* background-color: purple; */ border: 1px solid #e4e4e4; border-top: 0; } .lifeservice ul { width: 252px; } .lifeservice ul li { float: left; width: 63px; height: 71px; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; text-align: center; } .lifeservice ul li i { display: inline-block; width: 24px; height: 28px; background-color: pink; margin-top: 12px; background: url(../images/icons.png) no-repeat -19px -15px; } 3 号盒子为 bargain 特价商品 这个比较简单，直接插入一张图片即可 结构代码<div class="bargain"> <img src="upload/bargain.png" alt=""> </div> 样式代码.bargain { margin-top: 5px; } 推荐模块制作 -- recom 大盒子 recom 推荐模块 recommend 给这个 recom 大盒子 设置版心，设置 163px的高，背景颜色（#ebebeb），设置距离上边 12px 结构代码<div class="w recom"> ... </div> 样式代码.recom { height: 163px; background-color: #ebebeb; margin-top: 12px; } 里面包含 2 个盒子， 浮动即可结构代码 <div class="w recom"> <div class="recom_hd"> ... </div> <div class="recom_bd"> ... </div> </div> 1 号盒子 recom_hd 设置宽度205px，高度163px 里面放一个img标签，插入图片即可 结构代码<div class="recom_hd"> <img src="https://www.wangmanyuan.com/usr/uploads/wmy/2022/05/02/recom.png" alt=""> </div> 样式代码.recom_hd { float: left; height: 163px; width: 205px; background-color: #5c5251; text-align: center; padding-top: 30px; } 2 号盒子 recom_bd ，注意里面的小竖线 右侧结构里面放 ul 包含 4个 li，每个li里面包含一个img 直接利用切片工具把里面的内容当成一张图片 给 li 设置浮动 给 img 设置宽高，宽度 248px，高度 163px 小竖线利用伪元素来实现，给每一个li设置一个 after 伪元素，然后给这个伪元素设置绝对定位，设置top 10px，给li设置相对定位（注意，最后一个li不用设置伪元素），可以利用 nth-child(-n+3){...} 结构代码<div class="recom_bd"> <ul> <li><img src="upload/recom_03.jpg" alt=""></li> <li><img src="upload/recom_03.jpg" alt=""></li> <li><img src="upload/recom_03.jpg" alt=""></li> <li><img src="upload/recom_03.jpg" alt=""></li> </ul> </div> 样式代码.recom_bd { float: left; } .recom_bd ul li { position: relative; float: left; } .recom_bd ul li img { width: 248px; height: 163px; } .recom_bd ul li:nth-child(-n+3)::after { content: ''; position: absolute; right: 0; top: 10px; width: 1px; height: 145px; background-color: #ddd; } 家用电器模块注意这个 floor ，不要给高度，内容有多少，算多少第一楼是家用电器模块： 里面包含两个盒子box_hd 制作 1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子 box_hd 给 30px 的高度，2个像素的下边框 里面放一个左侧 h3 的盒子，右侧一个div盒子，div盒子里面放 ul > li > a 左侧盒左浮动，右侧盒子右浮动 a标签之间的距离用左右的padding撑开即可 结构代码<div class="box_hd"> <h3>家用电器</h3> <div class="tab_list"> <ul> <li> <a href="#" class="style_red">热门</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> <li><a href="#">空气/净水</a>|</li> <li><a href="#">新奇特</a>|</li> <li><a href="#"> 高端电器</a></li> </ul> </div> </div> 样式代码.box_hd { height: 30px; border-bottom: 2px solid #c81623; } .box_hd h3 { float: left; font-size: 18px; color: #c81623; font-weight: 400; } .tab_list { float: right; line-height: 30px; } .tab_list ul li { float: left; } .tab_list ul li a { margin: 0 15px; } box_bd 制作 2 号盒子 box_bd，不要给高度 box_bd 属于是tab栏的内容区域，所以在这个里面先嵌套一个盒子 tab_content，在tab_content 里面包裹tab选项卡对应的内容 内容被一个大盒子包裹（tab_list_item），里面是 ul 包裹 5个 li，每个li设置对应的宽度，然后设置浮动 而这5个li的宽度是不一致的，在这里我们的做法是 先把宽度的样式列出来，然后给对应的li设置 第一个小 li 分为上下结构，上面是 ul 包裹 li ，li里面包裹 a，下面插入一张图片 上面的li设置宽高，设置浮动，这样就排列下来了 后面的小 li 里面先放一个a标签，然后在a标签里面插入图片即可 结构代码<div class="box_bd"> <div class="tab_content"> <div class="tab_list_item"> <div class="col_210"> <ul> <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> <a href="#"> <img src="upload/floor-1-1.png" alt=""> </a> </div> <div class="col_329"> <a href="#"> <img src="upload/floor-1-b01.png" alt=""> </a> </div> <div class="col_221"> <a href="#" class="bb"> <img src="upload/floor-1-2.png" alt=""></a> <a href="#"> <img src="upload/floor-1-3.png" alt=""></a> </div> <div class="col_221"> <a href="#"> <img src="upload/floor-1-4.png" alt=""></a> </div> <div class="col_219"> <a href="#" class="bb"> <img src="upload/floor-1-5.png" alt=""></a> <a href="#"> <img src="upload/floor-1-6.png" alt=""></a> </div> </div> </div> </div> 样式代码.box_bd { height: 361px; } .tab_list_item>div { float: left; height: 361px; } .col_210 { width: 210px; background-color: #f9f9f9; text-align: center; } .col_210 ul li { float: left; width: 85px; height: 34px; border-bottom: 1px solid #ccc; text-align: center; line-height: 33px; margin-right: 10px; } .col_210 ul { padding-left: 12px; } .col_329 { width: 329px; } .col_221 { width: 221px; border-right: 1px solid #ccc; } .col_219 { width: 219px; } .bb { /* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */ display: block; border-bottom: 1px solid #ccc; } tab栏切换需求 tab栏的布局是 ul > li > a 有多少个tab选项卡，那么对应就有多少个内容 但是每一次只会显示一个内容块，其他内容进行的隐藏 等后面我们学习了js之后，我们就会配合js来实现，tab栏的切换 列表制作（★★★）品优购列表页制作准备工作 列表页面是新的页面，我们需要新建页面文件 list.html 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 需要新的 list.css 样式文件，这是列表页专门的样式文件 列表页 header 和 nav 修改 秒杀盒子 sk（ second kill ） 定位即可 结构代码<header class="header w"> <!-- logo模块 --> ... <!-- 列表页的秒杀模块 --> <div class="sk"> <img src="images/sk.png" alt=""> </div> <!-- search搜索模块 --> ... <!-- hotwords模块制作 --> ... <!-- 购物车模块 --> ... </header> 样式代码.sk { position: absolute; left: 190px; top: 40px; border-left: 1px solid #c81523; padding: 3px 0 0 14px; } 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li 结构代码<!-- nav模块制作 start --> <nav class="nav"> <div class="w"> <div class="sk_list"> <ul> <li><a href="#">品优秒杀</a></li> <li><a href="#">品优秒杀</a></li> <li><a href="#">品优秒杀</a></li> </ul> </div> <div class="sk_con"> <ul> <li><a href="#">女装</a></li> <li><a href="#" class="style_red">女鞋</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> <li><a href="#">更多分类</a></li> </ul> </div> </div> </nav> 样式代码.sk_list { float: left; } .sk_list ul li { float: left; } .sk_list ul li a { display: block; line-height: 47px; padding: 0 30px; font-size: 16px; font-weight: 700; color: #000; } .sk_con { float: left; } .sk_con ul li { float: left; } .sk_con ul li a { display: block; line-height: 49px; padding: 0 20px; font-size: 14px; } .sk_con ul li:last-child a::after { content: '\e91e'; font-family: 'icomoon'; } 列表页主体 sk_container 1 号盒子 sk_container 给宽度 1200，不要给高度 结构代码<!-- 列表页主体部分 --> <div class="w sk_container"> <div class="sk_hd"> ... </div> <div class="sk_bd"> ... </div> </div> sk_hd 制作 2 号盒子 sk_hd ，插入图片即可 结构代码<div class="sk_hd"> <img src="upload/bg_03.png" alt=""> </div> sk_bd 制作 3 号盒子 sk_bd ，里面包含很多的 ul 和 li 当鼠标移入到 li 上面的时候显示红色的边框，在这里先给 li 设置透明的边框，当鼠标移入的时候 设置为红色即可 由于给每个 li 都设置了外边距，导致一行的最后一个 li 掉了下来，在这里我们利用 nth-child(4n) 来选择出来每一行最后一个 li，去掉外边距就好了 结构代码<div class="sk_bd"> <ul class="clearfix"> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> </ul> </div> 样式代码.sk_bd ul li { overflow: hidden; float: left; margin-right: 13px; width: 290px; height: 460px; border: 1px solid transparent; } .sk_bd ul li:nth-child(4n) { margin-right: 0; } .sk_bd ul li:hover { border: 1px solid #c81523; } 注册页面（★★★）**注意：**注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化准备工作 创建register.html，引入 base.css，引入favicon图标 创建register.css ，在html页面进行引入 header 头部实现 整个内容用 版心 进行包裹 第一个头部区域怎么简单怎么来，用一个header盒子包裹链接，链接里面放图片即可 结构代码<header> <div class="logo"> <a href="index.html"> <img src="images/logo.png" alt=""></a> </div> </header> 样式代码.w { width: 1200px; margin: 0 auto; } header { height: 84px; border-bottom: 2px solid #c81523; } .logo { padding-top: 18px; } registerarea 主体模块实现 整个大盒子 高度为 522px，设置4个边框结构代码<div class="registerarea"> ... </div> 样式代码.registerarea { height: 522px; border: 1px solid #ccc; margin-top: 20px; } 1号盒子 是一个 h3 标签，放标题 里面放 注册新用户 的文字，然后包一个 div的标签，让div标签右浮动 结构代码<h3>注册新用户 <div class="login">我有账号，去<a href="#">登陆</a></div> </h3> 样式代码.registerarea h3 { height: 42px; border-bottom: 1px solid #ccc; background-color: #ececec; line-height: 42px; padding: 0 10px; font-size: 18px; font-weight: 400; } .login { float: right; font-size: 14px; } .login a { color: #c81523; } 2号盒子 里面放注册的内容 先用一个盒子，把整个内容包裹起来，设置盒子宽度（600px），让这个盒子距上边50px，水平居中显示 里面的内容利用 ul 包含 li 来实现的（不需要用表格） 每个 li 里面，左侧放 label 标签， 中间放input 标签， 右侧放 span 提示信息 左侧 label里面的文字都是右对齐，我们可以给label设置一个宽度（88px），然后利用text-align 来设置右对齐 input 表单设置 宽度 242px，高度 37px，设置边框 右侧 span修饰一下文字颜色 提示信息的样式优化 定义一个 错误的样式，定义一个 正确的样式，然后给对应的盒子设置类名 在span里面放一个小盒子，这个小盒子用来显示 图标的，设置一下宽高 （20x20） 插入图片了之后，默认与文字是基线对齐，通过 vertical-algin 来设置 图片与文字对齐方式 安装程度的布局，在第4个小 li 里面放 三个盒子，分别放 弱、中、强 设置 em 的 左右 12px 的内边距，设置一下文字颜色 分别设置 背景颜色 同意协议 和 完成注册 都是用 li 进行包裹 结构代码<div class="reg_form"> <form action=""> <ul> <li><label for="">手机号：</label> <input type="text" class="inp"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li> <li><label for="">短信验证码：</label> <input type="text" class="inp"> <span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li> <li><label for="">登录密码：</label> <input type="password" class="inp"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li> <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li> <li><label for="">确认密码：</label> <input type="password" class="inp"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li> <li class="agree"><input type="checkbox" name="" id=""> 同意协议并注册 <a href="#">《知晓用户协议》</a> </li> <li> <input type="submit" value="完成注册" class="btn"> </li> </ul> </form> </div> 样式代码.reg_form { width: 600px; margin: 50px auto 0; } .reg_form ul li { margin-bottom: 20px; } .reg_form ul li label { display: inline-block; width: 88px; text-align: right; } .reg_form ul li .inp { width: 242px; height: 37px; border: 1px solid #ccc; } .error { color: #c81523; } .error_icon, .success_icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url(../images/error.png) no-repeat; margin-top: -2px; } .success { color: green; } .success_icon { background: url(../images/success.png) no-repeat; } .safe { padding-left: 170px; } .safe em { padding: 0 12px; color: #fff; } .ruo { background-color: #de1111; } .zhong { background-color: #40b83f; } .qiang { background-color: #f79100; } .agree { padding-left: 95px; } .agree input { vertical-align: middle; } .agree a { color: #1ba1e6; } .btn { width: 200px; height: 34px; background-color: #c81623; font-size: 14px; color: #fff; margin: 30px 0 0 70px; } 底部实现结构代码<footer> <div class="mod_copyright"> <div class="links"> <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </div> <div class="copyright"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </div> </div> </footer> 样式代码.mod_copyright { text-align: center; padding-top: 20px; } .links { margin-bottom: 15px; } .links a { margin: 0 3px; } .copyright { line-height: 20px; } Web服务器把自己网站上传到服务器上，可以让其他人访问什么是Web服务器我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。Web 服务器****一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。以下服务器我们主要指的是Web服务器。根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。本地服务器我们可以把自己的电脑设置为本地服务器， 这样同一个局域网内的同学就可以访问你的品优购网站了。 就业班学ajax的时候，再进行讲解远程服务器本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。比如域名： www.mi.com 可以访问小米网站小结 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器 服务器可以分为本地服务器和远程服务器 远程服务器是别的公司为我们提供了一台计算机。 我们可以把网站上传到远程服务器里面， 别人就可以通过域名访问我们的网站了 将自己的网站上传到远程服务器（★★★）注意：一般稳定的服务器都是需要收费的。 比如：阿里云这里给大家推荐一个免费的远程服务器（免费空间） http://free.3v.do/ 去免费空间网站注册账号。 记录下主机名、用户名、密码、域名。 利用 utftp 软件 上传网站到远程服务器 在浏览器中输入域名，即可访问我们的品优购网站了 -
品优购项目-上 目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化 品优购项目规划网站制作流程原型图： 页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容**效果图：**告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等品优购项目介绍 **项目名称：**品优购 **项目描述：**品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作 主页列表页注册页品优购项目的学习目的 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术 品优购项目能复习、总结、提高基础班所学布局技术 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知 为后期学习移动端项目做铺垫 开发工具以及技术栈开发工具VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）技术栈 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式 采取结构与样式相分离，模块化开发 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹--- 品优购代码规范.md） 品优购项目搭建工作创建的文件夹如下（称为项目结构）创建文件如下初始化样式有些网站初始化的不太提倡 * { margin: 0; padding: 0; } 比如新浪： html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0} 项目模块化开发所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有(如下图)。此时，可以把这些结构和样式单独作为一个模块，然后重复使用 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式 模块化开发具有重复使用、修改方便等优点 网站 favicon 图标（★★★）favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。制作favicon图标 把品优购图标切成 png 图片 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/ 使用favicon图标favicon图标放到网站根目录下HTML页面引入favicon图标在html 页面里面的 <head> </head>元素之间引入代码 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> TDK三大标签SEO优化（★★）SEO是什么**SEO（Search Engine Optimization）**汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。页面必须有三个标签用来符合 SEO 优化TDK是什么T -- Title（网站标题）title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。**建议：**网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）例如： 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！ 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站 D -- description（网站描述）简要说明我们网站主要是做什么的。我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。例如：<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />K -- keywords （关键字）keywords 是页面关键词，是搜索引擎的关注点之一。keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式例如：<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备示例代码<head> ... <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！ </title> <!-- 网站说明 --> <meta name="description" content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <!-- 关键字 --> <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /> ... </head> 品优购首页制作我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面常用模块类名命名公共部分 -- header 头部制作快捷导航 shortcut 制作（★★）布局思路 通栏的盒子命名为 shortcut ，是快捷导航的意思。 注意这里的行高，可以继承给里面的子盒子 里面包含版心的盒子 版心盒子里面包含 1 号左侧盒子左浮动 1 号盒子 里面包含一个ul，ul包裹li，第一个li里面包裹文字就行，因为不能点击，第二个li包含两个a标签 里面的内容是水平排列，所以需要给li设置浮动 文字要垂直居中，我们可以给 shortcut设置行高，因为行高可以继承，里面的孩子就不需要设置了 版心盒子里面包含 2 号右侧盒子右浮动 2 号盒子 里面包含一个ul，ul包裹li，中间的|可以用样式去设置，也可以用字符 | 里面内容水平排列，给li设置浮动 找到里面所有偶数的 li 设置样式（偶数的 li 显示是一个 | 竖线，所以需要单独选择出来设置样式，利用nth-child就可以实现） 需要用到字体图标 利用伪元素的方式来实现字体图标，给需要添加的标签设置类名为 ： arrow-icon 先要引入字体图片的资源 在样式里面利用 font-face 来进行声明 在伪元素的 content属性设置 图标的编码 给伪元素设置font-family属性 结构示例代码<!-- 快捷导航模块 start --> <section class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>品优购欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style_red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li>我的订单</li> <li></li> <li class="arrow-icon">我的品优购</li> <li></li> <li>品优购会员</li> <li></li> <li>企业采购</li> <li></li> <li class="arrow-icon">关注品优购</li> <li></li> <li class="arrow-icon">客户服务</li> <li></li> <li class="arrow-icon">网站导航</li> </ul> </div> </div> </section> 样式示例代码/* 声明字体图标 这里一定要注意路径的变化 */ @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?tomleg'); src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?tomleg') format('truetype'), url('../fonts/icomoon.woff?tomleg') format('woff'), url('../fonts/icomoon.svg?tomleg#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } /* 快捷导航模块 */ .shortcut { height: 31px; line-height: 31px; background-color: #f1f1f1; } .shortcut ul li { float: left; } /* 选择所有的偶数的小li */ .shortcut .fr ul li:nth-child(even) { width: 1px; height: 12px; background-color: #666; margin: 9px 15px 0; } .arrow-icon::after { content: '\e91e'; font-family: 'icomoon'; margin-left: 6px; } header头部模块搭建（★★★） header 盒子必须要有高度 1 号盒子是 logo 标志定位，在正常开发过程中，logo的布局其实是有讲究的，需要进行 logoSEO的优化 （★★★） logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要 h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了 结构代码<!-- logo模块 --> <div class="logo"> <h1> <a href="index.html" title="品优购商城">品优购商城</a> </h1> </div> 样式代码/* header 头部制作 */ .header { position: relative; height: 105px; } .logo { position: absolute; top: 25px; width: 171px; height: 61px; } .logo a { display: block; width: 171px; height: 61px; background: url(../images/logo.png) no-repeat; /* font-size: 0;京东的做法*/ /* 淘宝的做法让文字隐藏 */ text-indent: -9999px; overflow: hidden; } 2 号盒子是 search 搜索模块定位 search盒子利用定位的方式放在对应的位置 search盒子设置绝对定位，header盒子设置相对定位 search盒子里面包含两个子元素，一个是输入框，一个是按钮，分别跟定固定的宽高（搜索框 宽度：454px；按钮宽度：80px） 输入框和按钮本来就是行内块元素，在一行显示，但是中间会有间隙，所以我们可以让让这两个元素浮动起来 结构代码<!-- search搜索模块 --> <div class="search"> <input type="search" name="" id="" placeholder="语言开发"> <button>搜索</button> </div> 样式代码.search { position: absolute; left: 346px; top: 25px; width: 538px; height: 36px; border: 2px solid #b1191a; } .search input { float: left; width: 454px; height: 32px; padding-left: 10px; } .search button { float: left; width: 80px; height: 32px; background-color: #b1191a; font-size: 16px; color: #fff; } 3 号盒子是 hotwords 热词模块定位 热词模块怎么简单怎么来，直接在里面放a标签即可 给里面所有的a标签设置 左右10px的外边距 给第一个a标签设置文字变红色（#c81623） 结构代码<!-- hotwords模块制作 --> <div class="hotwords"> <a href="#" class="style_red">优惠购首发</a> <a href="#">亿元优惠</a> <a href="#">9.9元团购</a> <a href="#">美满99减30</a> <a href="#">办公用品</a> <a href="#">电脑</a> <a href="#">通信</a> </div> 样式代码.hotwords { position: absolute; top: 66px; left: 346px; } .hotwords a { margin: 0 10px; } 4 号盒子是 shopcar 购物车模块 在shopcar里面添加一个before伪元素和after伪元素，分别放置 购物车的图标和 右箭头 count 统计部分用绝对定位做 count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度 一定注意左下角不是圆角，其余三个是圆角 写法： border-radius: 7px 7px 7px 0; 结构代码<!-- 购物车模块 --> <div class="shopcar"> 我的购物车 <i class="count">8</i> </div> 样式代码.shopcar { position: absolute; right: 60px; top: 25px; width: 140px; height: 35px; line-height: 35px; text-align: center; border: 1px solid #dfdfdf; background-color: #f7f7f7; } .shopcar::before { content: '\e93a'; font-family: 'icomoon'; margin-right: 5px; color: #b1191a; } .shopcar::after { content: '\e920'; font-family: 'icomoon'; margin-left: 10px; } .count { position: absolute; top: -5px; left: 105px; height: 14px; line-height: 14px; color: #fff; background-color: #e60012; padding: 0 5px; border-radius: 7px 7px 7px 0; } nav导航模块制作（★★★） nav 盒子通栏有高度，而且有个下边框，里面包含版心，版心里面包含 1 号盒子 和 2号盒子结构代码<nav class="nav"> <div class="w"> <div class="dropdown"> ... </div> <div class="navitems"> ... </div> </div> </nav> 样式代码.nav { height: 47px; border-bottom: 2px solid #b1191a; } 1 号盒子左侧浮动，dropdown 1号盒子有讲究，根据相关性 里面包含 .dt 和 .dd 两个盒子 .dt 内容是全部商品分类，然后把这个盒子的宽高设置跟父亲一样，这样就把 .dd 挤到下面去了 给 .dd 盒子设置宽度 和 高度，以及背景颜色 给 .dd 盒子里面定义 无序列表 （ul > li > a） 每个 li 都有一个高度（31px），宽度可以不用设置，让文字垂直居中，左边设置2个像素的margin值 给 li 里面的a设置文字大小（14px） 给 li 设置 hover，当鼠标移入的时候，让li的背景变成白色，让里面的文字变成红色 li 右侧的三角 就可以利用 伪元素来实现，给伪元素设置字体图标，利用定位的方式放在li的右侧，那么给li设置相对定位 结构代码<div class="dropdown"> <div class="dt">全部商品分类</div> <div class="dd"> <ul> <li><a href="#">家用电器</a> </li> <li><a href="#">手机</a>、 <a href="#">数码</a>、<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> <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> <li><a href="#">理财、众筹、白条、保险</a> </li> </ul> </div> </div> 样式代码.dropdown .dt { width: 100%; height: 100%; color: #fff; text-align: center; line-height: 45px; font-size: 16px; } .dropdown .dd { display: none; width: 210px; height: 465px; background-color: #c81623; margin-top: 2px; } .dropdown .dd ul li { position: relative; height: 31px; line-height: 31px; margin-left: 2px; padding-left: 10px; } .dropdown .dd ul li:hover { background-color: #fff; } .dropdown .dd ul li::after { position: absolute; top: 1px; right: 10px; color: #fff; font-family: 'icomoon'; content: '\e920'; font-size: 14px; } .dropdown .dd ul li a { font-size: 14px; color: #fff; } .dropdown .dd ul li:hover a { color: #c81623; } 2 号盒子左侧浮动，navitems 导航栏组 里面结构是 ul > li > a 导航栏都是能点击的，所以我们不能给定宽度，给a左右的padding把两侧撑开 让文字垂直居中（行高等于高度） 结构代码<div class="navitems"> <ul> <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> <li><a href="#">服装城</a></li> <li><a href="#">服装城</a></li> </ul> </div> 样式代码.navitems ul li { float: left; } .navitems ul li a { display: block; height: 45px; line-height: 45px; font-size: 16px; padding: 0 25px; } 公共部分 -- footer 底部制作 footer 页面底部盒子通栏给一个高度（415px）和灰色的背景 footer 里面有一个大的版心 版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思 给 mod_service 设置高度（80px）和下边框 在里面定义 ul > li ,每个li 宽度是300px 高度是 50px，给每个li设置35px的左内边距 在每个li里面，放一个 h5（里面放图标），一个div（里面放div和p） 给 h5设置浮动，让h5与这个div左右排列 通过精灵图技术（核心思路：利用background-position来实现），把图标设置给h5 结构代码<div class="mod_service"> <ul> <li> <h5></h5> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障,提供发票</p> </div> </li> <li> <h5></h5> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障,提供发票</p> </div> </li> <li> <h5></h5> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障,提供发票</p> </div> </li> <li> <h5></h5> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障,提供发票</p> </div> </li> </ul> </div> 样式代码/* 底部模块制作 */ .footer { height: 415px; background-color: #f5f5f5; padding-top: 30px; } .mod_service { height: 80px; border-bottom: 1px solid #ccc; } .mod_service ul li { float: left; width: 300px; height: 50px; padding-left: 35px; } .mod_service ul li h5 { float: left; width: 50px; height: 50px; background: url(../images/icons.png) no-repeat -252px -2px; margin-right: 8px; } .service_txt h4 { font-size: 14px; } .service_txt p { font-size: 12px; } 版心里面包含 2 号盒子，mod_help 是帮助模块 给 mod_help 设置 50px的左内边距和20px的上内边距，给定高度（185px） 里面的布局利用 自定义列表来实现（dl > dt + dd） 给 dl 设置浮动，让其可以水平排列，给每个dl盒子设置宽度 给 dt 设置文字大小（16px），设置下外边距（10px），让dt和dd之间有些距离 最后一个 dl 结构和样式不一样，需要单独设置 <div class="mod_help"> <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> <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> <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> <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> <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> <dd><a href="#">联系客服</a></dd> </dl> <dl> <dt>帮助中心</dt> <dd> <img src="images/wx_cz.jpg" alt=""> 品优购客户端 </dd> </dl> </div> 样式代码.mod_help { height: 185px; border-bottom: 1px solid #ccc; padding-top: 20px; padding-left: 50px; } .mod_help dl { float: left; width: 200px; } .mod_help dl:last-child { width: 90px; text-align: center; } .mod_help dl dt { font-size: 16px; margin-bottom: 10px; } 版心里面包含 3 号盒子，mod_copyright 是版权模块 分为上下两块，上面是 links 友情链接，下面是 copyright，给mod_copyright 大盒子设置 文字水平居中，20px的上内边距，让上面内容和下面内容之间有些间隙 把内容分别复制到相应模块中 给 links 设置 15px 的下外边距，给links 里面 的 a 标签设置 左右 3px 的外边距 给copyright 设置 20px 的行高 结构代码<div class="mod_copyright"> <div class="links"> <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </div> <div class="copyright"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </div> </div> 样式代码.mod_copyright { text-align: center; padding-top: 20px; } .links { margin-bottom: 15px; } .links a { margin: 0 3px; } .copyright { line-height: 20px; }
-
kubernetes经典问答 1、简述ETCD及其特点?etcd是一个分布式的、高可用的、一致的key-value存储数据库，基于Go语言实现，主要用于共享配置和服务发现。特点：完全复制：集群中的每个节点都可以使用完整的存档高可用性：Etcd可用于避免硬件的单点故障或网络问题一致性：每次读取都会返回跨多主机的最新写入简单：包括一个定义良好、面向用户的API（gRPC）安全：实现了带有可选的客户端证书身份验证的自动化TLS快速：每秒10000次写入的基准速度可靠：使用Raft算法实现了强一致、高可用的服务存储目录2、简述ETCD适应的场景?服务发现：服务发现要解决的也是分布式系统中最常见的问题之一，即在同一个分布式集群中的进程或服务，要如何才能找到对方并建立连接。本质上来说，服务发现就是想要了解集群中是否有进程在监听udp或tcp端口，并且通过名字就可以查找和连接。消息发布与订阅：在分布式系统中，最实用对的一种组件间的通信方式：消息发布与订阅。构建一个配置共享中心，数据提供者在这个配置中心发布消息，而消息使用者订阅他们关心的主题，一旦主题有消息发布，就会实时通知订阅者。达成集中式管理与动态更新。应用中用到的一些配置信息放到etcd上进行集中管理。负载均衡：分布式系统中，为了保证服务的高可用以及数据的一致性，通常都会把数据和服务部署多份，以此达到对等服务，即使其中的某一个服务失效了，也不影响使用。etcd本身分布式架构存储的信息访问支持负载均衡。分布式通知与协调：通过注册与异步通知机制，实现分布式环境下不同系统之间的通知与协调，从而对数据变更做到实时处理。分布式锁：因为etcd使用Raft算法保持了数据的强一致性，某次操作存储到集群中的值必然是全局一致的，所以很容易实现分布式锁。锁服务有两种使用方式，一是保持独占，二是控制时序。分布式队列：分布式队列的常规用法与场景五中所描述的分布式锁的控制时序用法类似，即创建一个先进先出的队列，保证顺序。集群监控与Leader精选：通过etcd来进行监控实现起来非常简单并且实时性强。3、简述什么是Kubernetes?kubernetes，简称K8s，是一个开源的，用于管理云平台中多个主机上的容器化的应用，Kubernetes的目标是让部署容器化的应用简单并且高效,Kubernetes提供了应用部署，规划，更新，维护的一种机制。4、简述Kubernetes和Docker的关系?Docker开源的容器引擎，一种更加轻量级的虚拟化技术。Kubernetes，容器管理工具，用来管理容器pod的集合，它可以实现容器集群的自动化部署、自动扩缩容、维护等功能。5、简述Kubernetes中什么是Minikube、Kubectl、Kubelet?Minikube 是一种可以在本地轻松运行一个单节点 Kubernetes 群集的工具。Kubectl 是一个命令行工具，可以使用该工具控制Kubernetes集群管理器，如检查群集资源，创建、删除和更新组件，查看应用程序。Kubelet 是一个代理服务，它在每个节点上运行，并使从服务器与主服务器通信。6、简述Kubernetes常见的部署方式?kubeadm：也是推荐的一种部署方式；二进制minikube：在本地轻松运行一个单节点 Kubernetes 群集的工具。7、简述Kubernetes如何实现集群管理?在集群管理方面，Kubernetes将集群中的机器划分为一个Master节点和一群工作节点Node。其中，在Master节点运行着集群管理相关的一组进程kube-apiserver、kube-controller-manager和kube-scheduler，这些进程实现了整个集群的资源管理、Pod调度、弹性伸缩、安全控制、系统监控和纠错等管理能力，并且都是全自动完成的。8、简述Kubernetes的优势、适应场景及其特点?Kubernetes作为一个完备的分布式系统支撑平台，其主要优势：容器编排轻量级开源弹性伸缩负载均衡Kubernetes常见场景：快速部署应用快速扩展应用无缝对接新的应用功能节省资源，优化硬件资源的使用Kubernetes相关特点：可移植: 支持公有云、私有云、混合云、多重云（multi-cloud）。可扩展: 模块化,、插件化、可挂载、可组合。自动化: 自动部署、自动重启、自动复制、自动伸缩/扩展。9、简述Kubernetes的缺点或当前的不足之处?安装过程和配置相对困难复杂。管理服务相对繁琐。运行和编译需要很多时间。它比其他替代品更昂贵。对于简单的应用程序来说，可能不需要涉及Kubernetes即可满足。10、简述Kubernetes相关基础概念?master：k8s集群的管理节点，负责管理集群，提供集群的资源数据访问入口。拥有Etcd存储服务（可选），运行Api Server进程，Controller Manager服务进程及Scheduler服务进程。node（worker）：Node（worker）是Kubernetes集群架构中运行Pod的服务节点，是Kubernetes集群操作的单元，用来承载被分配Pod的运行，是Pod运行的宿主机。运行docker eninge服务，守护进程kunelet及负载均衡器kube-proxy。pod：运行于Node节点上，若干相关容器的组合。Pod内包含的容器运行在同一宿主机上，使用相同的网络命名空间、IP地址和端口，能够通过localhost进行通信。Pod是Kurbernetes进行创建、调度和管理的最小单位，它提供了比容器更高层次的抽象，使得部署和管理更加灵活。一个Pod可以包含一个容器或者多个相关容器。label：Kubernetes中的Label实质是一系列的Key/Value键值对，其中key与value可自定义。Label可以附加到各种资源对象上，如Node、Pod、Service、RC等。一个资源对象可以定义任意数量的Label，同一个Label也可以被添加到任意数量的资源对象上去。Kubernetes通过Label Selector（标签选择器）查询和筛选资源对象。Replication Controller：Replication Controller用来管理Pod的副本，保证集群中存在指定数量的Pod副本。集群中副本的数量大于指定数量，则会停止指定数量之外的多余容器数量。反之，则会启动少于指定数量个数的容器，保证数量不变。Replication Controller是实现弹性伸缩、动态扩容和滚动升级的核心。Deployment：Deployment在内部使用了RS来实现目的，Deployment相当于RC的一次升级，其最大的特色为可以随时获知当前Pod的部署进度。HPA（Horizontal Pod Autoscaler）：Pod的横向自动扩容，也是Kubernetes的一种资源，通过追踪分析RC控制的所有Pod目标的负载变化情况，来确定是否需要针对性的调整Pod副本数量。Service：Service定义了Pod的逻辑集合和访问该集合的策略，是真实服务的抽象。Service提供了一个统一的服务访问入口以及服务代理和发现机制，关联多个相同Label的Pod，用户不需要了解后台Pod是如何运行。Volume：Volume是Pod中能够被多个容器访问的共享目录，Kubernetes中的Volume是定义在Pod上，可以被一个或多个Pod中的容器挂载到某个目录下。Namespace：Namespace用于实现多租户的资源隔离，可将集群内部的资源对象分配到不同的Namespace中，形成逻辑上的不同项目、小组或用户组，便于不同的Namespace在共享使用整个集群的资源的同时还能被分别管理。11、简述Kubernetes集群相关组件?Kubernetes Master控制组件，调度管理整个系统（集群），包含如下组件:Kubernetes API Server：作为Kubernetes系统的入口，其封装了核心对象的增删改查操作，以RESTful API接口方式提供给外部客户和内部组件调用，集群内各个功能模块之间数据交互和通信的中心枢纽。Kubernetes Scheduler：为新建立的Pod进行节点(node)选择(即分配机器)，负责集群的资源调度。Kubernetes Controller：负责执行各种控制器，目前已经提供了很多控制器来保证Kubernetes的正常运行。Replication Controller：管理维护Replication Controller，关联Replication Controller和Pod，保证Replication Controller定义的副本数量与实际运行Pod数量一致。Node Controller：管理维护Node，定期检查Node的健康状态，标识出(失效 | 未失效)的Node节点。Namespace Controller：管理维护Namespace，定期清理无效的Namespace，包括Namesapce下的API对象，比如Pod、Service等。Service Controller：管理维护Service，提供负载以及服务代理。EndPoints Controller：管理维护Endpoints，关联Service和Pod，创建Endpoints为Service的后端，当Pod发生变化时，实时更新Endpoints。Service Account Controller：管理维护Service Account，为每个Namespace创建默认的Service Account，同时为Service Account创建Service Account Secret。Persistent Volume Controller：管理维护Persistent Volume和Persistent Volume Claim，为新的Persistent Volume Claim分配Persistent Volume进行绑定，为释放的Persistent Volume执行清理回收。Daemon Set Controller：管理维护Daemon Set，负责创建Daemon Pod，保证指定的Node上正常的运行Daemon Pod。Deployment Controller：管理维护Deployment，关联Deployment和Replication Controller，保证运行指定数量的Pod。当Deployment更新时，控制实现Replication Controller和Pod的更新。Job Controller：管理维护Job，为Jod创建一次性任务Pod，保证完成Job指定完成的任务数目Pod Autoscaler Controller：实现Pod的自动伸缩，定时获取监控数据，进行策略匹配，当满足条件时执行Pod的伸缩动作。12、简述Kubernetes RC的机制?Replication Controller用来管理Pod的副本，保证集群中存在指定数量的Pod副本。当定义了RC并提交至Kubernetes集群中之后，Master节点上的Controller Manager组件获悉，并同时巡检系统中当前存活的目标Pod，并确保目标Pod实例的数量刚好等于此RC的期望值，若存在过多的Pod副本在运行，系统会停止一些Pod，反之则自动创建一些Pod。13、简述kube-proxy作用?kube-proxy 运行在所有节点上，它监听 apiserver 中 service 和 endpoint 的变化情况，创建路由规则以提供服务 IP 和负载均衡功能。简单理解此进程是Service的透明代理兼负载均衡器，其核心功能是将到某个Service的访问请求转发到后端的多个Pod实例上。14、简述kube-proxy iptables原理?Kubernetes从1.2版本开始，将iptables作为kube-proxy的默认模式。iptables模式下的kube-proxy不再起到Proxy的作用，其核心功能：通过API Server的Watch接口实时跟踪Service与Endpoint的变更信息，并更新对应的iptables规则，Client的请求流量则通过iptables的NAT机制“直接路由”到目标Pod。15、简述kube-proxy ipvs原理?IPVS在Kubernetes1.11中升级为GA稳定版。IPVS则专门用于高性能负载均衡，并使用更高效的数据结构（Hash表），允许几乎无限的规模扩张，因此被kube-proxy采纳为最新模式。在IPVS模式下，使用iptables的扩展ipset，而不是直接调用iptables来生成规则链。iptables规则链是一个线性的数据结构，ipset则引入了带索引的数据结构，因此当规则很多时，也可以很高效地查找和匹配。可以将ipset简单理解为一个IP（段）的集合，这个集合的内容可以是IP地址、IP网段、端口等，iptables可以直接添加规则对这个“可变的集合”进行操作，这样做的好处在于可以大大减少iptables规则的数量，从而减少性能损耗。16、简述kube-proxy ipvs和iptables的异同?iptables与IPVS都是基于Netfilter实现的，但因为定位不同，二者有着本质的差别：iptables是为防火墙而设计的；IPVS则专门用于高性能负载均衡，并使用更高效的数据结构（Hash表），允许几乎无限的规模扩张。与iptables相比，IPVS拥有以下明显优势：为大型集群提供了更好的可扩展性和性能；支持比iptables更复杂的复制均衡算法（最小负载、最少连接、加权等）；支持服务器健康检查和连接重试等功能；可以动态修改ipset的集合，即使iptables的规则正在使用这个集合。17、简述Kubernetes中什么是静态Pod?静态pod是由kubelet进行管理的仅存在于特定Node的Pod上，他们不能通过API Server进行管理，无法与ReplicationController、Deployment或者DaemonSet进行关联，并且kubelet无法对他们进行健康检查。静态Pod总是由kubelet进行创建，并且总是在kubelet所在的Node上运行。18、简述Kubernetes中Pod可能位于的状态?Pending：API Server已经创建该Pod，且Pod内还有一个或多个容器的镜像没有创建，包括正在下载镜像的过程。Running：Pod内所有容器均已创建，且至少有一个容器处于运行状态、正在启动状态或正在重启状态。Succeeded：Pod内所有容器均成功执行退出，且不会重启。Failed：Pod内所有容器均已退出，但至少有一个容器退出为失败状态。Unknown：由于某种原因无法获取该Pod状态，可能由于网络通信不畅导致。19、简述Kubernetes创建一个Pod的主要流程?客户端提交Pod的配置信息（可以是yaml文件定义的信息）到kube-apiserver。Apiserver收到指令后，通知给controller-manager创建一个资源对象。Controller-manager通过api-server将pod的配置信息存储到ETCD数据中心中。Kube-scheduler检测到pod信息会开始调度预选，会先过滤掉不符合Pod资源配置要求的节点，然后开始调度调优，主要是挑选出更适合运行pod的节点，然后将pod的资源配置单发送到node节点上的kubelet组件上。Kubelet根据scheduler发来的资源配置单运行pod，运行成功后，将pod的运行信息返回给scheduler，scheduler将返回的pod运行状况的信息存储到etcd数据中心。20、简述Kubernetes中Pod的重启策略?Pod重启策略（RestartPolicy）应用于Pod内的所有容器，并且仅在Pod所处的Node上由kubelet进行判断和重启操作。当某个容器异常退出或者健康检查失败时，kubelet将根据RestartPolicy的设置来进行相应操作。Pod的重启策略包括Always、OnFailure和Never，默认值为Always。Always：当容器失效时，由kubelet自动重启该容器；OnFailure：当容器终止运行且退出码不为0时，由kubelet自动重启该容器；Never：不论容器运行状态如何，kubelet都不会重启该容器。同时Pod的重启策略与控制方式关联，当前可用于管理Pod的控制器包括ReplicationController、Job、DaemonSet及直接管理kubelet管理（静态Pod）。不同控制器的重启策略限制如下：RC和DaemonSet：必须设置为Always，需要保证该容器持续运行；Job：OnFailure或Never，确保容器执行完成后不再重启；kubelet：在Pod失效时重启，不论将RestartPolicy设置为何值，也不会对Pod进行健康检查。21、简述Kubernetes中Pod的健康检查方式?LivenessProbe探针：用于判断容器是否存活（running状态），如果LivenessProbe探针探测到容器不健康，则kubelet将杀掉该容器，并根据容器的重启策略做相应处理。若一个容器不包含LivenessProbe探针，kubelet认为该容器的LivenessProbe探针返回值用于是“Success”。ReadineeProbe探针：用于判断容器是否启动完成（ready状态）。如果ReadinessProbe探针探测到失败，则Pod的状态将被修改。Endpoint Controller将从Service的Endpoint中删除包含该容器所在Pod的Eenpoint。startupProbe探针：启动检查机制，应用一些启动缓慢的业务，避免业务长时间启动而被上面两类探针kill掉。22、简述Kubernetes Pod的LivenessProbe探针的常见方式?ExecAction：在容器内执行一个命令，若返回码为0，则表明容器健康。TCPSocketAction：通过容器的IP地址和端口号执行TCP检查，若能建立TCP连接，则表明容器健康。HTTPGetAction：通过容器的IP地址、端口号及路径调用HTTP Get方法，若响应的状态码大于等于200且小于400，则表明容器健康。23、简述Kubernetes Pod的常见调度方式?Deployment或RC：该调度策略主要功能就是自动部署一个容器应用的多份副本，以及持续监控副本的数量，在集群内始终维持用户指定的副本数量。NodeSelector：定向调度，当需要手动指定将Pod调度到特定Node上，可以通过Node的标签（Label）和Pod的nodeSelector属性相匹配。NodeAffinity亲和性调度：亲和性调度机制极大的扩展了Pod的调度能力，目前有两种节点亲和力表达：requiredDuringSchedulingIgnoredDuringExecution：硬规则，必须满足指定的规则，调度器才可以调度Pod至Node上（类似nodeSelector，语法不同）。preferredDuringSchedulingIgnoredDuringExecution：软规则，优先调度至满足的Node的节点，但不强求，多个优先级规则还可以设置权重值。Taints和Tolerations（污点和容忍）：Taint：使Node拒绝特定Pod运行；Toleration：为Pod的属性，表示Pod能容忍（运行）标注了Taint的Node。24、简述Kubernetes初始化容器（init container）?init container的运行方式与应用容器不同，它们必须先于应用容器执行完成，当设置了多个init container时，将按顺序逐个运行，并且只有前一个init container运行成功后才能运行后一个init container。当所有init container都成功运行后，Kubernetes才会初始化Pod的各种信息，并开始创建和运行应用容器。25、简述Kubernetes deployment升级过程?初始创建Deployment时，系统创建了一个ReplicaSet，并按用户的需求创建了对应数量的Pod副本。当更新Deployment时，系统创建了一个新的ReplicaSet，并将其副本数量扩展到1，然后将旧ReplicaSet缩减为2。之后，系统继续按照相同的更新策略对新旧两个ReplicaSet进行逐个调整。最后，新的ReplicaSet运行了对应个新版本Pod副本，旧的ReplicaSet副本数量则缩减为0。26、简述Kubernetes deployment升级策略?在Deployment的定义中，可以通过spec.strategy指定Pod更新的策略，目前支持两种策略：Recreate（重建）和RollingUpdate（滚动更新），默认值为RollingUpdate。Recreate：设置spec.strategy.type=Recreate，表示Deployment在更新Pod时，会先杀掉所有正在运行的Pod，然后创建新的Pod。RollingUpdate：设置spec.strategy.type=RollingUpdate，表示Deployment会以滚动更新的方式来逐个更新Pod。同时，可以通过设置spec.strategy.rollingUpdate下的两个参数（maxUnavailable和maxSurge）来控制滚动更新的过程。27、简述Kubernetes DaemonSet类型的资源特性?DaemonSet资源对象会在每个Kubernetes集群中的节点上运行，并且每个节点只能运行一个pod，这是它和deployment资源对象的最大也是唯一的区别。因此，在定义yaml文件中，不支持定义replicas。它的一般使用场景如下：在去做每个节点的日志收集工作。监控每个节点的的运行状态。28、简述Kubernetes自动扩容机制?Kubernetes使用Horizontal Pod Autoscaler（HPA）的控制器实现基于CPU使用率进行自动Pod扩缩容的功能。HPA控制器周期性地监测目标Pod的资源性能指标，并与HPA资源对象中的扩缩容条件进行对比，在满足条件时对Pod副本数量进行调整。29、简述Kubernetes Service类型?通过创建Service，可以为一组具有相同功能的容器应用提供一个统一的入口地址，并且将请求负载分发到后端的各个容器应用上。其主要类型有：ClusterIP：虚拟的服务IP地址，该地址用于Kubernetes集群内部的Pod访问，在Node上kube-proxy通过设置的iptables规则进行转发；NodePort：使用宿主机的端口，使能够访问各Node的外部客户端通过Node的IP地址和端口号就能访问服务；LoadBalancer：使用外接负载均衡器完成到服务的负载分发，需要在spec.status.loadBalancer字段指定外部负载均衡器的IP地址，通常用于公有云。30、简述Kubernetes Service分发后端的策略?Service负载分发的策略有：RoundRobin和SessionAffinityRoundRobin：默认为轮询模式，即轮询将请求转发到后端的各个Pod上。SessionAffinity：基于客户端IP地址进行会话保持的模式，即第1次将某个客户端发起的请求转发到后端的某个Pod上，之后从相同的客户端发起的请求都将被转发到后端相同的Pod上。31、简述Kubernetes Headless Service?在某些应用场景中，若需要人为指定负载均衡器，不使用Service提供的默认负载均衡的功能，或者应用程序希望知道属于同组服务的其他实例。Kubernetes提供了Headless Service来实现这种功能，即不为Service设置ClusterIP（入口IP地址），仅通过Label Selector将后端的Pod列表返回给调用的客户端。32、简述Kubernetes外部如何访问集群内的服务?映射Pod到物理机：将Pod端口号映射到宿主机，即在Pod中采用hostPort方式，以使客户端应用能够通过物理机访问容器应用。映射Service到物理机：将Service端口号映射到宿主机，即在Service中采用nodePort方式，以使客户端应用能够通过物理机访问容器应用。映射Sercie到LoadBalancer：通过设置LoadBalancer映射到云服务商提供的LoadBalancer地址。这种用法仅用于在公有云服务提供商的云平台上设置Service的场景。33、简述Kubernetes ingress?Kubernetes的Ingress资源对象，用于将不同URL的访问请求转发到后端不同的Service，以实现HTTP层的业务路由机制。Kubernetes使用了Ingress策略和Ingress Controller，两者结合并实现了一个完整的Ingress负载均衡器。使用Ingress进行负载分发时，Ingress Controller基于Ingress规则将客户端请求直接转发到Service对应的后端Endpoint（Pod）上，从而跳过kube-proxy的转发功能，kube-proxy不再起作用，全过程为：ingress controller + ingress 规则 ----> services。同时当Ingress Controller提供的是对外服务，则实际上实现的是边缘路由器的功能。34、简述Kubernetes镜像的下载策略?K8s的镜像下载策略有三种：Always、Never、IFNotPresent。Always：镜像标签为latest时，总是从指定的仓库中获取镜像。Never：禁止从仓库中下载镜像，也就是说只能使用本地镜像。IfNotPresent：仅当本地没有对应镜像时，才从目标仓库中下载。默认的镜像下载策略是：当镜像标签是latest时，默认策略是Always；当镜像标签是自定义时（也就是标签不是latest），那么默认策略是IfNotPresent。35、简述Kubernetes的负载均衡器?负载均衡器是暴露服务的最常见和标准方式之一。根据工作环境使用两种类型的负载均衡器，即内部负载均衡器或外部负载均衡器。内部负载均衡器自动平衡负载并使用所需配置分配容器，而外部负载均衡器将流量从外部负载引导至后端容器。36、简述Kubernetes各模块如何与API Server通信?Kubernetes API Server作为集群的核心，负责集群各功能模块之间的通信。集群内的各个功能模块通过API Server将信息存入etcd，当需要获取和操作这些数据时，则通过API Server提供的REST接口（用GET、LIST或WATCH方法）来实现，从而实现各模块之间的信息交互。如kubelet进程与API Server的交互：每个Node上的kubelet每隔一个时间周期，就会调用一次API Server的REST接口报告自身状态，API Server在接收到这些信息后，会将节点状态信息更新到etcd中。如kube-controller-manager进程与API Server的交互：kube-controller-manager中的Node Controller模块通过API Server提供的Watch接口实时监控Node的信息，并做相应处理。如kube-scheduler进程与API Server的交互：Scheduler通过API Server的Watch接口监听到新建Pod副本的信息后，会检索所有符合该Pod要求的Node列表，开始执行Pod调度逻辑，在调度成功后将Pod绑定到目标节点上。37、简述Kubernetes Scheduler作用及实现原理?Kubernetes Scheduler是负责Pod调度的重要功能模块，Kubernetes Scheduler在整个系统中承担了“承上启下”的重要功能，“承上”是指它负责接收Controller Manager创建的新Pod，为其调度至目标Node；“启下”是指调度完成后，目标Node上的kubelet服务进程接管后继工作，负责Pod接下来生命周期。Kubernetes Scheduler的作用是将待调度的Pod（API新创建的Pod、Controller Manager为补足副本而创建的Pod等）按照特定的调度算法和调度策略绑定（Binding）到集群中某个合适的Node上，并将绑定信息写入etcd中。在整个调度过程中涉及三个对象，分别是待调度Pod列表、可用Node列表，以及调度算法和策略。Kubernetes Scheduler通过调度算法调度为待调度Pod列表中的每个Pod从Node列表中选择一个最适合的Node来实现Pod的调度。随后，目标节点上的kubelet通过API Server监听到Kubernetes Scheduler产生的Pod绑定事件，然后获取对应的Pod清单，下载Image镜像并启动容器。38、简述Kubernetes Scheduler使用哪两种算法将Pod绑定到worker节点?预选（Predicates）：输入是所有节点，输出是满足预选条件的节点。kube-scheduler根据预选策略过滤掉不满足策略的Nodes。如果某节点的资源不足或者不满足预选策略的条件则无法通过预选。如“Node的label必须与Pod的Selector一致”。优选（Priorities）：输入是预选阶段筛选出的节点，优选会根据优先策略为通过预选的Nodes进行打分排名，选择得分最高的Node。例如，资源越富裕、负载越小的Node可能具有越高的排名。39、简述Kubernetes kubelet的作用?在Kubernetes集群中，在每个Node（又称Worker）上都会启动一个kubelet服务进程。该进程用于处理Master下发到本节点的任务，管理Pod及Pod中的容器。每个kubelet进程都会在API Server上注册节点自身的信息，定期向Master汇报节点资源的使用情况，并通过cAdvisor监控容器和节点资源。40、简述Kubernetes kubelet监控Worker节点资源是使用什么组件来实现的?kubelet使用cAdvisor对worker节点资源进行监控。在 Kubernetes 系统中，cAdvisor 已被默认集成到 kubelet 组件内，当 kubelet 服务启动时，它会自动启动 cAdvisor 服务，然后 cAdvisor 会实时采集所在节点的性能指标及在节点上运行的容器的性能指标。41、简述Kubernetes如何保证集群的安全性?Kubernetes通过一系列机制来实现集群的安全控制，主要有如下不同的维度：基础设施方面：保证容器与其所在宿主机的隔离；权限方面：最小权限原则：合理限制所有组件的权限，确保组件只执行它被授权的行为，通过限制单个组件的能力来限制它的权限范围。用户权限：划分普通用户和管理员的角色。集群方面：API Server的认证授权：Kubernetes集群中所有资源的访问和变更都是通过Kubernetes API Server来实现的，因此需要建议采用更安全的HTTPS或Token来识别和认证客户端身份（Authentication），以及随后访问权限的授权（Authorization）环节。API Server的授权管理：通过授权策略来决定一个API调用是否合法。对合法用户进行授权并且随后在用户访问时进行鉴权，建议采用更安全的RBAC方式来提升集群安全授权。敏感数据引入Secret机制：对于集群敏感数据建议使用Secret方式进行保护。AdmissionControl（准入机制）：对kubernetes api的请求过程中，顺序为：先经过认证 & 授权，然后执行准入操作，最后对目标对象进行操作。42、简述Kubernetes准入机制?在对集群进行请求时，每个准入控制代码都按照一定顺序执行。如果有一个准入控制拒绝了此次请求，那么整个请求的结果将会立即返回，并提示用户相应的error信息。准入控制（AdmissionControl）准入控制本质上为一段准入代码，在对kubernetes api的请求过程中，顺序为：先经过认证 & 授权，然后执行准入操作，最后对目标对象进行操作。常用组件（控制代码）如下：AlwaysAdmit：允许所有请求AlwaysDeny：禁止所有请求，多用于测试环境。ServiceAccount：它将serviceAccounts实现了自动化，它会辅助serviceAccount做一些事情，比如如果pod没有serviceAccount属性，它会自动添加一个default，并确保pod的serviceAccount始终存在。LimitRanger：观察所有的请求，确保没有违反已经定义好的约束条件，这些条件定义在namespace中LimitRange对象中。NamespaceExists：观察所有的请求，如果请求尝试创建一个不存在的namespace，则这个请求被拒绝。43、简述Kubernetes RBAC及其特点（优势）?RBAC是基于角色的访问控制，是一种基于个人用户的角色来管理对计算机或网络资源的访问的方法。相对于其他授权模式，RBAC具有如下优势：对集群中的资源和非资源权限均有完整的覆盖。整个RBAC完全由几个API对象完成， 同其他API对象一样， 可以用kubectl或API进行操作。可以在运行时进行调整，无须重新启动API Server。44、简述Kubernetes Secret作用?Secret对象，主要作用是保管私密数据，比如密码、OAuth Tokens、SSH Keys等信息。将这些私密信息放在Secret对象中比直接放在Pod或Docker Image中更安全，也更便于使用和分发。45、简述Kubernetes Secret有哪些使用方式?创建完secret之后，可通过如下三种方式使用：在创建Pod时，通过为Pod指定Service Account来自动使用该Secret。通过挂载该Secret到Pod来使用它。在Docker镜像下载时使用，通过指定Pod的spc.ImagePullSecrets来引用它。46、简述Kubernetes PodSecurityPolicy机制?Kubernetes PodSecurityPolicy是为了更精细地控制Pod对资源的使用方式以及提升安全策略。在开启PodSecurityPolicy准入控制器后，Kubernetes默认不允许创建任何Pod，需要创建PodSecurityPolicy策略和相应的RBAC授权策略（Authorizing Policies），Pod才能创建成功。47、简述Kubernetes PodSecurityPolicy机制能实现哪些安全策略?在PodSecurityPolicy对象中可以设置不同字段来控制Pod运行时的各种安全策略，常见的有：特权模式：privileged是否允许Pod以特权模式运行。宿主机资源：控制Pod对宿主机资源的控制，如hostPID：是否允许Pod共享宿主机的进程空间。用户和组：设置运行容器的用户ID（范围）或组（范围）。提升权限：AllowPrivilegeEscalation：设置容器内的子进程是否可以提升权限，通常在设置非root用户（MustRunAsNonRoot）时进行设置。SELinux：进行SELinux的相关配置。48、简述Kubernetes网络模型?Kubernetes网络模型中每个Pod都拥有一个独立的IP地址，并假定所有Pod都在一个可以直接连通的、扁平的网络空间中。所以不管它们是否运行在同一个Node（宿主机）中，都要求它们可以直接通过对方的IP进行访问。设计这个原则的原因是，用户不需要额外考虑如何建立Pod之间的连接，也不需要考虑如何将容器端口映射到主机端口等问题。同时为每个Pod都设置一个IP地址的模型使得同一个Pod内的不同容器会共享同一个网络命名空间，也就是同一个Linux网络协议栈。这就意味着同一个Pod内的容器可以通过localhost来连接对方的端口。在Kubernetes的集群里，IP是以Pod为单位进行分配的。一个Pod内部的所有容器共享一个网络堆栈（相当于一个网络命名空间，它们的IP地址、网络设备、配置等都是共享的）。49、简述Kubernetes CNI模型?CNI提供了一种应用容器的插件化网络解决方案，定义对容器网络进行操作和配置的规范，通过插件的形式对CNI接口进行实现。CNI仅关注在创建容器时分配网络资源，和在销毁容器时删除网络资源。在CNI模型中只涉及两个概念：容器和网络。容器（Container）：是拥有独立Linux网络命名空间的环境，例如使用Docker或rkt创建的容器。容器需要拥有自己的Linux网络命名空间，这是加入网络的必要条件。网络（Network）：表示可以互连的一组实体，这些实体拥有各自独立、唯一的IP地址，可以是容器、物理机或者其他网络设备（比如路由器）等。对容器网络的设置和操作都通过插件（Plugin）进行具体实现，CNI插件包括两种类型：CNI Plugin和IPAM（IP Address Management）Plugin。CNI Plugin负责为容器配置网络资源，IPAM Plugin负责对容器的IP地址进行分配和管理。IPAM Plugin作为CNI Plugin的一部分，与CNI Plugin协同工作。50、简述Kubernetes网络策略?为实现细粒度的容器间网络访问隔离策略，Kubernetes引入Network Policy。Network Policy的主要功能是对Pod间的网络通信进行限制和准入控制，设置允许访问或禁止访问的客户端Pod列表。Network Policy定义网络策略，配合策略控制器（Policy Controller）进行策略的实现。51、简述Kubernetes网络策略原理?Network Policy的工作原理主要为：policy controller需要实现一个API Listener，监听用户设置的Network Policy定义，并将网络访问规则通过各Node的Agent进行实际设置（Agent则需要通过CNI网络插件实现）。52、简述Kubernetes中flannel的作用?Flannel可以用于Kubernetes底层网络的实现，主要作用有：它能协助Kubernetes，给每一个Node上的Docker容器都分配互相不冲突的IP地址。它能在这些IP地址之间建立一个覆盖网络（Overlay Network），通过这个覆盖网络，将数据包原封不动地传递到目标容器内。53、简述Kubernetes Calico网络组件实现原理?Calico是一个基于BGP的纯三层的网络方案，与OpenStack、Kubernetes、AWS、GCE等云平台都能够良好地集成。Calico在每个计算节点都利用Linux Kernel实现了一个高效的vRouter来负责数据转发。每个vRouter都通过BGP协议把在本节点上运行的容器的路由信息向整个Calico网络广播，并自动设置到达其他节点的路由转发规则。Calico保证所有容器之间的数据流量都是通过IP路由的方式完成互联互通的。Calico节点组网时可以直接利用数据中心的网络结构（L2或者L3），不需要额外的NAT、隧道或者Overlay Network，没有额外的封包解包，能够节约CPU运算，提高网络效率。54、简述Kubernetes共享存储的作用?Kubernetes对于有状态的容器应用或者对数据需要持久化的应用，因此需要更加可靠的存储来保存应用产生的重要数据，以便容器应用在重建之后仍然可以使用之前的数据。因此需要使用共享存储。55、简述Kubernetes数据持久化的方式有哪些?Kubernetes通过数据持久化来持久化保存重要数据，常见的方式有：EmptyDir（空目录）：没有指定要挂载宿主机上的某个目录，直接由Pod内保部映射到宿主机上。类似于docker中的manager volume。场景：只需要临时将数据保存在磁盘上，比如在合并/排序算法中；作为两个容器的共享存储。特性：同个pod里面的不同容器，共享同一个持久化目录，当pod节点删除时，volume的数据也会被删除。emptyDir的数据持久化的生命周期和使用的pod一致，一般是作为临时存储使用。Hostpath：将宿主机上已存在的目录或文件挂载到容器内部。类似于docker中的bind mount挂载方式。特性：增加了pod与节点之间的耦合。PersistentVolume（简称PV）：如基于NFS服务的PV，也可以基于GFS的PV。它的作用是统一数据持久化目录，方便管理。56、简述Kubernetes PV和PVC?PV是对底层网络共享存储的抽象，将共享存储定义为一种“资源”。PVC则是用户对存储资源的一个“申请”。57、简述Kubernetes PV生命周期内的阶段?某个PV在生命周期中可能处于以下4个阶段（Phaes）之一。Available：可用状态，还未与某个PVC绑定。Bound：已与某个PVC绑定。Released：绑定的PVC已经删除，资源已释放，但没有被集群回收。Failed：自动资源回收失败。58、简述Kubernetes所支持的存储供应模式?Kubernetes支持两种资源的存储供应模式：静态模式（Static）和动态模式（Dynamic）。静态模式：集群管理员手工创建许多PV，在定义PV时需要将后端存储的特性进行设置。动态模式：集群管理员无须手工创建PV，而是通过StorageClass的设置对后端存储进行描述，标记为某种类型。此时要求PVC对存储的类型进行声明，系统将自动完成PV的创建及与PVC的绑定。59、简述Kubernetes CSI模型?Kubernetes CSI是Kubernetes推出与容器对接的存储接口标准，存储提供方只需要基于标准接口进行存储插件的实现，就能使用Kubernetes的原生存储机制为容器提供存储服务。CSI使得存储提供方的代码能和Kubernetes代码彻底解耦，部署也与Kubernetes核心组件分离，显然，存储插件的开发由提供方自行维护，就能为Kubernetes用户提供更多的存储功能，也更加安全可靠。CSI包括CSI Controller和CSI Node：CSI Controller的主要功能是提供存储服务视角对存储资源和存储卷进行管理和操作。CSI Node的主要功能是对主机（Node）上的Volume进行管理和操作。60、简述Kubernetes Worker节点加入集群的过程?通常需要对Worker节点进行扩容，从而将应用系统进行水平扩展。主要过程如下：在该Node上安装Docker、kubelet和kube-proxy服务； 然后配置kubelet和kubeproxy的启动参数，将Master URL指定为当前Kubernetes集群Master的地址，最后启动这些服务；通过kubelet默认的自动注册机制，新的Worker将会自动加入现有的Kubernetes集群中； Kubernetes Master在接受了新Worker的注册之后，会自动将其纳入当前集群的调度范围。61、简述Kubernetes Pod如何实现对节点的资源控制?Kubernetes集群里的节点提供的资源主要是计算资源，计算资源是可计量的能被申请、分配和使用的基础资源。当前Kubernetes集群中的计算资源主要包括CPU、GPU及Memory。CPU与Memory是被Pod使用的，因此在配置Pod时可以通过参数CPU Request及Memory Request为其中的每个容器指定所需使用的CPU与Memory量，Kubernetes会根据Request的值去查找有足够资源的Node来调度此Pod。通常，一个程序所使用的CPU与Memory是一个动态的量，确切地说，是一个范围，跟它的负载密切相关：负载增加时，CPU和Memory的使用量也会增加。62、简述Kubernetes Requests和Limits如何影响Pod的调度?当一个Pod创建成功时，Kubernetes调度器（Scheduler）会为该Pod选择一个节点来执行。对于每种计算资源（CPU和Memory）而言，每个节点都有一个能用于运行Pod的最大容量值。调度器在调度时，首先要确保调度后该节点上所有Pod的CPU和内存的Requests总和，不超过该节点能提供给Pod使用的CPU和Memory的最大容量值。63、简述Kubernetes Metric Service?在Kubernetes从1.10版本后采用Metrics Server作为默认的性能数据采集和监控，主要用于提供核心指标（Core Metrics），包括Node、Pod的CPU和内存使用指标。对其他自定义指标（Custom Metrics）的监控则由Prometheus等组件来完成。64、简述Kubernetes中，如何使用EFK实现日志的统一管理在Kubernetes集群环境中，通常一个完整的应用或服务涉及组件过多，建议对日志系统进行集中化管理，通常采用EFK实现。EFK是 Elasticsearch、Fluentd 和 Kibana 的组合，其各组件功能如下：Elasticsearch：是一个搜索引擎，负责存储日志并提供查询接口；Fluentd：负责从 Kubernetes 搜集日志，每个node节点上面的fluentd监控并收集该节点上面的系统日志，并将处理过后的日志信息发送给Elasticsearch；Kibana：提供了一个 Web GUI，用户可以浏览和搜索存储在 Elasticsearch 中的日志。通过在每台node上部署一个以DaemonSet方式运行的fluentd来收集每台node上的日志。Fluentd将docker日志目录/var/lib/docker/containers和/var/log目录挂载到Pod中，然后Pod会在node节点的/var/log/pods目录中创建新的目录，可以区别不同的容器日志输出，该目录下有一个日志文件链接到/var/lib/docker/contianers目录下的容器日志输出。65、简述Kubernetes如何进行优雅的节点关机维护?由于Kubernetes节点运行大量Pod，因此在进行关机维护之前，建议先使用kubectl drain将该节点的Pod进行驱逐，然后进行关机维护。66、简述Kubernetes集群联邦?Kubernetes集群联邦可以将多个Kubernetes集群作为一个集群进行管理。因此，可以在一个数据中心/云中创建多个Kubernetes集群，并使用集群联邦在一个地方控制/管理所有集群。67、简述Helm及其优势?Helm 是 Kubernetes 的软件包管理工具。类似 Ubuntu 中使用的apt、Centos中使用的yum 或者Python中的 pip 一样。Helm能够将一组K8S资源打包统一管理, 是查找、共享和使用为Kubernetes构建的软件的最佳方式。 Helm中通常每个包称为一个Chart，一个Chart是一个目录（一般情况下会将目录进行打包压缩，形成name-version.tgz格式的单一文件，方便传输和存储）。Helm优势在 Kubernetes中部署一个可以使用的应用，需要涉及到很多的 Kubernetes 资源的共同协作。使用helm则具有如下优势：统一管理、配置和更新这些分散的 k8s 的应用资源文件；分发和复用一套应用模板；将应用的一系列资源当做一个软件包管理。对于应用发布者而言，可以通过 Helm 打包应用、管理应用依赖关系、管理应用版本并发布应用到软件仓库。对于使用者而言，使用 Helm 后不用需要编写复杂的应用部署文件，可以以简单的方式在 Kubernetes 上查找、安装、升级、回滚、卸载应用程序。68、标签与标签选择器的作用是什么?标签可以附加在kubernetes任何资源对象之上的键值型数据，常用于标签选择器的匹配度检查，从而完成资源筛选标签选择器用于表达标签的查询条件或选择标准，Kubernetes API目前支持两个选择器：基于等值关系（equality-based）的标签选项器以及基于集合关系（set-based）的标签选择器。69、考虑一家拥有分布式系统的跨国公司，拥有大量数据中心，虚拟机和许多从事各种任务的员工。您认为这样公司如何以与Kubernetes一致的方式管理所有任务?正如我们所有人都知道IT部门推出了数千个容器，其任务在分布式系统中遍布全球众多节点。在这种情况下，公司可以使用能够为基于云的应用程序提供敏捷性，横向扩展功能和DevOps实践的东西。因此，该公司可以使用Kubernetes来定制他们的调度架构并支持多种容器格式。这使得容器任务之间的亲和性成为可能，从而提供更高的效率，并为各种容器网络解决方案和容器存储提供广泛支持。70、考虑一种情况，即公司希望通过维持最低成本来提高其效率和技术运营速度。您认为公司将如何实现这一目标?公司可以通过构建CI/CD管道来实现DevOps方法，但是这里可能出现的一个问题是配置可能需要一段时间才能启动并运行。因此，在实施CI/CD管道之后，公司的下一步应该是在云环境中工作。一旦他们开始处理云环境，他们就可以在集群上安排容器，并可以在Kubernetes的帮助下进行协调。这种方法将有助于公司缩短部署时间，并在各种环境中加快速度。71、假设一家公司想要修改它的部署方法，并希望建立一个更具可扩展性和响应性的平台。您如何看待这家公司能够实现这一目标以满足客户需求?为了给数百万客户提供他们期望的数字体验，公司需要一个可扩展且响应迅速的平台，以便他们能够快速地将数据发送到客户网站。现在，要做到这一点，公司应该从他们的私有数据中心（如果他们使用任何）转移到任何云环境，如AWS。不仅如此，他们还应该实现微服务架构，以便他们可以开始使用Docker容器。一旦他们准备好基础框架，他们就可以开始使用最好的编排平台，即Kubernetes。这将使团队能够自主地构建应用程序并快速交付它们。72、考虑一家拥有非常分散的系统的跨国公司，期待解决整体代码库问题。您认为公司如何解决他们的问题?那么，为了解决这个问题，我们可以将他们的单片代码库转移到微服务设计，然后每个微服务都可以被视为一个容器。因此，所有这些容器都可以在Kubernetes的帮助下进行部署和协调。73、我们所有人都知道，从单片到微服务的转变解决了开发方面的问题，但却增加了部署方面的问题。公司如何解决部署方面的问题?团队可以试验容器编排平台，例如Kubernetes，并在数据中心运行。因此，通过这种方式，公司可以生成模板化应用程序，在五分钟内部署它，并在此时将实际实例集中在暂存环境中。这种Kubernetes项目将有数十个并行运行的微服务，以提高生产率，即使节点出现故障，也可以立即重新安排，而不会影响性能。74、考虑一家拼车公司希望通过同时扩展其平台来增加服务器数量,公司如何有效地实现这种资源分配?这个问题的解决方案就是Kubernetes。Kubernetes确保资源得到有效优化，并且只使用特定应用程序所需的那些资源。因此，通过使用最佳容器编排工具，公司可以有效地实现资源分配。75、您认为公司如何处理服务器及其安装?公司可以采用集装箱化的概念。一旦他们将所有应用程序部署到容器中，他们就可以使用Kubernetes进行编排，并使用像Prometheus这样的容器监视工具来监视容器中的操作。因此，利用容器的这种使用，在数据中心中为它们提供更好的容量规划，因为它们现在将受到更少的限制，因为服务和它们运行的硬件之间存在抽象。76、考虑一种情况，公司希望向具有各种环境的客户提供所有必需的分发。您认为他们如何以动态的方式实现这一关键目标?该公司可以使用Docker环境，组建一个横截面团队，使用Kubernetes构建Web应用程序。这种框架将帮助公司实现在最短的时间内将所需产品投入生产的目标。因此，在这样的机器运行的情况下，公司可以向所有具有各种环境的客户发放电子邮件。77、假设公司希望在不同的云基础架构上运行各种工作负载，从裸机到公共云。公司将如何在不同界面的存在下实现这一目标?该公司可以将其基础设施分解为微服务，然后采用Kubernetes。这将使公司在不同的云基础架构上运行各种工作负载。78、什么是Google容器引擎?Google Container Engine（GKE）是Docker容器和集群的开源管理平台。这个基于 Kubernetes的引擎仅支持在Google的公共云服务中运行的群集。79、您如何看待公司从单—服务转向微服务并部署其服务容器?由于公司的目标是从单一应用程序转向微服务，它们最终可以逐个构建，并行构建，只需在后台切换配置。然后他们可以将这些内置微服务放在Kubernetes平台上。因此，他们可以从一次或两次迁移服务开始，并监控它们以确保一切运行稳定。一旦他们觉得一切顺利，他们就可以将其余的应用程序迁移到他们的Kubernetes集群中。80、什么是Headless Service？Headless Service类似于“普通”服务，但没有群集IP。此服务使您可以直接访问pod，而无需通过代理访问它。
-
-
html5+css3新特性 HTML5新特性概述HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。语义化标签 （★★）以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的<div class=“header”> </div> <div class=“nav”> </div> <div class=“content”> </div> <div class=“footer”> </div> 发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签 <header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档某个区域 <aside> 侧边栏标签 <footer> 尾部标签 多媒体标签多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。因为多媒体标签的 属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。视频标签- video（★★★）基本使用当前 元素支持三种视频格式： 尽量使用 mp4格式使用语法： <video src="media/mi.mp4"></video> 兼容写法由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可<video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > <source src="move.mp4" type="video/mp4" > 您的浏览器暂不支持 <video> 标签播放视频 </ video > 上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本video 常用属性属性很多，有一些属性需要大家重点掌握： autoplay 自动播放 注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性 width 宽度 height 高度 loop 循环播放 src 播放源 muted 静音播放 示例代码：<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video> 音频标签- audio基本使用当前 元素支持三种视频格式： 尽量使用 mp3格式使用语法：<audio src="media/music.mp3"></audio> 兼容写法由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可< audio controls="controls" > <source src="happy.mp3" type="audio/mpeg" > <source src="happy.ogg" type="audio/ogg" > 您的浏览器暂不支持 <audio> 标签。 </ audio> 上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本audio 常用属性示例代码：<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio> 小结 音频标签和视频标签使用方式基本一致 浏览器支持情况不同 谷歌浏览器把音频和视频自动播放禁止了 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决） 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性 新增的表单元素 （★★）在H5中，帮我们新增加了很多类型的表单，这样方便了程序员的开发课堂案例：在这个案例中，熟练了新增表单的用法案例代码：<!-- 我们验证的时候必须添加form表单域 --> <form action=""> <ul> <li>邮箱: <input type="email" /></li> <li>网址: <input type="url" /></li> <li>日期: <input type="date" /></li> <li>时间: <input type="time" /></li> <li>数量: <input type="number" /></li> <li>手机号码: <input type="tel" /></li> <li>搜索: <input type="search" /></li> <li>颜色: <input type="color" /></li> <!-- 当我们点击提交按钮就可以验证表单了 --> <li> <input type="submit" value="提交"></li> </ul> </form> 常见输入类型text password radio checkbox button file hidden submit reset image 新的输入类型类型很多，我们现阶段重点记忆三个： number tel searchCSS3新特性CSS3 的现状 新增的CSS3特性有兼容性问题，ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 现阶段主要学习：新增选择器和盒子模型以及其他特性 CSS3 新增选择器CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 属性选择器 结构伪类选择器 伪元素选择器 属性选择器（★★）属性选择器，按照字面意思，都是根据标签中的属性来选择元素示例代码： /* 只选择 type =text 文本框的input 选取出来 */ input[type=text] { color: pink; } /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */ div[class^=icon] { color: red; } /* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */ section[class$=data] { color: blue; } 属性选择器，按照字面意思，都是根据标签中的属性来选择元素 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器 属性选择器也可以选择出来自定义的属性 **注意：**类选择器、属性选择器、伪类选择器，权重为 10。 结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素E:first-child匹配父元素的第一个子元素E <style> ul li:first-child{ background-color: red; } </style> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul> E:last-child 则是选择到了最后一个li标签E:nth-child(n)（★★★）匹配到父元素的第n个元素 匹配到父元素的第2个子元素ul li:nth-child(2){} 匹配到父元素的序号为奇数的子元素ul li:nth-child(odd){} odd 是关键字 奇数的意思（3个字母 ） 匹配到父元素的序号为偶数的子元素ul li:nth-child(even){} even（4个字母 ） 匹配到父元素的前3个子元素ul li:nth-child(-n+3){}选择器中的 n 是怎么变化的呢？因为 n是从 0 ，1，2，3.. 一直递增所以 -n+3 就变成了 n=0 时 -0+3=3 n=1时 -1+3=2 n=2时 -2+3=1 n=3时 -3+3=0 ... 一些常用的公式： 公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码常用的结构伪类选择器是： nth-child(n) {...}E:nth-child 与 E:nth-of-type 的区别这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可<style> ul li:nth-child(2){ /* 字体变成红色 */ color: red; } ul li:nth-of-type(2){ /* 背景变成绿色 */ background-color: green; } </style> <ul> <li>列表项一</li> <p>乱来的p标签</p> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul> 也就是说： E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配 E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子 小结 结构伪类选择器一般用于选择父级里面的第几个孩子 nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配 nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式 如果是无序列表，我们肯定用 nth-child 更多 类选择器、属性选择器、伪类选择器，权重为 10 伪元素选择器（★★★）伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构示例demo<style> div { width: 200px; height: 200px; background-color: pink; } /* div::before 权重是2 */ div::before { /* 这个content是必须要写的 */ content: '我'; } div::after { content: '小猪佩奇'; } </style> <body> <div> 是 </div> </body> 注意： before 和 after 创建一个元素，但是属于行内元素 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素 语法： element::before {} before 和 after 必须有 content 属性 before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素伪元素选择器和标签选择器一样，权重为 1 应用场景一： 字体图标在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的 编码步骤： 结构中定义div盒子 在style中先申明字体 @font-face 在style中定义after伪元素 div::after{...} 在after伪元素中 设置content属性，属性的值就是字体编码 在after伪元素中 设置font-family的属性 利用定位的方式，让伪元素定位到相应的位置；记住定位口诀：子绝父相 <head> ... <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?1lv3na'); src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?1lv3na') format('truetype'), url('fonts/icomoon.woff?1lv3na') format('woff'), url('fonts/icomoon.svg?1lv3na#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } div { position: relative; width: 200px; height: 35px; border: 1px solid red; } div::after { position: absolute; top: 10px; right: 10px; font-family: 'icomoon'; /* content: ''; */ content: '\e91e'; color: red; font-size: 18px; } </style> </head> <body> <div></div> </body> 应用场景二： 仿土豆效果把之前的代码进行了改善步骤： 找到之前写过的仿土豆的结构和样式，拷贝到自己的页面中 删除之前的mask遮罩 在style中，给大的div盒子（类名叫tudou的），设置 before伪元素 这个伪元素充当的是遮罩的角色，所以我们不用设置内容，但是需要设置content属性，属性的值为空字符串 给这个遮罩设置宽高，背景颜色，默认是隐藏的 当鼠标移入到 div盒子时候，让遮罩显示，利用 hover 来实现 <head> ... <style> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img { width: 100%; height: 100%; } .tudou::before { content: ''; /* 隐藏遮罩层 */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center; } /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */ .tudou:hover::before { /* 而是显示元素 */ display: block; } </style> </head> <body> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> </body> 应用场景三： 清除浮动回忆一下清除浮动的方式： 额外标签法也称为隔墙法，是 W3C 推荐的做法。 父级添加 overflow 属性 父级添加after伪元素 父级添加双伪元素 额外标签法也称为隔墙法，是 W3C 推荐的做法注意： 要求这个新的空标签必须是块级元素后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化盒子模型（★★★）CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变可以分成两种情况： box-sizing: content-box 盒子大小为 width + padding + border （以前默认的） box-sizing: border-box 盒子大小为 width 如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）其他特性（★）图标变模糊 -- CSS3滤镜filterfilter CSS属性将模糊或颜色偏移等图形效果应用于元素语法：filter: 函数(); --> 例如： filter: blur(5px); --> blur模糊处理 数值越大越模糊 计算盒子宽度 -- calc 函数calc() 此CSS函数让你在声明CSS属性值时执行一些计算语法：width: calc(100% - 80px); 括号里面可以使用 + - * / 来进行计算CSS3 过渡（★★★）过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画： 是从一个状态 渐渐的过渡到另外一个状态可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始; 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以 花费时间： 单位是 秒（必须写单位） 比如 0.5s 运动曲线： 默认是 ease （可以省略） 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略） 后面两个属性可以省略 记住过渡的使用口诀： 谁做过渡给谁加 过渡练习步骤： 创建两个div的盒子，属于的嵌套关系，外层类名叫 bar，里层类名叫 bar_in 给外层的bar 这个盒子设置边框，宽高，圆角边框 给里层的bar_in 设置 初试的宽度，背景颜色，过渡效果 给外层的 bar 添加 hover事件，当触发了hover事件 让里层的bar_in 来进行宽度的变化 代码：<head> ... <style> .bar { width: 150px; height: 15px; border: 1px solid red; border-radius: 7px; padding: 1px; } .bar_in { width: 50%; height: 100%; background-color: red; /* 谁做过渡给谁加 */ transition: all .7s; } .bar:hover .bar_in { width: 100%; } </style> </head> <body> <div class="bar"> <div class="bar_in"></div> </div> </body> 广义H5说法 了解狭隘H5广义H5 广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。 这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5 。 虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。 HTML5 MDN 介绍：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
-
css精灵图 1. 精灵图（重点）1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为什么使用精灵图（目的）： 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理： 将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。精灵图举例:1.2 精灵图（sprites）的使用使用精灵图核心： 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。 这个大图片也称为 sprites 精灵图 或者 雪碧图 移动背景图片位置， 此时可以使用 background-position 。 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同 因为一般情况下都是往上往左移动，所以数值是负值。 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。 使用精灵图核心总结： 精灵图主要针对于小的背景图片使用。 主要借助于背景位置来实现---background-position 。 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。） 1.3 案例：拼出自己名字1.3.1 案例效果1.3.2 代码参考结构<span class="p">p</span> <span class="i">i</span> <span class="n">n</span> <span class="k">k</span> 样式span { display: inline-block; background: url(images/abcd.jpg) no-repeat; } .p { width: 100px; height: 112px; /* background-color: pink; */ background-position: -493px -276px; } .i { width: 60px; height: 108px; /* background-color: pink; */ background-position: -327px -142px; } .n { width: 108px; height: 109px; /* background-color: pink; */ background-position: -215px -141px; } .k { width: 105px; height: 114px; /* background-color: pink; */ background-position: -495px -142px; } 2. 字体图标2.1 字体图标的产生字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。精灵图是有诸多优点的，但是缺点很明显。1.图片文件还是比较大的。2.图片本身放大和缩小会失真。3.一旦图片制作完毕想要更换非常复杂。此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。2.2 字体图标的优点轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等 兼容性：几乎支持所有的浏览器，请放心使用 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。 总结：1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。使用步骤字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：1.字体图标的下载2.字体图标的引入 （引入到我们html页面中）3.字体图标的追加 （以后添加新的小图标）2.3 字体图标的下载推荐下载网站： icomoon 字库 http://icomoon.io 推荐指数 ★★★★★ IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★ 这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 重点是，免费！2.4 字体图标的引入下载完毕之后，注意原先的文件不要删，后面会用。 把下载包里面的 fonts 文件夹放入页面根目录下 字体文件格式 不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。1).TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；2).Web Open Font Format( .woff )格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；3).Embedded Open Type( .eot )格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；4).SVG( .svg )格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；2.在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。一定注意字体文件路径的问题 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; } html 标签内添加小图标。 给标签定义字体。 span { font-family: "icomoon"; } 注意：务必保证 这个字体和上面@font-face里面的字体保持一致2.5 字体图标的追加如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。2.6 字体图标加载的原理：3. CSS 三角3.1 介绍网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。一张图， 你就知道 CSS 三角是怎么来的了, 做法如下： div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; } 我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0; 3.2 案例：京东三角3.2.1效果图3.2.2 代码参考<!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>CSS 三角制作</title> <style> .box1 { width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; } .box2 { width: 0; height: 0; border: 50px solid transparent; border-left-color: pink; margin: 100px auto; } .jd { position: relative; width: 120px; height: 249px; background-color: pink; } .jd span { position: absolute; right: 15px; top: -10px; width: 0; height: 0; /* 为了照顾兼容性 */ line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom-color: pink; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="jd"> <span></span> </div> </body> </html> 4. CSS 用户界面样式什么是界面样式所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式 表单轮廓 防止表单域拖拽 4.1 鼠标样式 cursor li { cursor: pointer; } 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。4.2 轮廓线 outline给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。 input { outline: none; } 4.3 防止拖拽文本域 resize实际开发中，我们文本域右下角是不可以拖拽的。 textarea{ resize: none; } vertical-align 属性应用5. vertical-align 属性应用CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。语法：vertical-align : baseline | top | middle | bottom 5.1 图片、表单和文字对齐图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。5.2 解决图片底部默认空白缝隙问题bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。主要解决方法有两种：1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）2.把图片转换为块级元素 display: block;6. 溢出的文字省略号显示6.1 单行文本溢出显示省略号单行文本溢出显示省略号--必须满足三个条件： /*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis; 6.2 多行文本溢出显示省略号（了解）多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）/*1. 超出的部分隐藏 */ overflow: hidden; /*2. 文字用省略号替代超出的部分 */ text-overflow: ellipsis; /* 3. 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 4. 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 2; /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; 更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。7. 常见布局技巧巧妙利用一个技术更快更好的布局： margin负值的运用 文字围绕浮动元素 行内块的巧妙运用 CSS三角强化 7.1. margin负值运用1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）7.2 文字围绕浮动元素效果布局示意图巧妙运用浮动元素不会压住文字的特性7.3 行内块巧妙运用页码在页面中间显示: 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center; 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中 7.4. CSS 三角强化 案例7.4.1 原理<style> .box1 { width: 0; height: 0; /* 把上边框宽度调大 */ /* border-top: 100px solid transparent; border-right: 50px solid skyblue; */ /* 左边和下边的边框宽度设置为0 */ /* border-bottom: 0 solid blue; border-left: 0 solid green; */ /* 1.只保留右边的边框有颜色 */ border-color: transparent red transparent transparent; /* 2. 样式都是solid */ border-style: solid; /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */ border-width: 100px 50px 0 0 ; } </style> </head> <body> <div class="box1"></div> </body> 7.4.2 案例效果7.4.3 代码参考<!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>CSS三角强化的巧妙运用</title> <style> .price { width: 160px; height: 24px; line-height: 24px; border: 1px solid red; margin: 0 auto; } .miaosha { position: relative; float: left; width: 90px; height: 100%; background-color:red; text-align: center; color: #fff; font-weight: 700; margin-right: 8px; } .miaosha i { position: absolute; right: 0; top: 0; width: 0; height: 0; border-color: transparent #fff transparent transparent; border-style: solid; border-width: 24px 10px 0 0; } .origin { font-size: 12px; color: gray; text-decoration: line-through; } </style> </head> <body> <div class="price"> <span class="miaosha"> ¥1650 <i></i> </span> <span class="origin">¥5650</span> </div> </body> </html> 8. CSS 初始化不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）每个网页都必须首先进行 CSS初始化。这里我们以 京东CSS初始化代码为例。Unicode编码字体：把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。比如：黑体 \9ED1\4F53宋体 \5B8B\4F53微软雅黑 \5FAE\8F6F\96C5\9ED1
-
-
-
备份与迁移k8s集群神器 前言一般来说大家都用etcd备份恢复k8s集群，但是有时候我们可能不小心删掉了一个namespace，假设这个ns里面有上百个服务，瞬间没了，怎么办？当然了，可以用CI/CD系统发布，但是时间会花费很久，这时候，vmvare的Velero出现了。velero可以帮助我们：灾备场景，提供备份恢复k8s集群的能力迁移场景，提供拷贝集群资源到其他集群的能力（复制同步开发，测试，生产环境的集群配置，简化环境配置）下面我就介绍一下如何使用 Velero 完成备份和迁移。Velero 地址：https://github.com/vmware-tanzu/veleroACK 插件地址：https://github.com/AliyunContainerService/velero-plugin下载 Velero 客户端Velero 由客户端和服务端组成，服务器部署在目标 k8s 集群上，而客户端则是运行在本地的命令行工具。前往 Velero 的 Release 页面 下载客户端，直接在 GitHub 上下载即可解压 release 包将 release 包中的二进制文件 velero 移动到 $PATH 中的某个目录下执行 velero -h 测试部署velero-plugin插件拉取代码git clone https://github.com/AliyunContainerService/velero-plugin 配置修改#修改`install/credentials-velero`文件，将新建用户中获得的`AccessKeyID`和`AccessKeySecret`填入，这里的 OSS EndPoint 为之前 OSS 的访问域名 ALIBABA_CLOUD_ACCESS_KEY_ID=<ALIBABA_CLOUD_ACCESS_KEY_ID> ALIBABA_CLOUD_ACCESS_KEY_SECRET=<ALIBABA_CLOUD_ACCESS_KEY_SECRET> ALIBABA_CLOUD_OSS_ENDPOINT=<ALIBABA_CLOUD_OSS_ENDPOINT> #修改 `install/01-velero.yaml`，将 OSS 配置填入： --- apiVersion: v1 kind: ServiceAccount metadata: namespace: velero name: velero --- apiVersion: rbac.authorization.k8s.io/v1 kind: ClusterRoleBinding metadata: labels: component: velero name: velero roleRef: apiGroup: rbac.authorization.k8s.io kind: ClusterRole name: cluster-admin subjects: - kind: ServiceAccount name: velero namespace: velero --- apiVersion: velero.io/v1 kind: BackupStorageLocation metadata: labels: component: velero name: default namespace: velero spec: config: region: cn-beijing objectStorage: bucket: k8s-backup-test prefix: test provider: alibabacloud --- apiVersion: velero.io/v1 kind: VolumeSnapshotLocation metadata: labels: component: velero name: default namespace: velero spec: config: region: cn-beijing provider: alibabacloud --- apiVersion: extensions/v1beta1 kind: Deployment metadata: name: velero namespace: velero spec: replicas: 1 selector: matchLabels: deploy: velero template: metadata: annotations: prometheus.io/path: /metrics prometheus.io/port: "8085" prometheus.io/scrape: "true" labels: component: velero deploy: velero spec: serviceAccountName: velero containers: - name: velero # sync from velero/velero:v1.2.0 image: registry.cn-hangzhou.aliyuncs.com/acs/velero:v1.2.0 imagePullPolicy: IfNotPresent command: - /velero args: - server - --default-volume-snapshot-locations=alibabacloud:default env: - name: VELERO_SCRATCH_DIR value: /scratch - name: ALIBABA_CLOUD_CREDENTIALS_FILE value: /credentials/cloud volumeMounts: - mountPath: /plugins name: plugins - mountPath: /scratch name: scratch - mountPath: /credentials name: cloud-credentials initContainers: - image: registry.cn-hangzhou.aliyuncs.com/acs/velero-plugin-alibabacloud:v1.2-991b590 imagePullPolicy: IfNotPresent name: velero-plugin-alibabacloud volumeMounts: - mountPath: /target name: plugins volumes: - emptyDir: {} name: plugins - emptyDir: {} name: scratch - name: cloud-credentials secret: secretName: cloud-credentials k8s 部署 Velero 服务# 新建 namespace kubectl create namespace velero # 部署 credentials-velero 的 secret kubectl create secret generic cloud-credentials --namespace velero --from-file cloud=install/credentials-velero # 部署 CRD kubectl apply -f install/00-crds.yaml # 部署 Velero kubectl apply -f install/01-velero.yaml 备份测试这里，我们将使用velero备份一个集群内相关的resource，并在当该集群出现一些故障或误操作的时候，能够快速恢复集群resource， 首先我们用下面的yaml来部署：--- apiVersion: v1 kind: Namespace metadata: name: nginx-example labels: app: nginx --- apiVersion: apps/v1beta1 kind: Deployment metadata: name: nginx-deployment namespace: nginx-example spec: replicas: 2 template: metadata: labels: app: nginx spec: containers: - image: nginx:1.7.9 name: nginx ports: - containerPort: 80 --- apiVersion: v1 kind: Service metadata: labels: app: nginx name: my-nginx namespace: nginx-example spec: ports: - port: 80 targetPort: 80 selector: app: nginx 我们可以全量备份，也可以只备份需要备份的一个namespace，本处只备份一个namespace：nginx-example[rsync@velero-plugin]$ kubectl get pods -n nginx-example NAME READY STATUS RESTARTS AGE nginx-deployment-5c689d88bb-f8vsx 1/1 Running 0 6m31s nginx-deployment-5c689d88bb-rt2zk 1/1 Running 0 6m32s [rsync@velero]$ cd velero-v1.4.0-linux-amd64/ [rsync@velero-v1.4.0-linux-amd64]$ ll total 56472 drwxrwxr-x 4 rsync rsync 4096 Jun 1 15:02 examples -rw-r--r-- 1 rsync rsync 10255 Dec 10 01:08 LICENSE -rwxr-xr-x 1 rsync rsync 57810814 May 27 04:33 velero [rsync@velero-v1.4.0-linux-amd64]$ ./velero backup create nginx-backup --include-namespaces nginx-example --wait Backup request "nginx-backup" submitted successfully. Waiting for backup to complete. You may safely press ctrl-c to stop waiting - your backup will continue in the background. . Backup completed with status: Completed. You may check for more information using the commands `velero backup describe nginx-backup` and `velero backup logs nginx-backup`. 删除ns[rsync@velero-v1.4.0-linux-amd64]$ kubectl delete namespaces nginx-example namespace "nginx-example" deleted [rsync@velero-v1.4.0-linux-amd64]$ kubectl get pods -n nginx-example No resources found. 恢复[rsync@velero-v1.4.0-linux-amd64]$ ./velero restore create --from-backup nginx-backup --wait Restore request "nginx-backup-20200603180922" submitted successfully. Waiting for restore to complete. You may safely press ctrl-c to stop waiting - your restore will continue in the background. Restore completed with status: Completed. You may check for more information using the commands `velero restore describe nginx-backup-20200603180922` and `velero restore logs nginx-backup-20200603180922`. [rsync@velero-v1.4.0-linux-amd64]$ kubectl get pods -n nginx-example NAME READY STATUS RESTARTS AGE nginx-deployment-5c689d88bb-f8vsx 1/1 Running 0 5s nginx-deployment-5c689d88bb-rt2zk 0/1 ContainerCreating 0 5s 可以看到已经恢复了 另外迁移和备份恢复也是一样的，下面看一个特殊的，再部署一个项目，之后恢复会不会删掉新部署的项目。新建了一个tomcat容器[rsync@tomcat-test]$ kubectl get pods -n nginx-example NAME READY STATUS RESTARTS AGE nginx-deployment-5c689d88bb-f8vsx 1/1 Running 0 65m nginx-deployment-5c689d88bb-rt2zk 1/1 Running 0 65m tomcat-test-sy-677ff78f6b-rc5vq 1/1 Running 0 7s restore 一下[rsync@velero-v1.4.0-linux-amd64]$ ./velero restore create --from-backup nginx-backup Restore request "nginx-backup-20200603191726" submitted successfully. Run `velero restore describe nginx-backup-20200603191726` or `velero restore logs nginx-backup-20200603191726` for more details. [rsync@velero-v1.4.0-linux-amd64]$ kubectl get pods -n nginx-example NAME READY STATUS RESTARTS AGE nginx-deployment-5c689d88bb-f8vsx 1/1 Running 0 68m nginx-deployment-5c689d88bb-rt2zk 1/1 Running 0 68m tomcat-test-sy-677ff78f6b-rc5vq 1/1 Running 0 2m33s 可以看到没有覆盖 删除nginx的deployment，在restore[rsync@velero-v1.4.0-linux-amd64]$ kubectl delete deployment nginx-deployment -n nginx-example deployment.extensions "nginx-deployment" deleted [rsync@velero-v1.4.0-linux-amd64]$ kubectl get pods -n nginx-example NAME READY STATUS RESTARTS AGE tomcat-test-sy-677ff78f6b-rc5vq 1/1 Running 0 4m18s [rsync@velero-v1.4.0-linux-amd64]$ ./velero restore create --from-backup nginx-backup Restore request "nginx-backup-20200603191949" submitted successfully. Run `velero restore describe nginx-backup-20200603191949` or `velero restore logs nginx-backup-20200603191949` for more details. [rsync@velero-v1.4.0-linux-amd64]$ kubectl get pods -n nginx-example NAME READY STATUS RESTARTS AGE nginx-deployment-5c689d88bb-f8vsx 1/1 Running 0 2s nginx-deployment-5c689d88bb-rt2zk 0/1 ContainerCreating 0 2s tomcat-test-sy-677ff78f6b-rc5vq 1/1 Running 0 4m49s 可以看到，对我们的tomcat项目是没影响的。 结论：velero恢复不是直接覆盖，而是会恢复当前集群中不存在的resource，已有的resource不会回滚到之前的版本，如需要回滚，需在restore之前提前删除现有的resource。高级用法可以设置一个周期性定时备份# 每日1点进行备份 velero create schedule <SCHEDULE NAME> --schedule="0 1 * * *" # 每日1点进行备份，备份保留48小时 velero create schedule <SCHEDULE NAME> --schedule="0 1 * * *" --ttl 48h # 每6小时进行一次备份 velero create schedule <SCHEDULE NAME> --schedule="@every 6h" # 每日对 web namespace 进行一次备份 velero create schedule <SCHEDULE NAME> --schedule="@every 24h" --include-namespaces web 定时备份的名称为：`<SCHEDULE NAME>-<TIMESTAMP>`，恢复命令为：`velero restore create --from-backup <SCHEDULE NAME>-<TIMESTAMP>`。 如需备份恢复持久卷，备份如下：velero backup create nginx-backup-volume --snapshot-volumes --include-namespaces nginx-example 该备份会在集群所在region给云盘创建快照（当前还不支持NAS和OSS存储），快照恢复云盘只能在同region完成。恢复命令如下：velero restore create --from-backup nginx-backup-volume --restore-volumes 删除备份方法一，通过命令直接删除velero delete backups default-backup 方法二，设置备份自动过期，在创建备份时，加上TTL参数velero backup create <BACKUP-NAME> --ttl <DURATION> 还可为资源添加指定标签，添加标签的资源在备份的时候被排除。# 添加标签 kubectl label -n <ITEM_NAMESPACE> <RESOURCE>/<NAME> velero.io/exclude-from-backup=true # 为 default namespace 添加标签 kubectl label -n default namespace/default velero.io/exclude-from-backup=true 参考链接https://yq.aliyun.com/articles/705007?spm=a2c4e.11163080.searchblog.140.1a8b2ec1TYJPbF 院长技术
-
K8s基于自定义指标实现自动扩容 基于自定义指标除了基于 CPU 和内存来进行自动扩缩容之外，我们还可以根据自定义的监控指标来进行。这个我们就需要使用 Prometheus Adapter，Prometheus 用于监控应用的负载和集群本身的各种指标，Prometheus Adapter 可以帮我们使用 Prometheus 收集的指标并使用它们来制定扩展策略，这些指标都是通过 APIServer 暴露的，而且 HPA 资源对象也可以很轻易的直接使用。下面来看具体怎么实现的！部署应用首先，我们部署一个示例应用，在该应用程序上测试 Prometheus 指标自动缩放，资源清单文件如下所示：（podinfo.yaml）--- apiVersion: apps/v1 kind: Deployment metadata: name: podinfo spec: selector: matchLabels: app: podinfo replicas: 1 template: metadata: labels: app: podinfo annotations: prometheus.io/scrape: 'true' spec: containers: - name: podinfod image: stefanprodan/podinfo:0.0.1 imagePullPolicy: Always command: - ./podinfo - -port=9898 - -logtostderr=true - -v=2 volumeMounts: - name: metadata mountPath: /etc/podinfod/metadata readOnly: true ports: - containerPort: 9898 protocol: TCP readinessProbe: httpGet: path: /readyz port: 9898 initialDelaySeconds: 1 periodSeconds: 2 failureThreshold: 1 livenessProbe: httpGet: path: /healthz port: 9898 initialDelaySeconds: 1 periodSeconds: 3 failureThreshold: 2 resources: requests: memory: "32Mi" cpu: "1m" limits: memory: "256Mi" cpu: "100m" volumes: - name: metadata downwardAPI: items: - path: "labels" fieldRef: fieldPath: metadata.labels - path: "annotations" fieldRef: fieldPath: metadata.annotations --- apiVersion: v1 kind: Service metadata: name: podinfo labels: app: podinfo spec: type: NodePort ports: - port: 9898 targetPort: 9898 nodePort: 31198 protocol: TCP selector: app: podinfo 接下来我们将 Prometheus-Adapter 安装到集群中，这里选用helm安装，当然也可以直接yaml文件安装。Prometheus-Adapter规则Prometheus-Adapter 规则大致 可以分为以下几个部分：seriesQuery：查询 Prometheus 的语句，通过这个查询语句查询到的所有指标都可以用于 HPA seriesFilters：查询到的指标可能会存在不需要的，可以通过它过滤掉。 resources：通过 seriesQuery 查询到的只是指标，如果需要查询某个 Pod 的指标，肯定要将它的名称和所在的命名空间作为指标的标签进行查询，resources 就是将指标的标签和 k8s 的资源类型关联起来，最常用的就是 pod 和 namespace。有两种添加标签的方式，一种是 overrides，另一种是 template。 overrides：它会将指标中的标签和 k8s 资源关联起来。上面示例中就是将指标中的 pod 和 namespace 标签和 k8s 中的 pod 和 namespace 关联起来，因为 pod 和 namespace 都属于核心 api 组，所以不需要指定 api 组。当我们查询某个 pod 的指标时，它会自动将 pod 的名称和名称空间作为标签加入到查询条件中。比如 pod: {group: "apps", resource: "deployment"} 这么写表示的就是将指标中 podinfo 这个标签和 apps 这个 api 组中的 deployment 资源关联起来； template：通过 go 模板的形式。比如template: "kube_<<.Group>>_<<.Resource>>" 这么写表示，假如 <<.Group>> 为 apps，<<.Resource>> 为 deployment，那么它就是将指标中 kube_apps_deployment 标签和 deployment 资源关联起来。 name：用来给指标重命名的，之所以要给指标重命名是因为有些指标是只增的，比如以 total 结尾的指标。这些指标拿来做 HPA 是没有意义的，我们一般计算它的速率，以速率作为值，那么此时的名称就不能以 total 结尾了，所以要进行重命名。 matches：通过正则表达式来匹配指标名，可以进行分组 as：默认值为 $1，也就是第一个分组。as 为空就是使用默认值的意思。 metricsQuery：这就是 Prometheus 的查询语句了，前面的 seriesQuery 查询是获得 HPA 指标。当我们要查某个指标的值时就要通过它指定的查询语句进行了。可以看到查询语句使用了速率和分组，这就是解决上面提到的只增指标的问题。 Series：表示指标名称 LabelMatchers：附加的标签，目前只有 pod 和 namespace 两种，因此我们要在之前使用 resources 进行关联 GroupBy：就是 pod 名称，同样需要使用 resources 进行关联。 安装我们新建 hpa-prome-adapter-values.yaml 文件覆盖默认的 Values 值 ，安装Prometheus-Adapter，我用的helm2文件如下：rules: default: false custom: - seriesQuery: 'http_requests_total' resources: overrides: kubernetes_namespace: resource: namespace kubernetes_pod_name: resource: pod name: matches: "^(.*)_total" as: "${1}_per_second" metricsQuery: (sum(rate(<<.Series>>{<<.LabelMatchers>>}[1m])) by (<<.GroupBy>>)) prometheus: url: http://prometheus-clusterip.monitor.svc.cluster.local 安装helm repo add apphub https://apphub.aliyuncs.com/ helm install --name prome-adapter --namespace monitor -f hpa-prome-adapter-values.yaml apphub/prometheus-adapter 等一小会儿，安装完成后，可以使用下面的命令来检测是否生效了：[root@prometheus]# kubectl get --raw="/apis/custom.metrics.k8s.io/v1beta1" | jq { "kind": "APIResourceList", "apiVersion": "v1", "groupVersion": "custom.metrics.k8s.io/v1beta1", "resources": [ { "name": "namespaces/http_requests_per_second", "singularName": "", "namespaced": false, "kind": "MetricValueList", "verbs": [ "get" ] }, { "name": "pods/http_requests_per_second", "singularName": "", "namespaced": true, "kind": "MetricValueList", "verbs": [ "get" ] } ] } 我们可以看到 http_requests_per_second 指标可用。 现在，让我们检查该指标的当前值：[root@prometheus]# kubectl get --raw "/apis/custom.metrics.k8s.io/v1beta1/namespaces/default/pods/*/http_requests_per_second" | jq . { "kind": "MetricValueList", "apiVersion": "custom.metrics.k8s.io/v1beta1", "metadata": { "selfLink": "/apis/custom.metrics.k8s.io/v1beta1/namespaces/default/pods/%2A/http_requests_per_second" }, "items": [ { "describedObject": { "kind": "Pod", "namespace": "default", "name": "podinfo-5cdc457c8b-99xtw", "apiVersion": "/v1" }, "metricName": "http_requests_per_second", "timestamp": "2020-06-02T12:01:01Z", "value": "888m", "selector": null }, { "describedObject": { "kind": "Pod", "namespace": "default", "name": "podinfo-5cdc457c8b-b7pfz", "apiVersion": "/v1" }, "metricName": "http_requests_per_second", "timestamp": "2020-06-02T12:01:01Z", "value": "888m", "selector": null } ] } 下面部署hpa对象apiVersion: autoscaling/v2beta1 kind: HorizontalPodAutoscaler metadata: name: podinfo spec: scaleTargetRef: apiVersion: extensions/v1beta1 kind: Deployment name: podinfo minReplicas: 2 maxReplicas: 5 metrics: - type: Pods pods: metricName: http_requests_per_second targetAverageValue: 3 部署之后，可见：[root@prometheus-adapter]# kubectl get hpa NAME REFERENCE TARGETS MINPODS MAXPODS REPLICAS AGE podinfo Deployment/podinfo 911m/10 2 5 2 70s [root@prometheus-adapter]# kubectl describe hpa Name: podinfo Namespace: default Labels: <none> Annotations: kubectl.kubernetes.io/last-applied-configuration: {"apiVersion":"autoscaling/v2beta1","kind":"HorizontalPodAutoscaler","metadata":{"annotations":{},"name":"podinfo","namespace":"default"},... CreationTimestamp: Tue, 02 Jun 2020 17:53:14 +0800 Reference: Deployment/podinfo Metrics: ( current / target ) "http_requests_per_second" on pods: 911m / 10 Min replicas: 2 Max replicas: 5 Deployment pods: 2 current / 2 desired Conditions: Type Status Reason Message ---- ------ ------ ------- AbleToScale True ScaleDownStabilized recent recommendations were higher than current one, applying the highest recent recommendation ScalingActive True ValidMetricFound the HPA was able to successfully calculate a replica count from pods metric http_requests_per_second 做一个ab压测：ab -n 2000 -c 5 http://sy.test.com:31198/ 观察下hpa变化：Events: Type Reason Age From Message ---- ------ ---- ---- ------- Normal SuccessfulRescale 9m29s horizontal-pod-autoscaler New size: 3; reason: pods metric http_requests_per_second above target Normal SuccessfulRescale 9m18s horizontal-pod-autoscaler New size: 4; reason: pods metric http_requests_per_second above target Normal SuccessfulRescale 3m34s horizontal-pod-autoscaler New size: 3; reason: All metrics below target Normal SuccessfulRescale 3m4s horizontal-pod-autoscaler New size: 2; reason: All metrics below target 发现触发扩容动作了，副本到了4，并且压测结束后，过了5分钟左右，又恢复到最小值2个。参考链接:https://github.com/directxman12/k8s-prometheus-adapter院长技术
-
-
