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

本文链接：https://blog.csdn.net/weixin_44541948/article/details/114269529

前端学习记录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>