前端学习记录13-CSS-滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素
滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transition)获得焦点元素(:focus)滑动门技术
在某些地方出现了凹凸样式
例如鼠标放在元素上 元素凹下去了
首页显示为凸起状态
微信用的就是这个
滑动门技术主要是 让背景自由拉伸滑动 适应元素内文本内容
通过li>a>span来实现
a设置左侧背景
针对背景图的左对齐显示内容 并且需要一定的左内边距
通过line-height来调整以下文字的位置
span设置右侧背景
针对背景图的右对齐显示内容 需要在background中加入right并且需要一定的右内边距
因为是滑动门 左右推拉
跟文字本身宽度有关系 所以需要使用inline-block
微信导航栏实现
上边介绍了滑动门的设计，根据此设计可以写出微信的导航栏样式
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>微信一种生活的方式</title><style type="text/css">*{margin: 0;padding: 0;}li{list-style: none;}.bg{width: 100%;background: url('images/wx.jpg') repeat-x;}.bx{margin: 0 auto;width: 1020px;height: 75px;}.logo a img{float: left;margin-top: 15px;width: 130px;height: 44px;}.nav{float: right;width: 800px;}.nav li{margin-top: 23px;margin-left: 4px;float: left;}.nav li .home-a{display: inline-block;height: 33px;line-height: 33px;background: url('images/tu.png') no-repeat;padding-left: 15px;font-size: 13px;font-weight: 600;color: #FFF;text-decoration: none;border-radius: 20px 20px 25px 20px;}.nav li .home-span{display: inline-block;height: 33px;background: url('images/tu.png') no-repeat right;padding-right: 15px;border-radius: 0 20px 25px 0;}.nav li .nav-a{display: inline-block;padding-left: 15px;height: 33px;line-height: 33px;color: #FFF;font-size: 13px;text-decoration: none;}.nav li .nav-span{display: inline-block;height: 33px;padding-right: 15px;}.nav li .nav-a:hover{background: url('images/ao.png') no-repeat;border-radius: 20px 20px 25px 20px;}.nav li .nav-a:hover .nav-span{background: url('images/ao.png') no-repeat right;border-radius: 0 20px 25px 0;}</style></head><body><!-- 背景 --><div class="bg"><!-- 版心 --><div class="bx"><!-- 微信logo --><div class="logo"><a href="#"><img src="images/dNEBuK6.png"></a></div><!-- 导航栏 --><ul class="nav"><!-- 首页比较特殊只有凸起效果 其他的需要在鼠标放置时右凹陷效果 --><li><a href="#" class="home-a"><span class="home-span">首页</span></a></li><li><a href="#" class="nav-a"><span class="nav-span">帮助与反馈</span></a></li><li><a href="#"class="nav-a"><span class="nav-span">公众平台</span></a></li><li><a href="#"class="nav-a"><span class="nav-span">开放平台</span></a></li><li><a href="#"class="nav-a"><span class="nav-span">微信支付</span></a></li><li><a href="#"class="nav-a"><span class="nav-span">微信广告</span></a></li><li><a href="#"class="nav-a"><span class="nav-span">企业微信</span></a></li><li><a href="#"class="nav-a"><span class="nav-span">表情开放平台</span></a></li><li><a href="#"class="nav-a"><span class="nav-span">微信网页版</span></a></li></ul></div></div></body></html>
静态轮播图实现
针对没有js元素，只是单纯的静态页面，轮播图的设计
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>淘宝轮播图</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}.tb-adv{position: relative;margin: 200px auto 0;width: 520px;height: 280px;}.arrow-left,.arrow-right{position: absolute;top: 50%;margin-top: -15px;width: 20px;height: 30px;line-height: 30px;text-decoration: none;color: #fff;background-color: rgba(0, 0, 0, 0.2);}.arrow-left{left: 0;/* 因为设定了圆角所以不需要让文字水平居中所以让他保证默认的左对齐就行了 */color: #fff;/* 设定圆角样式 */border-radius: 0 15px 15px 0;}.arrow-right{right: 0;/* 因为此样式在右侧并且有圆角所以得让文字右居中才能看的舒服 */text-align: right;border-radius: 15px 0 0 15px;}.arrow-left:hover,.arrow-right:hover{background-color: rgba(0, 0, 0, 0.4);}.carousel{position: absolute;left: 50%;margin-left: -35px;bottom: 5%;width: 70px;height: 15px;background-color: rgba(255, 255, 255, 0.3);border-radius: 7px;}.carousel li{float: left;width: 8px;height: 8px;border-radius: 50%;background-color: #fff;margin: 3px;}.carousel li a{display: block;width: 8px;height: 8px;border-radius: 50%;}.carousel li a:hover{background-color: orange;}</style></head><body><div class="tb-adv"><a href="#" class="arrow-left"><</a><a href="#" class="arrow-right">></a><img src="images/taobao.jpg"><ul class="carousel"><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></body></html>
网上引用的图标字体设置
通过
/
https://icomoon.io/
可以下载各种适量字体，然后导入到数据库中，从html文件中引用进网站内进行设计。
减少图片的引用，并且样式更好操作，从而优化整个页面。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>字体测试</title><style type="text/css">/* 字体声明 一般从网上下载的字体包文件自带这个东西*/@font-face {/* 字体名,想叫啥叫啥但是下头调用的时候得写正确 */font-family: 'icomoon';/* 路径问题需要注意这里边的内容一般都不会一样 都在下载的字体包中的css文件存在 */src: url('fonts/icomoon.eot?xn4h7e');src: url('fonts/icomoon.eot?xn4h7e#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?xn4h7e') format('truetype'),url('fonts/icomoon.woff?xn4h7e') format('woff'),url('fonts/icomoon.svg?xn4h7e#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span{/* 调用上头声明的字体 */font-family: 'icomoon';}</style></head><body><span></span></body></html>
过渡效果(transition)
在同一个标签中 不能同时写入两个transition只有一个会生效 谁后写的谁生效
若有多个需要transition的样式 直接用,隔开即可
可用这个样式进行变色的操作 并且这个变色还看起来很流畅 不突兀
通常情况 为了节省时间 可以使用
trasition: all 1s ease;来控制所以样式属性变化
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 500px;height: 500px;background-color: skyblue;/* transition: width 1s ease 0s,height 1s ease 0s,background-color 1s ease; */transition: all 1s ease;}div:hover{width: 800px;height: 900px;background-color: #000;}</style></head><body><div></div></body></html>
获得焦点元素(:focus)
使用:focus伪类选择器 可获得焦点的元素 主要针对表单元素
和:hover的作用很相似 只不过是针对表单的 点击表单后改变样式
前端学习记录13-CSS-(滑动门技术 微信导航栏实现 淘宝轮播图实现 图标字体实现 过渡效果 获得焦点元素)
