div+css布局(一)

来源:未知 责任编辑:责任编辑 发表时间:2013-12-01 14:21 点击:

    最近写了一些布局的代码,出于工作效率的提升,我准备把这些代码都共享出来,然后在后期不断的完善,最终是的这些代码都模板化,所以希望大家不吝赐教。谢谢

   

[html]
<!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> 
</head> 
 
<body> 
<div style="width:950px; height:600px; color:#999999; margin:0px; padding:0px;float:left;"> 
<div style="width:950px;height:100px;"> 
<IMG alt="" src=http://www.2cto.com/uploadfile/2013/0419/20130419012654194.jpg" ></div> 
<div style="margin-left:0px; float:left;"> 
    <div style="margin-left:0px; width:323; height:153; border:0px;float:left;"> 
    <IMG alt="" src=http://www.2cto.com/uploadfile/2013/0419/20130419012654422.jpg" /></div> 
    <div style="margin-left:0px; width:323; height:153; border:0px;float:left;"> 
    <IMG alt="" src=http://www.2cto.com/uploadfile/2013/0419/20130419012654455.jpg" /></div> 
    <div style="margin-left:0px; width:323; height:153; border:0px;float:left;"> 
    <IMG alt="" src=http://www.2cto.com/uploadfile/2013/0419/20130419012654313.jpg" /></div> 
    <div style="margin-left:0px; width:323; height:153; border:0px;float:left;"> 
    <IMG alt="" src=http://www.2cto.com/uploadfile/2013/0419/20130419012654389.jpg" /></div> 
    <div style="margin-left:0px; width:323; height:153; border:0px;float:left;"> 
    <IMG alt="" src=http://www.2cto.com/uploadfile/2013/0419/20130419012654394.jpg" /></div> 
</div> 
<div style="margin-left:0px; float:left;"> 
    <div style="margin-left:0px; width:291; height:142; border:0px;float:left;"> 
    <IMG alt="" src=http://www.2cto.com/uploadfile/2013/0419/20130419012654793.jpg" /></div> 
    <div style="margin-left:0px; width:254; height:142; border:0px;float:left;"> 
    <IMG alt="" src=http://www.2cto.com/uploadfile/2013/0419/20130419012654876.jpg" /></div> 
    <div style="margin-left:0px; width:133; height:142; border:0px;float:left;"> 

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • WordPress添加百度喜欢按钮小技巧
  • Wordpress 博客如何实现自定义Gravatar头像
  • 网站设计分析:建立良好的视觉层级
  • 网站设计分析:“中国式设计”的三个方向
  • 案例分析:奥巴马筹款网站的制作过程
  • 7大主流B2C首页导航栏设计对比分析
  • 创建不平衡的平衡:在网页设计中使用不对称设计
  • Wordpress页面模板制作方法及使用
  • css控制文字前的小图标
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1