html网页多终端预览效果图切换
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <style> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: 0 0 } body { line-height: 1 } ol,ul { list-style: none } blockquote,q { quotes: none } blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none } :focus { outline: 0 } ins { text-decoration: none } del { text-decoration: line-through } table { border-collapse: collapse; border-spacing: 0 } a { text-decoration: none; color: #fff } body { font-family: kreon; font-weight: 300; color: #333; background: #f5f5f5 } #switcher { height: 54px; z-index: 99999; position: fixed; width: 100%; top: 0; background: #000 } .center { width: 100%; padding-top: 0 } .center ul li { display: inline; float: left; position: relative } .logoTop,.top2 { margin-left: 30px; margin-right: 30px; margin-top: 20px; color: #fff; font-weight: 700; } @media screen and (max-width:1082px) { #sj { display: none } #sj2 { display: none }} .top2 { position: relative; margin-top: 0; font-size: 12px; font-weight: 400; background-image: url(img/2vmd.png); background-repeat: no-repeat; background-position: 3px center; padding-top: 17px; padding-bottom: 16px; padding-left: 45px; line-height: 20px; padding-right: 15px; background-position: 15px; background-color: #2b2b2b } .vm { position: absolute; top: 53px; left: 0; background-color: #fff; height: 170px; width: 150px; display: none; padding: 30px } .top2:hover .vm { display: block } .logoTop a:hover { text-decoration: underline } .center ul li ul { font-family: 'droid serif',serif; display: none; margin-left: 17px; position: absolute; width: 313px; background: #10100f; border: 1px solid #323024; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding-bottom: 3px; line-height: 18px } .center ul li ul li:hover a { color: #f8bc06 } .center ul li ul li:hover .tag { color: #f8bc06 } .center ul li ul li:first-child { margin-top: 3px } li.purchase a:hover { background-position: 0 -36px } li.remove_frame { margin-left: 17px; float: right!important; margin-right: 30px } li.remove_frame a { background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e7bc24ffa1.png) no-repeat 0 0; width: 20px; height: 21px; display: block; margin-top: 18px; transition: all .3s ease-out 0s } li.remove_frame a:hover { background-position: 0 -21px } #iframe { margin-top: 0 } .icon-monitor,.icon-tablet,.icon-mobile-1,.icon-mobile-2,.icon-mobile-3 { margin-right: 7px; margin-top: 20px; width: 17px; height: 16px } .icon-monitor { margin-left: 10px; background-image: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png); background-position: 0 0; background-repeat: no-repeat } .icon-tablet { background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -24px 0 } .icon-mobile-1 { background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -49px 0 } .icon-monitor:hover,.icon-monitor.active { background-position: 0 -16px } .icon-tablet:hover,.icon-tablet.active { background-position: -24px -16px } .icon-mobile-1:hover,.icon-mobile-1.active { background-position: -49px -16px } .icon-mobile-2 { background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -71px 0 } .icon-mobile-3 { background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -94px 0 } .icon-mobile-2:hover,.icon-mobile-2.active { background-position: -71px -16px } .icon-mobile-3:hover,.icon-mobile-3.active { background-position: -94px -16px } #iframe-wrap { height: 100%; overflow: visible; position: relative; top: 54px; z-index: 50 } .tablet-width { height: 960px!important; margin: 0 auto; padding: 96px 100px 115px 49px; width: 785px; margin-top: 40px; background: url(//repo.bfw.wiki/bfwrepo/image/5e1e76f746aed.png) no-repeat 0 0; transition: all .5s ease 0s } .tablet-width iframe { height: 960px!important } .mobile-width { height: 703px!important; margin: 0 auto; padding: 41px 115px 100px 75px; width: 1041px; margin-top: 40px; background: url(//repo.bfw.wiki/bfwrepo/image/5e1e770912c6f.png) no-repeat; transition: all .5s ease 0s } .mobile-width iframe { height: 704px!important } .mobile-width-2 { height: 735px!important; margin: 0 auto; padding: 102px 25px 159px 23px; width: 414px; margin-top: 40px; background: url(//repo.bfw.wiki/bfwrepo/image/5e1e7690cf0da.png) no-repeat; transition: all .5s ease 0s } .mobile-width-2 iframe { height: 735px!important } .mobile-width-3 { height: 273px!important; margin: 0 auto; padding: 43px 115px 69px 82px; width: 605px; margin-top: 40px; background: url(//repo.bfw.wiki/bfwrepo/image/5e1e76d21eb25.png) no-repeat; transition: all .5s ease 0s } .mobile-width-3 iframe { height: 317px!important } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0