zoukankan      html  css  js  c++  java
  • 网页布局色块

    <!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{100%; height:30px; background:#CCC; margin-top:0px;}
    	#top #mid{1210px; height:30px; margin:0 auto; background:#666;}
    	
    	#imgage{1210px; height:80px; margin:0 auto; background:#F00;}
    	
    	#sousuo{1210px; height:100px; margin:0 auto; background:#CCC;}
    	
    	#menu{1210px; height:48px; margin:0 auto; background:#F00;}
    	
    	#flash_box{1210px; height:470px; margin:0 auto; border:2px solid red;}
    	#flash_box_left{212px; height:470px; background:#C63; float:left;}
    	#flash_box_mid1{730px; height:470px; background:#30F; float:left;}
    	#flash_box_right1{265px; height:200px; background:#C06; float:left; }
    	#flash_box_right2{265px; height:270px; background:#CF0; float:left;}
    	
    	#imgchange{1210px; height:152px; margin:0 auto; border:2px solid red;}
    	#imgchange_left{212px; height:152px; background:#FF0; float:left;}
    	#imgchange_right{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>
    
  • 相关阅读:
    sl学习
    xc笔记
    1_2_3_4_5 Html-Css
    linux服务器架设--学习笔记
    注解学习
    关于ruby gem源更新安装问题
    css3:2D与3D变形
    css3关键帧动画以及兼容性策略
    css3背景,蒙版,倒影以及过度
    阴影边框以及渐变
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4539347.html
Copyright © 2011-2022 走看看