网页布局色块
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >网页色块布局</ title > < style > #top{width:100%; height:30px; background:#CCC; margin-top:0px;} #top #mid{width:1210px; height:30px; margin:0 auto; background:#666;} #imgage{width:1210px; height:80px; margin:0 auto; background:#F00;} #sousuo{width:1210px; height:100px; margin:0 auto; background:#CCC;} #menu{width:1210px; height:48px; margin:0 auto; background:#F00;} #flash_box{width:1210px; height:470px; margin:0 auto; border:2px solid red;} #flash_box_left{width:212px; height:470px; background:#C63; float:left;} #flash_box_mid1{width:730px; height:470px; background:#30F; float:left;} #flash_box_right1{width:265px; height:200px; background:#C06; float:left; } #flash_box_right2{width:265px; height:270px; background:#CF0; float:left;} #imgchange{width:1210px; height:152px; margin:0 auto; border:2px solid red;} #imgchange_left{width:212px; height:152px; background:#FF0; float:left;} #imgchange_right{width:997px; height:152px; background:#0FF; float:left;} </ style > </ head > < body > <!--顶标签--> < div id="top"> < div id="mid">顶标签 < a href="javascript:;">注册</ a > < a href="javascript:;">登录</ a > </ div > </ div > <!--顶标签结束--> <!--图片--> < div id="imgage" >图片</ div > <!--图片结束--> <!--搜索框标记--> < div id="sousuo">搜索框标记</ div > <!--搜索框标记结束--> <!--导航条--> < div id="menu">导航条</ div > <!--导航条结束--> <!--flash大区域--> < div id="flash_box"> < div id="flash_box_left">flash大区域左</ div > < div id="flash_box_mid1">flash大区域中</ div > < div id="flash_box_right1">flash大区域右上</ div > < div id="flash_box_right2">flash大区域右下</ div > </ div > <!--flash大区域结束--> <!--图片切换框--> < div id="imgchange"> < div id="imgchange_left">图片切换框左</ div > < div id="imgchange_right">图片切换框右</ div > </ div > <!--图片切换框结束--> </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步