问一些关于CSS+DIV很基础的问题,比如这个网站:http://nbdvjcom.s16.804.cn/micecms/index.php (正在改)
为什么笔记本电脑和台式机显示时,视频的位置不在同一个地方?台式机是正常的,笔记本电脑上显示的视频会把图片遮住,我现在想知道怎样让这个视频窗口不管在什么机子上都是在同一个位置显示,请问大虾怎么解决啊??要上课去了,期待回来时就能得到答案!!,正解给一百分!
下面是这个首页模板的index.css和布局layout.css index.css@charset "utf-8";
/* CSS Document */#left1,#right1{
width:186px; height:298px; float:left;
}
#left1_C,#right1_C{margin:1px auto 1px auto;}
.bt{
padding-left:12px; width:108px; height:28px;
font-weight:bold;
font-size:14px;
}
.more{
width:54px; height:26px;
}
.left1-list,.right1-list{padding:0px;}
.left1-list a{
display:block; width:123px; height:37px; line-height:37px;
margin-left:12px; padding-left:35px;
}
.left1-list a:hover,.left1-list a:active{color:#EC0000;}
.right1-list a{
display:block; width:162px; height:42px; margin-left:12px; margin-top:1px;
cursor:pointer; background:url(../imgs/arrcase.gif) no-repeat right 5px;
}
.right1-list a:hover,.right1-list a:active{color:#EC0000; background:url(../imgs/arrcase.gif) no-repeat right -42px; }#center1{width:544px; height:300px; margin-left:20px; background:#000000; float:left;}
#right1{margin-left:20px;}
.right1-list,.right2-list{padding-top:3px;}
.rl1,.rl2{display:block;}
.rl1{line-height:21px;}
.rl2{margin-left:19px; height:21px; color:#999999; background:url(../imgs/l1.gif) no-repeat left bottom;}
.rl2-btm{margin-left:19px; height:21px; color:#999999;}#left2{
width:186px;
height:361px;
float:left;
margin-top:20px;
overflow:hidden;
position:relative;
background-color: 1a1a1c;
}
#left2_C{
margin:1px auto 1px auto;
background-color: #11a1a1c;
}#glide div{
position:absolute;
width:186px; margin:auto;
height:200px;
cursor:default;
border-bottom:1px solid #DDDDDD;
}#glide .gld2{height:59px; padding:7px 14px 0px 14px; width:156px; line-height:17px; color:#999999; background:url(../imgs/gld-bg.gif) repeat-x;}
#glide .gld2A{height:59px; padding:7px 14px 0px 14px; width:156px; line-height:17px; color:#999999; background:url(../imgs/gld-bg.gif) repeat-x;}
#glide{
overflow:hidden; position:relative; height:333px;
}
#glide #pro0{margin-top:0px; z-index:999; margin-left:1px;}
#glide #pro1{margin-top:66px; z-index:998; margin-left:1px;}
#glide #pro2{margin-top:132px; z-index:997; margin-left:1px;}
#glide span{display:block; width:186px;}
#glide .gld1{height:120px; text-align:center; padding-top:14px;}
#glide a{color:#555555;}
#glide a:hover,#glide a:active{color:#EC0000;}#center2{
width:544px; height:361px;
float:left; margin-top:20px; margin-left:20px;
}
#center2-tag{height:26px; line-height:26px;}
#center2-tag .aTag,#center2-tag .aTagA{width:88px; height:26px; line-height:26px; float:left; text-align:center; margin-bottom:-1px; margin-right:-1px;}
#center2_C{clear:both; width:542px;}
#news-more{float:right; margin-top:6px;}
#news1 a,#news2 a,#news3 a{
padding-left:16px; background:url(../imgs/arr-new.gif) no-repeat left 3px; padding-left:16px;
}
#news1 a:hover,#news1 a:active,#news2 a:hover,#news2 a:active,#news3 a:hover,#news3 a:active{
padding-left:16px;
background:url(../imgs/arr-new.gif) no-repeat left -40px; padding-left:16px;
color:#EC0000;
}
.time{color:#999999; font-size:11px; font-family:Georgia;}
.newsftext{padding-left:12px; line-height:21px;}
.newsfimg{background:url(../imgs/news-bg.gif) no-repeat center center;}
#news1{display:block;}#news2{display:none;}#news3{display:none;}#right2{
width:186px; height:361px;
float:left; margin-top:20px; margin-left:20px;
}
.right2-list a{
display:block; width:107px; height:62px; margin-left:12px; margin-top:1px;
cursor:pointer; padding-left:55px;
}
.right2-list a:hover,.right2-list a:active{color:#EC0000;}
#spr1{background:url(../imgs/msn.jpg) no-repeat left center;}
#spr1:hover,#spr1:active{background:url(../imgs/msn2.jpg) no-repeat left center;}
#spr2{background:url(../imgs/qq.jpg) no-repeat left center;}
#spr2:hover,#spr2:active{background:url(../imgs/qq2.jpg) no-repeat left center;}
#spr3{background:url(../imgs/phone.png) no-repeat left center;}
#spr3:hover,#spr3:active{background:url(../imgs/phone2.png) no-repeat left center;}
#spr4{background:url(../imgs/gb.png) no-repeat left center;}
#spr4:hover,#spr4:active{background:url(../imgs/gb2.png) no-repeat left center;}
#spr5{background:url(../imgs/bbs.png) no-repeat left center;}
#spr5:hover,#spr5:active{background:url(../imgs/bbs2.png) no-repeat left center;}
.right2-list a span{display:block;}
.rs1{padding-top:9px; line-height:21px; height:21px;}
.rs2{color:#999999; height:16px;} layout.css
@charset "utf-8";
/* CSS Document */#top{
width:100%; height:60px;
background:url(../imgs/top-bg.jpg);
min-width:1003px;
}
#top-contain{
width:983px; height:60px; margin:auto;
padding-left:22px;
}
#top-logo{
width:150px; height:60px; margin-top:0px;
float:left;
}
#top-service{
float:left; width:500px;
padding-left:50px; padding-top:34px;
color:#777777;
}
#top-right{
float:left; width:200px; height:40px;
}
#theme{
width:180px; padding-left:34px; color:#999999;
padding-top:10px;
}
#theme span{float:left;}
#theme img{float:left; margin-right:5px; margin-top:3px; cursor:pointer;}
#top-links{
width:200px; padding-left:30px; padding-top:10px; clear:both;
}
#top-links a{
display:block; width:62px; height:11px; padding-top:7px;
color:#999999;
float:left; text-align:center;
background:url(../imgs/top-arr.gif) no-repeat center top;
}
#top-links .topA{
width:62px; height:11px; padding-top:7px;
color:#FFCC00;
float:left; text-align:center;
background:url(../imgs/top-arr2.gif) no-repeat center top;
}
#top-links a:hover,#top-links a:active{
color:#CCCCCC; background:url(../imgs/top-arrA.gif) no-repeat center 2px;
display:inline;
}
#menu{
clear:both;
width:100%; height:64px;
background:url(../imgs/menu_bg.jpg) repeat-x;
}
#menu-bg{
width:850px; margin:auto; height:64px;
padding-left:80px; padding-right:77px;
background:url(../imgs/menu_bg.jpg) repeat-x;
}
#menu-parent{
margin:auto; height:36px; line-height:36px;
background:url(../imgs/menu-parent-bg.gif) no-repeat left center;
}
#menu-parent a{
display:inline; width:93px; height:36px; line-height:35px;
float:left; text-align:center; padding-left:1px;
color:#FFFFFF;
}
#menu-parent a:hover,#menu-parent a:active,.menuA{
background:url(../imgs/menu-bg-A.gif) no-repeat right;
color:#CCCCCC !important;
}
#menu-son{
clear:both;
width:850px; margin:auto;
}
#menu-son div{
height:27px; line-height:26px; color:#999999; display:none;
}
#menu-son a{color:#999999;}
#menu-son a:hover,#menu-son a:active{color:#EC0000;}#son1{margin-left:125px;}
#son2{margin-left:95px;}
#son3{margin-left:190px;}
#son4{margin-left:275px;}
#son5{margin-left:380px;}
#son6{margin-left:450px;}
#son7{margin-left:490px;}
#son8{margin-left:665px;}
#son9{margin-left:760px;}
#middle{
clear:both;
width:983px; margin:20px auto auto auto;
padding-left:22px;
}
#cbf{clear:both; height:21px;}#bottom-btm{min-width:1003px;}
#bottom-btm a{color:#EFEFEF; clear:both;}
#bottom-btm a:hover,#bottom-btn a:active{color:#FFFFFF;}
#btmlinks,#bottom{clear:both;}
#btmlinks-right{width:850px;}/* 代码高亮 */
pre{font-family:'Courier New' , Monospace; font-size:12px; width:99%; overflow:auto; margin:0 0 1em 0; background:#F7F7F7; }
pre ol, pre ol li, pre ol li span{margin:0 0; padding:0; border:none}
pre a, pre a:hover{background:none; border:none; padding:0; margin:0}
pre ol{list-style:decimal; background:#F7F7F7; margin:0px 0px 1px 3em !important; padding:5px 0; color:#5C5C5C; border-left:3px solid #146B00;}
pre ol li{list-style:decimal-leading-zero; list-style-position:outside !important; color:#5C5C5C; padding:0 3px 0 10px !important; margin:0 !important; line-height:1.3em}
pre ol li.alt{color:inherit}
pre ol li span{color:black; background-color:inherit}
pre .comment, pre .comments{color:#008200; background-color:inherit}
pre .string{color:blue; background-color:inherit}
pre .keyword{color:#069; font-weight:bold; background-color:inherit}
pre .preprocessor{color:gray; background-color:inherit}
pre .dp-xml .cdata{color:#ff1493}
pre .dp-xml .tag, pre .dp-xml .tag-name{color:#069; font-weight:bold}
pre .dp-xml .attribute{color:red}
pre .dp-xml .attribute-value{color:blue}
pre .dp-sql .func{color:#ff1493}
pre .dp-sql .op{color:#808080}
pre .dp-rb .symbol{color:#a70}
pre .dp-rb .variable{color:#a70; font-weight:bold}
pre .dp-py .builtins{color:#ff1493}
pre .dp-py .magicmethods{color:#808080}
pre .dp-py .exceptions{color:brown}
pre .dp-py .types{color:brown; font-style:italic}
pre .dp-py .commonlibs{color:#8A2BE2; font-style:italic}
pre .dp-j .annotation{color:#646464}
pre .dp-j .number{color:#C00000}
pre .dp-delphi .number{color:blue}
pre .dp-delphi .directive{color:#008284}
pre .dp-delphi .vars{color:#000}
pre .dp-css .value{color:black}
pre .dp-css .important{color:red}
pre .dp-c .vars{color:#d00}
pre .dp-cpp .datatypes{color:#2E8B57; font-weight:bold}
为什么笔记本电脑和台式机显示时,视频的位置不在同一个地方?台式机是正常的,笔记本电脑上显示的视频会把图片遮住,我现在想知道怎样让这个视频窗口不管在什么机子上都是在同一个位置显示,请问大虾怎么解决啊??要上课去了,期待回来时就能得到答案!!,正解给一百分!
下面是这个首页模板的index.css和布局layout.css index.css@charset "utf-8";
/* CSS Document */#left1,#right1{
width:186px; height:298px; float:left;
}
#left1_C,#right1_C{margin:1px auto 1px auto;}
.bt{
padding-left:12px; width:108px; height:28px;
font-weight:bold;
font-size:14px;
}
.more{
width:54px; height:26px;
}
.left1-list,.right1-list{padding:0px;}
.left1-list a{
display:block; width:123px; height:37px; line-height:37px;
margin-left:12px; padding-left:35px;
}
.left1-list a:hover,.left1-list a:active{color:#EC0000;}
.right1-list a{
display:block; width:162px; height:42px; margin-left:12px; margin-top:1px;
cursor:pointer; background:url(../imgs/arrcase.gif) no-repeat right 5px;
}
.right1-list a:hover,.right1-list a:active{color:#EC0000; background:url(../imgs/arrcase.gif) no-repeat right -42px; }#center1{width:544px; height:300px; margin-left:20px; background:#000000; float:left;}
#right1{margin-left:20px;}
.right1-list,.right2-list{padding-top:3px;}
.rl1,.rl2{display:block;}
.rl1{line-height:21px;}
.rl2{margin-left:19px; height:21px; color:#999999; background:url(../imgs/l1.gif) no-repeat left bottom;}
.rl2-btm{margin-left:19px; height:21px; color:#999999;}#left2{
width:186px;
height:361px;
float:left;
margin-top:20px;
overflow:hidden;
position:relative;
background-color: 1a1a1c;
}
#left2_C{
margin:1px auto 1px auto;
background-color: #11a1a1c;
}#glide div{
position:absolute;
width:186px; margin:auto;
height:200px;
cursor:default;
border-bottom:1px solid #DDDDDD;
}#glide .gld2{height:59px; padding:7px 14px 0px 14px; width:156px; line-height:17px; color:#999999; background:url(../imgs/gld-bg.gif) repeat-x;}
#glide .gld2A{height:59px; padding:7px 14px 0px 14px; width:156px; line-height:17px; color:#999999; background:url(../imgs/gld-bg.gif) repeat-x;}
#glide{
overflow:hidden; position:relative; height:333px;
}
#glide #pro0{margin-top:0px; z-index:999; margin-left:1px;}
#glide #pro1{margin-top:66px; z-index:998; margin-left:1px;}
#glide #pro2{margin-top:132px; z-index:997; margin-left:1px;}
#glide span{display:block; width:186px;}
#glide .gld1{height:120px; text-align:center; padding-top:14px;}
#glide a{color:#555555;}
#glide a:hover,#glide a:active{color:#EC0000;}#center2{
width:544px; height:361px;
float:left; margin-top:20px; margin-left:20px;
}
#center2-tag{height:26px; line-height:26px;}
#center2-tag .aTag,#center2-tag .aTagA{width:88px; height:26px; line-height:26px; float:left; text-align:center; margin-bottom:-1px; margin-right:-1px;}
#center2_C{clear:both; width:542px;}
#news-more{float:right; margin-top:6px;}
#news1 a,#news2 a,#news3 a{
padding-left:16px; background:url(../imgs/arr-new.gif) no-repeat left 3px; padding-left:16px;
}
#news1 a:hover,#news1 a:active,#news2 a:hover,#news2 a:active,#news3 a:hover,#news3 a:active{
padding-left:16px;
background:url(../imgs/arr-new.gif) no-repeat left -40px; padding-left:16px;
color:#EC0000;
}
.time{color:#999999; font-size:11px; font-family:Georgia;}
.newsftext{padding-left:12px; line-height:21px;}
.newsfimg{background:url(../imgs/news-bg.gif) no-repeat center center;}
#news1{display:block;}#news2{display:none;}#news3{display:none;}#right2{
width:186px; height:361px;
float:left; margin-top:20px; margin-left:20px;
}
.right2-list a{
display:block; width:107px; height:62px; margin-left:12px; margin-top:1px;
cursor:pointer; padding-left:55px;
}
.right2-list a:hover,.right2-list a:active{color:#EC0000;}
#spr1{background:url(../imgs/msn.jpg) no-repeat left center;}
#spr1:hover,#spr1:active{background:url(../imgs/msn2.jpg) no-repeat left center;}
#spr2{background:url(../imgs/qq.jpg) no-repeat left center;}
#spr2:hover,#spr2:active{background:url(../imgs/qq2.jpg) no-repeat left center;}
#spr3{background:url(../imgs/phone.png) no-repeat left center;}
#spr3:hover,#spr3:active{background:url(../imgs/phone2.png) no-repeat left center;}
#spr4{background:url(../imgs/gb.png) no-repeat left center;}
#spr4:hover,#spr4:active{background:url(../imgs/gb2.png) no-repeat left center;}
#spr5{background:url(../imgs/bbs.png) no-repeat left center;}
#spr5:hover,#spr5:active{background:url(../imgs/bbs2.png) no-repeat left center;}
.right2-list a span{display:block;}
.rs1{padding-top:9px; line-height:21px; height:21px;}
.rs2{color:#999999; height:16px;} layout.css
@charset "utf-8";
/* CSS Document */#top{
width:100%; height:60px;
background:url(../imgs/top-bg.jpg);
min-width:1003px;
}
#top-contain{
width:983px; height:60px; margin:auto;
padding-left:22px;
}
#top-logo{
width:150px; height:60px; margin-top:0px;
float:left;
}
#top-service{
float:left; width:500px;
padding-left:50px; padding-top:34px;
color:#777777;
}
#top-right{
float:left; width:200px; height:40px;
}
#theme{
width:180px; padding-left:34px; color:#999999;
padding-top:10px;
}
#theme span{float:left;}
#theme img{float:left; margin-right:5px; margin-top:3px; cursor:pointer;}
#top-links{
width:200px; padding-left:30px; padding-top:10px; clear:both;
}
#top-links a{
display:block; width:62px; height:11px; padding-top:7px;
color:#999999;
float:left; text-align:center;
background:url(../imgs/top-arr.gif) no-repeat center top;
}
#top-links .topA{
width:62px; height:11px; padding-top:7px;
color:#FFCC00;
float:left; text-align:center;
background:url(../imgs/top-arr2.gif) no-repeat center top;
}
#top-links a:hover,#top-links a:active{
color:#CCCCCC; background:url(../imgs/top-arrA.gif) no-repeat center 2px;
display:inline;
}
#menu{
clear:both;
width:100%; height:64px;
background:url(../imgs/menu_bg.jpg) repeat-x;
}
#menu-bg{
width:850px; margin:auto; height:64px;
padding-left:80px; padding-right:77px;
background:url(../imgs/menu_bg.jpg) repeat-x;
}
#menu-parent{
margin:auto; height:36px; line-height:36px;
background:url(../imgs/menu-parent-bg.gif) no-repeat left center;
}
#menu-parent a{
display:inline; width:93px; height:36px; line-height:35px;
float:left; text-align:center; padding-left:1px;
color:#FFFFFF;
}
#menu-parent a:hover,#menu-parent a:active,.menuA{
background:url(../imgs/menu-bg-A.gif) no-repeat right;
color:#CCCCCC !important;
}
#menu-son{
clear:both;
width:850px; margin:auto;
}
#menu-son div{
height:27px; line-height:26px; color:#999999; display:none;
}
#menu-son a{color:#999999;}
#menu-son a:hover,#menu-son a:active{color:#EC0000;}#son1{margin-left:125px;}
#son2{margin-left:95px;}
#son3{margin-left:190px;}
#son4{margin-left:275px;}
#son5{margin-left:380px;}
#son6{margin-left:450px;}
#son7{margin-left:490px;}
#son8{margin-left:665px;}
#son9{margin-left:760px;}
#middle{
clear:both;
width:983px; margin:20px auto auto auto;
padding-left:22px;
}
#cbf{clear:both; height:21px;}#bottom-btm{min-width:1003px;}
#bottom-btm a{color:#EFEFEF; clear:both;}
#bottom-btm a:hover,#bottom-btn a:active{color:#FFFFFF;}
#btmlinks,#bottom{clear:both;}
#btmlinks-right{width:850px;}/* 代码高亮 */
pre{font-family:'Courier New' , Monospace; font-size:12px; width:99%; overflow:auto; margin:0 0 1em 0; background:#F7F7F7; }
pre ol, pre ol li, pre ol li span{margin:0 0; padding:0; border:none}
pre a, pre a:hover{background:none; border:none; padding:0; margin:0}
pre ol{list-style:decimal; background:#F7F7F7; margin:0px 0px 1px 3em !important; padding:5px 0; color:#5C5C5C; border-left:3px solid #146B00;}
pre ol li{list-style:decimal-leading-zero; list-style-position:outside !important; color:#5C5C5C; padding:0 3px 0 10px !important; margin:0 !important; line-height:1.3em}
pre ol li.alt{color:inherit}
pre ol li span{color:black; background-color:inherit}
pre .comment, pre .comments{color:#008200; background-color:inherit}
pre .string{color:blue; background-color:inherit}
pre .keyword{color:#069; font-weight:bold; background-color:inherit}
pre .preprocessor{color:gray; background-color:inherit}
pre .dp-xml .cdata{color:#ff1493}
pre .dp-xml .tag, pre .dp-xml .tag-name{color:#069; font-weight:bold}
pre .dp-xml .attribute{color:red}
pre .dp-xml .attribute-value{color:blue}
pre .dp-sql .func{color:#ff1493}
pre .dp-sql .op{color:#808080}
pre .dp-rb .symbol{color:#a70}
pre .dp-rb .variable{color:#a70; font-weight:bold}
pre .dp-py .builtins{color:#ff1493}
pre .dp-py .magicmethods{color:#808080}
pre .dp-py .exceptions{color:brown}
pre .dp-py .types{color:brown; font-style:italic}
pre .dp-py .commonlibs{color:#8A2BE2; font-style:italic}
pre .dp-j .annotation{color:#646464}
pre .dp-j .number{color:#C00000}
pre .dp-delphi .number{color:blue}
pre .dp-delphi .directive{color:#008284}
pre .dp-delphi .vars{color:#000}
pre .dp-css .value{color:black}
pre .dp-css .important{color:red}
pre .dp-c .vars{color:#d00}
pre .dp-cpp .datatypes{color:#2E8B57; font-weight:bold}
是这个网站啊,大家帮帮忙,感激不尽
--------------------同上， 加上left和top属性， 相对定位也可以办到
好明显， 你需要用到js, 屏幕改变时， 自动定位， 大小改变时， 也跟着改变， 只有js能解决