html+css如图怎么做

html-css09

html+css如图怎么做,第1张

<style>

/*清浮动*/

.clearfix:after{content:""display:blockclear:both}

.clearfix{zoom:1}

.red{color:#ff0000}

.f14{font-size:14px}

.f20{font-size:20px}

.fl{float:left}

.fr{float:right}

.bgcolor{background:#a7a4a4}

</style>

<div>

<div class="f20 clearfix" style="width:290px">

<img src="#" />

<div class="fl">皇冠宴会厅</div>

<div class="fr">1094.34平米</div>

</div>

<div class="f14"><span>新希尔顿酒店(五星级酒店)</span></div>

<div class="f14">

<p>最低消费:<span class="red">¥1600000元起</span></p>

<p>区域:花都区|机场</p>

<p class="bgcolor" style="display:inline-blockmargin-left:20px">立即预定</p>

</div>

</div>

这是大概的,你再细微调下

巴黎位于法国北部巴黎盆地的中央。横跨塞纳河两岸。在自中世纪以来的发展中,一直保留过去的印记,某些街道的布局历史悠久,也保留了统一的风格。今天的巴黎,不仅是西欧的一个政治、经济、文化中心,而且是一座旅游胜地,每天吸引无数来自各大洲的宾客与游人。

详见:

http://baike.baidu.com/link?url=vNSwbxf1cEZxEDQ0TKcizaEd9Ttfca3yr0CPY97e3CJRWDjg5meTYX7heUM9hdg8zaV5jywbtKNQKtu8ghE7kBuJETEfnIBt9L_F5_qbCsS

给你个例子,里面的数据自己改下

==============================

<html>

<head>

</head>

<body>

<script language="JavaScript">

<!--

//第一维:第一个下拉列表的值

//第二维:表示下拉列表中看到的字符串

//第三维:表示下拉列表中的值

var subcat = new Array()

//如果大类的值是动态的,则可以通过数据库中取出作如下设置

//subcat[<%=count%>] = new Array('<%=trim(rs("leemaid"))%>','<%=rs("leemaconte nt")%>','<%=rs("leemacontent")%>')

subcat[0] = new Array('1','电视机','=1')

subcat[1] = new Array('1','电风扇','=2')

subcat[2] = new Array('1','电饭煲','=3')

subcat[3] = new Array('1','电炒锅','=4')

subcat[4] = new Array('1','电灯','=5')

subcat[5] = new Array('1','电脑','=6')

subcat[6] = new Array('1','电冰箱','=7')

subcat[7] = new Array('1','洗衣机','=8')

subcat[8] = new Array('1','微波炉','=9')

subcat[9] = new Array('1','VCD影碟机','=1')

subcat[10] = new Array('2','二极管','=11')

subcat[11] = new Array('2','三极管','=12')

subcat[12] = new Array('2','CMOS集成块','=13')

subcat[13] = new Array('2','电阻','=14')

subcat[14] = new Array('2','电容','=15')

subcat[15] = new Array('2','整流二极管','=16')

subcat[16] = new Array('2','整流桥','=17')

subcat[17] = new Array('2','可控硅','=18')

subcat[18] = new Array('2','电子枪','=19')

subcat[19] = new Array('2','光敏二极管','=2')

subcat[20] = new Array('3','ffffff','vvvvvv')

subcat[21] = new Array('3','dddddd','ffffff')

function changeselect1(selectValue)

{

document.form1.s2.length = 0//初始化下拉列表 清空下拉数据

//document.form1.s2.options[0] = new Option('请选择二级小类','')//给第一个值

for (i=0i<subcat.lengthi++)//legth=2

{

if (subcat[i][0] == selectValue)//[0] [1] 第一列 第二列

{

document.form1.s2.options[document.form1.s2.length] = new Option(subcat[i][1], subcat[i][2])

}

}

}

//-->

</script>

<form name="form1">

二级联动:

<select name="s1" onChange="changeselect1(this.value)">

<option>请选择一级大类</option>

<option value="1">家用电器</option>

<option value="2">电子元器件</option>

<option value="3">ddddd</option>

</select>

<select name="s2" onChange="alert(this.value)">

<option>请选择二级小类</option>

</select>

</form>

</html>