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

Posted 2023-03-26

/* common styling */

/* Set up the default font and ovrall size to include image */
body
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 11px;

#wrap width:660px; position:relative; background:#000; height:362px; padding:0 30px; color:#999; margin-left:25px;
#wrap a.nikon_link, #wrap a.nikon_link:visited color:#bcd; font-size:10px;
#wrap a.nikon_link:hover text-decoration:none;

#flyout font-size:11px; padding:0; margin:0; list-style:none; width:24px; height:360px; position:absolute; left:-25px;
#flyout ul padding:0; margin:0; list-style:none;
#flyout li display:block; width:24px; height:120px; background:#1c1c1c;
#flyout li a display:block; width:24px; height:120px; text-indent:-999px; text-decoration:none;
#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 table position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;
#flyout li float:left; margin-bottom:1px;
#flyout li ul visibility:hidden; position:absolute; top:0; left:24px; width:400px; height:117px; border-left:1px solid #fff; padding-top:4px;
#flyout li ul li display:block; display:inline; width:100px; height:22px; border:0; margin:0 10px; background:transparent;
#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;
#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);
* html #flyout li a:hover position:relative; white-space:normal;
* html #flyout li a:hover ul li a:hover color:#000; background:#bcd;
#flyout li:hover position:relative;
#flyout li:hover ul li a:hover background:#bcd; color:#000;
#flyout li:hover b,
#flyout li a:hover b
visibility:visible;

#flyout li:hover ul,
#flyout li a:hover ul
visibility:visible;

</style>
需要详细注释。谢谢！

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:hovertext-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知识也是从这里面获取的;
URL为：http://download.csdn.net/source/404919

下面继续 早上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这样的话学起来就会很快的 参考技术A 没仔细看一楼的答案，不过按照量来说，足够你看的，加油

一楼辛苦啦！