htmlcss案例代码（求帮忙写html和css代码！）

本文目录

• 求帮忙写html和css代码！
• html+css代码
• 有谁懂HTML/CSS帮我看下这段代码

求帮忙写html和css代码！

HTML:

《div class="imgitem"》  《div class="img-small"》原图《/div》  《div class="img-big"》大图《/div》《/div》

CSS:

.imgitem{  position:relative;}.imgitem:hover .img-big{  display:block;}.img-small,.img-big{  position:absolute;  border:1px solid #AAA;  background-color:#CCC;}.img-small{  width:100px;  height:100px;}.img-big{  display:none;  left:110px;  width:200px;  height:200px;}

你把文字换成图片就OK了

html+css代码

给menu1一个绝对定位，把块menu1放到和同资源分类同级，及放到/a后，/li前，#header_menu:hover .menu1 { display:block;}

有谁懂HTML/CSS帮我看下这段代码

body { //这里是设置整个网页的背景为白色.background是背景属性background: #fff; //这里是设置网页显示的字体，像我们应该在后面加上一个"宋体"font-family: "Lucida Grande", Helvetica, Arial, sans-serif; //这个是指你网页中文字显示多大的大少就用font-size来表示font-size: 11px; } // 这里定义了一个wrap，宽度为660;定位为相对定位，背景是黑色,高为362,内边距用padding。这里也就是说上和下的边距为0px,左右为30，其实就是一个居中，color#999就是这个wrap里面的所有文字的颜色，margin-left指的是外左边距为25px。在你的网页中调用时应该使用 Id="wrap" 来调用; 这个应该是用div+css#wrap {width:660px; position:relative; background:#000; height:362px; padding:0 30px; color:#999; margin-left:25px;} //a.nikon_link a.nikon_link:visited表示wrap里面的nikon_link的连接和访问过后的连接颜色为#bcd文字大小了10px; a.nikon_link:hover{text-decoration:none;} 表示:nikon_link的连接经过里时的没有下划线#wrap a.nikon_link, #wrap a.nikon_link:visited {color:#bcd; font-size:10px;} #wrap a.nikon_link:hover {text-decoration:none;} //一个flyout的id 用法如wrap 。font-size表示文字大小为11,padding:0; margin:0;没有内边距和外边距，list-style:none;表示当你使用无序列表li ul ol里没有修饰。也就是没有圆点等。一些上面说过的我就不赘述了。position:absolute 表示这个div使用了绝对定位.left:-25px.表示离左25px;#flyout {font-size:11px; padding:0; margin:0; list-style:none; width:24px; height:360px; position:absolute; left:-25px;} // 下面的表示flyout这个div里面的ul没有内边距和外边距list-style:none;表示当你使用无序列表li ul ol里没有修饰。也就是没有圆点等。#flyout ul {padding:0; margin:0; list-style:none;} //display:block表示这个li用块来显示，宽为24高为120。背景为#1c1c1c;#flyout li {display:block; width:24px; height:120px; background:#1c1c1c;} // li a表示li这个里面的连接为块状，text-indent:-999px这个我就不太清楚，没用过;请原谅;text-decoration:none表示无下划线#flyout li a {display:block; width:24px; height:120px; text-indent:-999px; text-decoration:none;} //li a.nikon表示nikon这个的连接背景属性有一个nikon_button.gif.下面的canon pentax也一样，不多述了#flyout li a.nikon {background:url(nikon_button.gif);} #flyout li a.canon {background:url(canon_button.gif);} #flyout li a.pentax {background:url(pentax_button.gif);} //表示flyout这个id里面的表格为绝对定位，border-collapse:collapse设置或检索表格的行和单元格的边是合并在一起;top:0; left:0 表示离上和左为0;font-size:1em表示文字大小为1em#flyout table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}//下面是设置id为flyout的div的li浮动为左浮动，下边距为1px #flyout li {float:left; margin-bottom:1px;} // visibility:hidden设置li下的ul为隐藏且绝对定位，对上为0左为24，宽为400，高为117，左边的边框是1px显示为细线且颜色为白色，上内边距为4px.这里需要说明的，虽然是隐藏但是他还是点有位置的。#flyout li ul {visibility:hidden; position:absolute; top:0; left:24px; width:400px; height:117px; border-left:1px solid #fff; padding-top:4px;} 好了。我去打篮球了。明天上班一定帮你补上。另外你可以去下载苏沈小雨的css手册;这里面有一一的解释。我的一点css知识也是从这里面获取的;***隐藏网址***下面继续 早上8:10//设置li下ul的li属性显示为块状，display:inline就是将元素显示为行内元素.行内元素是不可以更改他的长宽属性的。而且宽为100px，高为22px，边框为0，margin:0 10px表示上下外边距为0，左右外边距为10px;其实他也可以表示为margin:0 10 0 10.具体表示上0右10下0左10,背景为透明#flyout li ul li {display:block; display:inline; width:100px; height:22px; border:0; margin:0 10px; background:transparent;} // 下面表示id为flyout的li下ul的li的连接属性text-indent:0; 文字缩进为0px;背景为透明，显示成块状，且宽为100px,高为22px。line-height:21px表示文字的高度21px; 文字颜色为#bbb,下边框为1px显示为细线且颜色为#555,text-decoration:none表示无下划线;#flyout li ul li a {text-indent:0; background:transparent; display:block; width:100px; height:22px; line-height:21px; color:#bbb; border-bottom:1px solid #555; text-decoration:none;} //下面设置li下的b的属性为隐藏，显示为块状，宽为360px,高为120px，且是绝对定位离上为0px，左为24px;背景颜色为#234,opacity:0.8; filter:alpha(opacity=80);表示透明度为80%;#flyout li b {visibility:hidden; display:block; width:360px; height:120px; position:absolute; top:0; left:24px; background:#234; opacity:0.8; filter:alpha(opacity=80);} //下面表示网页与id为flyout下的li的经过链接属性：相对定位，white-space表示自动换行，normal也是white-space的默认属性;* html #flyout li a:hover {position:relative; white-space:normal;} //下面表示网页与id为flyout下的li和ul下的li的经过链接属性：文字显示为黑色,背景为#bcd;* html #flyout li a:hover ul li a:hover {color:#000; background:#bcd;} //下面表示id为flyout下的li的经过属性为相对定位#flyout li:hover {position:relative;} //下面表示id为flyout下的li和ul下的li的经过属性:文字为黑色且背景为#bcd;#flyout li:hover ul li a:hover {background:#bcd; color:#000;} //下面的表示li下b的hover，也就是经过属性:visibility:visible 会自动换行#flyout li:hover b, #flyout li a:hover b { visibility:visible; } 解释完毕，希望对你有所帮助。。不过有些属性我也不是很清楚。。去下个手册然后下Xhtml的模板看他们的css这样的话学起来就会很快的