Team:XMU Software/Notebook/css
From 2013.igem.org
YuezhenChen (Talk | contribs) |
YuezhenChen (Talk | contribs) |
||
Line 1: | Line 1: | ||
/*notebook.css***********************************************************************************************************/ | /*notebook.css***********************************************************************************************************/ | ||
+ | #notebook{ | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | width:1347px; | ||
+ | height:9000px; | ||
+ | } | ||
+ | #notebook_s1{/*页眉位置*/ | ||
+ | position:absolute; | ||
+ | padding:0px; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | } | ||
+ | .notebook_title{ | ||
+ | position:absolute; | ||
+ | top:170px; | ||
+ | width:1347px; | ||
+ | text-align:center; | ||
+ | font-family:Arial; | ||
+ | font-size:60px; | ||
+ | color:#ffffff; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | #notebook_s2{/*工具栏位置*//*工具栏*/ | ||
+ | position:absolute; | ||
+ | background-color:#fefef2; | ||
+ | width:1335px; | ||
+ | top:405px; | ||
+ | left:0px; | ||
+ | } | ||
- | + | #notebook_s2m2{/*3个工具位置*/ | |
+ | position:absolute; | ||
+ | top:150px; | ||
+ | left:15%; | ||
+ | } | ||
+ | #notebook_s2m2p1{/*XMind白色圆位置*/ | ||
+ | position:absolute; | ||
+ | top:20px; | ||
+ | left:200px; | ||
+ | width:120px; | ||
+ | height:120px; | ||
+ | border-radius:60px; | ||
+ | background:#ededeb; | ||
+ | z-index:2; | ||
+ | } | ||
+ | #notebook_s2m2p2{/*PowerPoint白色圆位置*/ | ||
+ | position:absolute; | ||
+ | top:220px; | ||
+ | left:350px; | ||
+ | width:120px; | ||
+ | height:120px; | ||
+ | border-radius:60px; | ||
+ | background:#ededeb; | ||
+ | z-index:2; | ||
+ | } | ||
+ | #notebook_s2m2p3{/*Robert's Rules of Order白色圆位置*/ | ||
+ | position:absolute; | ||
+ | top:220px; | ||
+ | left:60px; | ||
+ | width:120px; | ||
+ | height:120px; | ||
+ | border-radius:60px; | ||
+ | background:#ededeb; | ||
+ | z-index:2; | ||
+ | } | ||
+ | .notebook_s2m2p1{/*3个工具图片相对白色背景位置*/ | ||
+ | position:relative; | ||
+ | top:7px; | ||
+ | left:7px; | ||
+ | } | ||
+ | #notebook_s2m2t1{/*xmind位置*/ | ||
+ | position:absolute; | ||
+ | top:-5px; | ||
+ | left:235px; | ||
+ | } | ||
+ | #notebook_s2m2t2{/*ppt位置*/ | ||
+ | position:absolute; | ||
+ | top:350px; | ||
+ | left:355px; | ||
+ | } | ||
+ | #notebook_s2m2t3{/*robert位置*/ | ||
+ | position:absolute; | ||
+ | top:350px; | ||
+ | left:0px; | ||
+ | width:250px; | ||
+ | } | ||
+ | .notebook_s2t3{/*3个工具名称文字*/ | ||
+ | font-family:Arial; | ||
+ | font-weight:bold; | ||
+ | font-size:20px; | ||
+ | color:#707070; | ||
+ | } | ||
+ | #notebook_s2m2b1{/*左绿色粗线*/ | ||
+ | position:absolute; | ||
+ | top:70px; | ||
+ | left:180px; | ||
+ | transform: rotate(30deg); | ||
+ | -ms-transform: rotate(30deg); /* IE 9 */ | ||
+ | -webkit-transform: rotate(30deg); /* Safari and Chrome */ | ||
+ | -o-transform: rotate(30deg); /* Opera */ | ||
+ | -moz-transform: rotate(30deg); /* Firefox */ | ||
+ | z-index:1; | ||
+ | } | ||
+ | #notebook_s2m2b2{/*右绿色粗线*/ | ||
+ | position:absolute; | ||
+ | top:80px; | ||
+ | left:330px; | ||
+ | transform: rotate(-30deg); | ||
+ | -ms-transform: rotate(-30deg); /* IE 9 */ | ||
+ | -webkit-transform: rotate(-30deg); /* Safari and Chrome */ | ||
+ | -o-transform: rotate(-30deg); /* Opera */ | ||
+ | -moz-transform: rotate(-30deg); /* Firefox */ | ||
+ | z-index:1; | ||
+ | } | ||
+ | #notebook_s2m2b3{/*下绿色粗线*/ | ||
+ | position:absolute; | ||
+ | top:170px; | ||
+ | left:230px; | ||
+ | transform: rotate(90deg); | ||
+ | -ms-transform: rotate(90deg); /* IE 9 */ | ||
+ | -webkit-transform: rotate(90deg); /* Safari and Chrome */ | ||
+ | -o-transform: rotate(90deg); /* Opera */ | ||
+ | -moz-transform: rotate(90deg); /* Firefox */ | ||
+ | z-index:1; | ||
+ | } | ||
+ | .notebook_s2m2b1{/*绿色粗线样式*/ | ||
+ | width:30px; | ||
+ | height:250px; | ||
+ | background:#b2d365; | ||
+ | } | ||
+ | #notebook_s2m2n4{/*文本框位置*/ | ||
+ | position:absolute; | ||
+ | top:40px; | ||
+ | left:550px; | ||
+ | width:500px; | ||
+ | } | ||
+ | .notebook_s2t4{/*工具名称文字*/ | ||
+ | font-family:Arial; | ||
+ | font-weight:bold; | ||
+ | font-size:20px; | ||
+ | color:#6ba4ad; | ||
+ | } | ||
+ | .notebook_s2t5{/*工具简介文字*/ | ||
+ | font-family:Arial; | ||
+ | font-weight:bold; | ||
+ | font-size:16px; | ||
+ | color:#707070; | ||
+ | text-indent:20px; | ||
+ | } | ||
+ | #notebook_s2m2n5{/*工具标题位置,文字*/ | ||
+ | position:absolute; | ||
+ | top:230px; | ||
+ | left:205px; | ||
+ | font-family:Arial; | ||
+ | font-weight:bold; | ||
+ | font-size:36px; | ||
+ | color:#b2d365; | ||
+ | } | ||
+ | #notebook_s3{/*日记+分界栏位置*/ | ||
+ | position:absolute; | ||
+ | background-color:#fefef2; | ||
+ | width:1335px; | ||
+ | top:1000px; | ||
+ | left:0px; | ||
+ | } | ||
+ | #notebook_s3m2{/*日记位置*/ | ||
+ | position:relative; | ||
+ | top:70px; | ||
+ | left:250px; | ||
+ | width:500px; | ||
+ | } | ||
+ | #notebook_s3m2n0{/*镂空圆,位置上*/ | ||
+ | position:absolute; | ||
+ | top:-40px; | ||
+ | left:3px; | ||
+ | z-index:3; | ||
+ | } | ||
+ | .notebook_s3p0{/*镂空圆-绿色大圆*/ | ||
+ | position:relative; | ||
+ | width:46px; | ||
+ | height:46px; | ||
+ | border-radius:23px; | ||
+ | background:#b2d365; | ||
+ | z-index:4; | ||
+ | } | ||
+ | .notebook_s3p00{/*镂空圆-白色小圆*/ | ||
+ | position:relative; | ||
+ | width:30px; | ||
+ | height:30px; | ||
+ | margin-top:-38px; | ||
+ | margin-left:8px; | ||
+ | border-radius:15px; | ||
+ | background:#fefef2; | ||
+ | z-index:5; | ||
+ | } | ||
.notebook_s3t3{ /*日记框*/ | .notebook_s3t3{ /*日记框*/ | ||
border-left:10px solid #b2d365; | border-left:10px solid #b2d365; | ||
Line 78: | Line 272: | ||
display:none; | display:none; | ||
} | } | ||
- | #notebook_s3m2n1,#notebook_s3m2n3,#notebook_s3m2n5,#notebook_s3m2n7,#notebook_s3m2n9,#notebook_s3m2n11, | + | #notebook_s3m2n1,#notebook_s3m2n3,#notebook_s3m2n5,#notebook_s3m2n7,#notebook_s3m2n9,#notebook_s3m2n11,,#notebook_s3m2n15{/*月份栏*/ |
position:relative; | position:relative; | ||
- | + | top:-70px; | |
z-index:2; | z-index:2; | ||
+ | height:100px; | ||
} | } | ||
#notebook_s3m2n4,#notebook_s3m2n6,#notebook_s3m2n8,#notebook_s3m2n10,#notebook_s3m2n12,#notebook_s3m2n14,#notebook_s3m2n16{/*日记 45678910月*/ | #notebook_s3m2n4,#notebook_s3m2n6,#notebook_s3m2n8,#notebook_s3m2n10,#notebook_s3m2n12,#notebook_s3m2n14,#notebook_s3m2n16{/*日记 45678910月*/ | ||
Line 117: | Line 312: | ||
top:150px; | top:150px; | ||
left:0px; | left:0px; | ||
+ | } | ||
+ | #notebook_s4m1{ | ||
+ | position:absolute; | ||
+ | top:5px; | ||
} | } | ||
#notebook_s4m2{/*protocols位置*/ | #notebook_s4m2{/*protocols位置*/ | ||
+ | position:absolute; | ||
+ | top:150px; | ||
+ | left:22%; | ||
+ | width:800px; | ||
+ | } | ||
+ | #notebook_s5{/*实验日记+分界栏位置*/ | ||
+ | position:absolute; | ||
+ | background-color:white; | ||
+ | width:1335px; | ||
+ | top:4400px; | ||
+ | left:0px; | ||
+ | } | ||
+ | #notebook_s5m1{ | ||
+ | position:absolute; | ||
+ | top:50px; | ||
+ | } | ||
+ | #notebook_s5m2{/*实验日记*/ | ||
position:absolute; | position:absolute; | ||
top:180px; | top:180px; | ||
left:22%; | left:22%; | ||
width:800px; | width:800px; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #labrecord{ | ||
+ | position:relative; | ||
+ | top:20px; | ||
+ | width:815px; | ||
+ | height:1400px; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | .notebook_s3t1{/*月份英文文字*/ | ||
+ | position:relative; | ||
+ | top:-1455px; | ||
+ | left:90px; | ||
+ | font-family:微软雅黑; | ||
+ | font-weight:bold; | ||
+ | font-size:48px; | ||
+ | color:#afaf9e; | ||
+ | z-index:2; | ||
+ | } | ||
+ | .notebook_s3t2{/*月份数字文字*/ | ||
+ | position:relative; | ||
+ | top:-165px; | ||
+ | left:600px; | ||
+ | font-family:微软雅黑 ; | ||
+ | font-weight:bold; | ||
+ | font-size:32px; | ||
+ | color:#639caa; | ||
+ | z-index:2; | ||
+ | } | ||
+ | .circle{ | ||
+ | position:relative; | ||
+ | top:13px; | ||
+ | left:2px; | ||
+ | width:53px; | ||
+ | height:53px; | ||
+ | border-radius:26.5px; | ||
+ | background:#b2d365; | ||
+ | z-index:2; | ||
+ | } | ||
+ | .line{ | ||
+ | position:relative; | ||
+ | top:-50px; | ||
+ | left:21px; | ||
+ | width:15px; | ||
+ | height:73px; | ||
+ | border-radius:1px; | ||
+ | background:#b2d365; | ||
+ | z-index:2; | ||
+ | } | ||
+ | .box{ | ||
+ | position:relative; | ||
+ | top:-110px; | ||
+ | left:60px; | ||
+ | width:725px; | ||
+ | height:51px; | ||
+ | border-radius:25px; | ||
+ | background:#ddddca; | ||
+ | z-index:2; | ||
} | } |
Revision as of 05:38, 24 October 2013
/*notebook.css***********************************************************************************************************/
- notebook{
position:absolute; top:0px; left:0px; width:1347px; height:9000px; }
- notebook_s1{/*页眉位置*/
position:absolute; padding:0px; top:0px; left:0px; } .notebook_title{ position:absolute; top:170px; width:1347px; text-align:center; font-family:Arial; font-size:60px; color:#ffffff; font-weight:bold; }
- notebook_s2{/*工具栏位置*//*工具栏*/
position:absolute; background-color:#fefef2; width:1335px; top:405px; left:0px; }
- notebook_s2m2{/*3个工具位置*/
position:absolute; top:150px; left:15%; }
- notebook_s2m2p1{/*XMind白色圆位置*/
position:absolute; top:20px; left:200px; width:120px; height:120px; border-radius:60px; background:#ededeb; z-index:2; }
- notebook_s2m2p2{/*PowerPoint白色圆位置*/
position:absolute; top:220px; left:350px; width:120px; height:120px; border-radius:60px; background:#ededeb; z-index:2; }
- notebook_s2m2p3{/*Robert's Rules of Order白色圆位置*/
position:absolute; top:220px; left:60px; width:120px; height:120px; border-radius:60px; background:#ededeb; z-index:2; } .notebook_s2m2p1{/*3个工具图片相对白色背景位置*/ position:relative; top:7px; left:7px; }
- notebook_s2m2t1{/*xmind位置*/
position:absolute; top:-5px; left:235px; }
- notebook_s2m2t2{/*ppt位置*/
position:absolute; top:350px; left:355px; }
- notebook_s2m2t3{/*robert位置*/
position:absolute; top:350px; left:0px; width:250px; } .notebook_s2t3{/*3个工具名称文字*/ font-family:Arial; font-weight:bold; font-size:20px; color:#707070; }
- notebook_s2m2b1{/*左绿色粗线*/
position:absolute; top:70px; left:180px; transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ z-index:1; }
- notebook_s2m2b2{/*右绿色粗线*/
position:absolute; top:80px; left:330px; transform: rotate(-30deg); -ms-transform: rotate(-30deg); /* IE 9 */ -webkit-transform: rotate(-30deg); /* Safari and Chrome */ -o-transform: rotate(-30deg); /* Opera */ -moz-transform: rotate(-30deg); /* Firefox */ z-index:1; }
- notebook_s2m2b3{/*下绿色粗线*/
position:absolute; top:170px; left:230px; transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */ -o-transform: rotate(90deg); /* Opera */ -moz-transform: rotate(90deg); /* Firefox */ z-index:1; } .notebook_s2m2b1{/*绿色粗线样式*/ width:30px; height:250px; background:#b2d365; }
- notebook_s2m2n4{/*文本框位置*/
position:absolute; top:40px; left:550px; width:500px; } .notebook_s2t4{/*工具名称文字*/ font-family:Arial; font-weight:bold; font-size:20px; color:#6ba4ad; } .notebook_s2t5{/*工具简介文字*/ font-family:Arial; font-weight:bold; font-size:16px; color:#707070; text-indent:20px; }
- notebook_s2m2n5{/*工具标题位置,文字*/
position:absolute; top:230px; left:205px; font-family:Arial; font-weight:bold; font-size:36px; color:#b2d365; }
- notebook_s3{/*日记+分界栏位置*/
position:absolute; background-color:#fefef2; width:1335px; top:1000px; left:0px; }
- notebook_s3m2{/*日记位置*/
position:relative; top:70px; left:250px; width:500px; }
- notebook_s3m2n0{/*镂空圆,位置上*/
position:absolute; top:-40px; left:3px; z-index:3; } .notebook_s3p0{/*镂空圆-绿色大圆*/ position:relative; width:46px; height:46px; border-radius:23px; background:#b2d365; z-index:4; } .notebook_s3p00{/*镂空圆-白色小圆*/ position:relative; width:30px; height:30px; margin-top:-38px; margin-left:8px; border-radius:15px; background:#fefef2; z-index:5; } .notebook_s3t3{ /*日记框*/ border-left:10px solid #b2d365; padding:0px 0px 0px 35px; margin-left:22px; } .notebook_s3m2p1{/*左边小圆位置,3月*/ position:absolute; top:80px; left:12px; } .notebook_s3m2p2{/*左边小圆位置,45678910月*/ position:absolute; top:20px; left:12px; } .notebook_s3p1{/*左边小圆,绿色*/ position:relative; width:30px; height:30px; border-radius:15px; background-color:#cdea8b; margin-top:20px; margin-left:0px; } .notebook_s3p2{/*左边小圆,深黄色*/ position:relative; width:30px; height:30px; border-radius:15px; background-color:#ffa801; margin-top:20px; margin-left:0px; } .notebook_s3m2t1{/*左边日期,3月*/ position:absolute; top:40px; left:-55px; font-family:Arial; font-weight:bold; font-size:16px; text-align:right; color:#b2d365; } .notebook_s3m2t2{/*左边日期,45678910月*/ position:absolute; top:-20px; left:-55px; font-family:Arial; font-weight:bold; font-size:16px; text-align:right; color:#b2d365; } .notebook_s3t4{/*日记类型,实验日记,会议日记*/ position:relative; top:32px; left:27px; margin-top:32px; margin-left:0px; } .notebook_s3t5{/*会议日记,日期数字文字*/ position:absolute; left:10px; margin-top:15px; margin-left:0px; } .notebook_s3t6{/*实验日记,日期数字文字*/ position:relative; top:80px; left:27px; margin-top:32px; margin-left:0px; }
- notebook_s3m2n2{/*日记1,3.30日*/
display:none; }
- notebook_s3m2n1,#notebook_s3m2n3,#notebook_s3m2n5,#notebook_s3m2n7,#notebook_s3m2n9,#notebook_s3m2n11,,#notebook_s3m2n15{/*月份栏*/
position:relative; top:-70px; z-index:2; height:100px; }
- notebook_s3m2n4,#notebook_s3m2n6,#notebook_s3m2n8,#notebook_s3m2n10,#notebook_s3m2n12,#notebook_s3m2n14,#notebook_s3m2n16{/*日记 45678910月*/
position:relative; top:3px; z-index:2; display:none; }
- notebook_s3m2n17{/*镂空小圆,位置下*/
position:absolute; margin-top:-5px; margin-left:4px; } .note1h1{/*日记文本中日期文字*/ font-family:Arial; font-weight:bold; font-size:24px; text-indent:20px; color:#639caa; } .note1t1{/*日记文本中的文字*/ font-family:Arial; font-size:14px; color:#707070; text-indent:20px; margin-top:7px; }
- note3,#note4,#note5,#note7,#note8,#note9,#note11,#note12,#note13,#note14,#note16,#note17,#note18,#note20,#note21,#note22,#note23,#note25,#note26,#note27{/*文本隐藏*/
display:none; }
- notebook_s4{/*protocols+分界栏位置*/
position:relative; background-color:#fefef2; width:1335px; top:150px; left:0px; }
- notebook_s4m1{
position:absolute; top:5px; }
- notebook_s4m2{/*protocols位置*/
position:absolute; top:150px; left:22%; width:800px; }
- notebook_s5{/*实验日记+分界栏位置*/
position:absolute; background-color:white; width:1335px; top:4400px; left:0px; }
- notebook_s5m1{
position:absolute; top:50px; }
- notebook_s5m2{/*实验日记*/
position:absolute; top:180px; left:22%; width:800px; overflow:hidden; }
- labrecord{
position:relative; top:20px; width:815px; height:1400px; overflow:hidden; }
.notebook_s3t1{/*月份英文文字*/ position:relative; top:-1455px; left:90px; font-family:微软雅黑; font-weight:bold; font-size:48px; color:#afaf9e; z-index:2; } .notebook_s3t2{/*月份数字文字*/ position:relative; top:-165px; left:600px; font-family:微软雅黑 ; font-weight:bold; font-size:32px; color:#639caa; z-index:2; } .circle{ position:relative; top:13px; left:2px; width:53px; height:53px; border-radius:26.5px; background:#b2d365; z-index:2; } .line{ position:relative; top:-50px; left:21px; width:15px; height:73px; border-radius:1px; background:#b2d365; z-index:2; } .box{ position:relative; top:-110px; left:60px; width:725px; height:51px; border-radius:25px; background:#ddddca; z-index:2; }