div+css实现流程图步骤介绍工序悬浮文字效果代码-html代码-BFW代码库

div+css实现流程图步骤介绍工序悬浮文字效果代码

代码语言：html

代码描述：div+css实现流程图步骤介绍工序悬浮文字效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <meta charset="utf-8">

    <style>
        @charset "utf-8";
        	* {
        	margin:0;
        	padding:0
        }
        body {
        	font-family:'Microsoft YaHei';
        	font-size:12px;
        	padding-top:200px;
        }
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote {
        
        	margin:0
        }
        table,td,tr,th {
        	font-size:12px
        }
        li {
        	list-style-type:none
        }
        table {
        	margin:0 auto
        }
        img {
        	vertical-align:top;
        	border:0
        }
        ol,ul {
        	list-style:none
        }
        caption,th {
        	text-align:left
        }
        a {
        	text-decoration:none;
        	color:#000
        }
        a:hover {
        	color:#000;
        	text-decoration:none
        }
        .main1140 {
        	width:1140px;
        	margin:0 auto;
        	overflow:hidden
        }
        .process-box {
        	width:1140px;
        	height:450px
        }
        .process-box ul {
        	width:1140px
        }
        .process-box ul li {
        	width:196px;
        	height:196px;
        	float:left;
        	cursor:pointer;
        	position:relative
        }
        .process-box ul li .kuang {
        	position:absolute;
        	width:196px;
        	height:196px;
        	-moz-transform:rotate(45deg);
        	-webkit-transform:rotate(45deg);
        	-o-transform:rotate(45deg);
        	transform:rotate(45deg);
        	border:1px solid #ddd;
        	margin-top:42px;
        	margin-left:42px
        }
        .process-box ul li .kuang1 {
        	top:0;
        	left:0;
        	z-index:1
        }
        .process-box ul li .kuang2 {
        	left:5px;
        	top:0;
        	z-index:2
        }
        .process-box ul li .text1 {
        	width:276px;
        	height:276px;
        	text-align:center;
        	z-index:3;
        	position:absolute;
        	left:7px;
        	top:2px
        }
        .process-box ul li .text1 .bg {
        	width:276px;
        	height:276px
        }
        .process-box ul li .text1 .bg1 {
        	background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img1.png) no-repeat
        }
        .process-box ul li .text1 .bg2 {
        	background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img2.png) no-repeat
        }
        .process-box ul li .text1 .bg3 {
        	background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img3.png) no-repeat
        }
        .process-box ul li .text1 .bg4 {
        	background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img4.png) no-repeat
        }
        .process-box ul li .text1 .bg5 {
        	background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img5.png) no-repeat
        }
        .process-box ul li .text1 .bg6 {
        	background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img6.png) no-repeat
        }
        .process-box ul li .text1 .bg7 {
        	background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img7.png) no-repeat
        }
        .process-box ul li .text1 .num {
        	padding-top:50px;
        	font-size:86px;
        	color:#dacdc2;
        	font-weight:700
        }
        .process-box ul li .text1 .title {
        	font-size:15px;
        	color:#422710
        }
        .process-box ul li .text1 .eng {
        	font-size:12px;
        	color:#b4a078
        }
        .process-box ul li .text2 {
        	width:276px;
        	height:276px;
        	z-index:4;
        	position:absolute;
        	left:5px;
        	top:0;
        	display:none
        }
        .process-box ul li .text2 .mengban {
        	border:1px solid #533b26;
        	position:absolute;
        	z-index:1;
        	width:196px;
        	height:196px;
        	-moz-transform:rotate(45deg);
        	-webkit-transform:rotate(45deg);
        	-o-transform:rotate(45deg);
        	transform:rotate(45deg);
        	background:#533b26;
        	margin-top:42px;
        	margin-left:42px
        }
        .process-box ul li .text2 .desc {
        	position:ab.........完整代码请登录后点击上方下载按钮下载查看