滑动门技术

在某些地方出现了凹凸样式
例如鼠标放在元素上元素凹下去了
首页显示为凸起状态

微信用的就是这个

滑动门技术主要是让背景自由拉伸滑动适应元素内文本内容

通过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">&lt;</a><a href="#" class="arrow-right">&gt;</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://www.iconfont.cn/
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; 来控制所以样式属性变化

属性值	说明
transition-property	规定应用过渡的css属性名称例如宽度边框或者等等等等
transition-duration	定义过渡效果花费的时间默认为0 单位为 s和ms 必须要写单位
transition-timing-function	规定过渡效果的时间曲线默认为ease 运动曲线有五种属性 linear 匀速 ease 逐渐变慢 ease-in 加速 ease-out 减速(初始速度比匀速快) ease-in-out 先加速再减速
transition-delay	规定过渡效果何时开始默认为0 触发时间

<!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-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)相关推荐

css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享发布时间:2009-10-15 12:48:01 作者:佚名我要评论可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...
css滑动门技术的应用,DIV+CSS滑动门技术简介
你对DIV+CSS滑动门技术的概念和使用是否熟悉,这里和大家分享一下,其实DIV+CSS滑动门技术是一种只需要鼠标悬停便可自动切换板块的JS特效,相信本文介绍一定会让你有所收获. DIV+CSS滑动门 ...
前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]
滑动门门技术所谓滑动门技术就是利用背景图片的分割,实现不同内容长度下,按钮的可伸缩性. 具体思路:根据文本自适应大小,我们可用两个独立的背景图像来创造它.一个在左边,一个在右边.把这两幅图像想象成两 ...
前端学习记录（CSS篇）
CSS Cascading Style Sheet,层叠样式表,将网页内容和显示样式分离,提高程序性能. 它是一种专门描述结构文档的表现方式的文档,主要用于网页风格设计,包括字体大小.颜色.以及元素的 ...
css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果
简而言之就是,将导航的ul列表放在一个盒子里,然后导航栏置顶,设置透明度,设置z-index值效果图如下: 页面代码: body: <div clas ...
前端学习记录(三) CSS浮动、定位与居中
目录浮动清除浮动方法1: 清除浮动方法2: CSS定位 relative定位 absolute定位 fixed定位居中水平居中垂直居中水平垂直居中浮动现在我们想在页面中 ...
＜CSS练习＞淘宝轮播图案例含素材（CSS定位）
本案例综合了CSS定位的使用以及一些前端基础知识的结合效果图如下: 首先写一个大盒子里面放入主要图片左按钮利用绝对定位设置在主要图片的左中位置右按钮同理设置在右中位置利用ul l ...
CSS综合案例——淘宝轮播图/焦点图布局的制作
轮播图如下: 图片素材可在淘宝下,记得在代码中设定为相应的图片像素大小. 思路: 大盒子可以设置类名为: tb-promo 淘宝广告里面先放一张图片. 左右两个按钮用链接就可以. 左箭头 prev ...
CSS学习笔记——滑动门技术
1.CSS滑动门技术产生的原因例如:导航栏中,同样的背景,字数不同,背景可以自己适应字数的增加,本质上就是各种形状背景的左右自由拉伸,以适应元素内部的文本内容. 2.CSS精灵技术精灵技术的本质: ...

前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)

前端学习记录13-CSS-滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素