下图是某商城商品分类页面，请按图片用html制作出如下页面，并将主要代码写在答卷上,并写出你的设计方法_随笔

上面那行字，设置属性text-derection为under-line这样就会有下划线....

下面菜单用一个DIV里面嵌套五个DIV。

每个DIV的宽高设置好。

第一个DIV的渐变效果代码略复杂，可以找个图做背景，商品分类和全部分类超链接设置属性disaplay为block，一个左浮动一个右浮动，行高属性（line-height）设置成与DIV的高度一直，这样垂直才会居中，下面的应该大同小异。

用DISAPLAY设置为BLOCK之后会变成块级元素，下面的超链接全都要设置成左浮动，像【家用电器】那样的，你可以直接打空格控制缩进距离，也可以调整左边距。。。

嗯。。。不懂可以继续问。。。本人大一，HTML学的还凑合

一、html元素可分为三大类：块元素、内联元素、可变元素

1.块元素：

常见块状元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption

块状元素特点：

(a)以块的形式显示为一个矩形区域；

(b)块状元素独占一行，自上而下排列；

(c)块状元素可以定义自己的宽度和高度，以及盒模型中的margin,padding,border；

(d)块状元素可以作为一个容器包含其他的块状元素或内联元素。

2.内联元素(行内元素)：

常见内联元素：a,strong,b,i,em,span,label,img,input

内联元素特点：

(a)内联元素在一行逐个进行显示；

(b)内联元素没有自己的形状，不能定义宽度和高度，它的宽高由内容来决定；

(c)内联元素设置与高度相关的一些属性(如margin-top,margin-bottom,padding-top,padding-bottom,line-height)，显示无效或显示不准确；

(d)内联元素设置左右填充和外间距是可以的。

内联块状元素：img,input,textarea

内联块状元素特点：

(a)即具有内联元素特点，也具有块状元素特点

(b)既可以定义容器的宽，高，margin，padding等，还可以和其他内联元素在一行显示

3.可变元素

二、元素类型转换

display:block|inline|inline-block|none|list-item

block:将元素转换为块状元素(大部分块状元素的默认display属性值)

inline:将元素转换为内联元素(大部分内联元素的默认display属性值)

inline-block:将元素转换为内联块状元素(img,input等元素的默认display属性值)

list-item:将元素转换为列表类型(li的默认display属性值)

none:元素隐藏不可见

注：当元素设置了float属性后，就相当于设置了display:block可以给元素定义宽，高了

三、置换元素和非置换元素

1.置换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容

如img标签，src属性决定了在网页呈现不同的图片

如input标签，type属性决定了在网页中呈现什么类型的input控件

2.非置换元素

除置换元素外其他的html元素都是非置换元素

标签之间书写什么样的内容，浏览器就显示什么内容

大概弄了个，你参考着来吧。还有问题请找偶。

<!DOCTYPE HTML>

<head>

<style>

body { margin:0padding:0font-size:12pxfont-family:Arial,"宋体"}

form,div,p,span,label,i,ul,ol,li,dl,dt,dd,fieldset,legend { margin:0padding:0}

h1,h2,h3,h4,h5,h6 { margin:0padding:0font-size:12pxfont-weight:normal}

table,td,input,select,textarea { font-size:12px}

li { list-style:none}

img { vertical-align:middle}

a img { border:none}

header,section,nav,article,aside,footer,hgroup { display:block}

/* .f** : font-size */

.f11 { font-size:11px}

.f12 { font-size:12px}

.f13 { font-size:13px}

.f14 { font-size:14px}

.f16 { font-size:16px}

.f18 { font-size:18px}

.fb,.bold { font-weight:bold}

.fi,.italic { font-style:italic}

/* ti** : text-indent */

.ti0 { text-indent:0}

.tih { text-indent:.5em}

.ti1 { text-indent:1em}

.ti2 { text-indent:2em}

.tiu { text-indent:-10000em}

/* .c* : color */

.c0,a.c0 { color:#000}

.c3,a.c3 { color:#333}

.c6,a.c6 { color:#666}

.c9,a.c9 { color:#999}

.cc,a.cc { color:#ccc}

.cd,a.cd { color:#ddd}

.ce,a.ce { color:#eee}

.cf,a.cf { color:#fff}

.orange,a.orange { color:#f90} /* color-orange */

.red,a.red { color:#f00} /* color-red */

.green,a.green { color:#0f0} /* color-green */

.blue,a.blue { color:#00f} /* color-blue */

/* text-align、float */

.tl,.tal { text-align:left !important}

.tc,.tac { text-align:center !important}

.tr,.tar { text-align:right !important}

.tj,.taj { text-align:justify !important}

.l,.fl { float:left !important}

.r,.fr { float:right !important}

.fn { float:none !important}

.cl { clear:left !important}

.cr { clear:right !important}

.clear { clear:bothfont-size:0visibility:hiddenline-height:0height:0}

.clearfix:after { content:"."display:blockheight:0clear:bothvisibility:hidden}

.clearfix { zoom:1height:1%}

/*.linkcountry { position:absolutedisplay:blockwidth:100%height:60pxtop:0left:0}*/

.sort h4{ color:#f00float:leftdisplay:inlinefont-size:14pxfont-weight:boldborder:solid 1pxmargin:0 0 0 5pxpadding:5 background:#fe9 no-repeat topwidth:53px

height:25pxline-height:24pxpadding-top:15pxpadding-left:10px}

.sort h4.l3 { padding-top:5pxheight:35px}

.sort h4 a { color:#ff0}

.sort h4 a:hover { color:#f0f}

.sort ul { margin:0 5px 10pxpadding-bottom:10pxborder-bottom:1px dotted #60AECCheight:60pxoverflow:hidden}

.sort ul li{ float:leftline-height:14pxheight:14pxmargin:3px auto 3px -1pxtext-align:centerborder-left:solid 1px #b2b2b2padding:0 5px}

.sort ul li a{ white-space:nowrap}

.sort ul li a.o{ color:#f60}

.sort .sortd{border-bottom:0margin-bottom:0padding-bottom:0}

.cl { clear:left !important}

.cr { clear:right !important}

.clear { clear:bothfont-size:0visibility:hiddenline-height:0height:0}

.clearfix:after { content:"."display:blockheight:0clear:bothvisibility:hidden}

.clearfix { zoom:1height:1%}

</style>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<ul>

</ul>

</div>

<div>

<ul>

<li><a href="http://search.eachnet.com/search/cG9sb+ihqw==-2.html?_fromid=homepage_CHNlistB07_n&srcid=a3018_29" target="_blank">polo衫</a></li>

</ul>

</div>

<div>

<li><a href="http://search.eachnet.com/search/--154003--C-2.html?_fromid=homepage_CHNlistC08_n&srcid=a3018_29" target="_blank">数码摄像机</a></li>

</ul>

</div>

</aside>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/8307498.html

下图是某商城商品分类页面，请按图片用html制作出如下页面，并将主要代码写在答卷上,并写出你的设计方法

发表评论

评论列表（0条）