今晚学了盒模型的marg部分，简单仿下京东的官网首页部分

第一次制作，尽管看来实在惨不忍睹，毕竟娘不嫌儿丑，之后多加努力吧，这几天尽量加快学习进度，能单独制作一张精美的网页最好

附上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axun-仿京东商城</title>
<style>
a{text-decoration: none;}
#center{
width: 900px;
height: 700px;
background: beige;
}
#header{
width:1350px;
height: 30px;
background:lightgrey;
}
#conter{
width: 1350px;
height: 150px;
background: blanchedalmond;
}
#main{
width: 1350px;
height: 470px;
margin-left: 60px;
}
#A1{
width: 210px;
height: 469px;
background: red;
float: left;
}
.cont{
height: 31px;
}
#A2{margin:15px 290px 0px 10px ;
width: 450px;
height: 457px;
float: left;
}
#A3{
width: 264px;
height: 456px;
float: left;
background: beige;
}
#a{
height: 52px;
background: green;
}
#jingdong{
width: 70%;
float: left;
}
#gengduo{
width: 30%;
float: right;
}
#a1{
height: 150px;
float: left;
background: goldenrod;
}
#a2{
width: 264px;
height: 52px;
float: left;
background: green;
}
#3{
height: 202px;

}
.cent{
width: 66px;
height: 67.5px;
background: lightsteelblue;
float: left;
}
</style>
</head>
<body>
<div id="center">
<div id="header"></div>
<div id="conter">
<a href="http://search.jd.com/Search?keyword=Vertu%E8%B6%B3%E6%B5%B4%E7%9B%86&enc=utf-8&pvid=uytxqehi.4whfyg"><img src="/D:/素材/方框.png"/></a>
</div>
<div id="main">
<div id="A1">
<div class="cont">家用电器 ></div>
<div class="cont">手机、数码、京东通信 ></div>
<div class="cont">电脑、办公 ></div>
<div class="cont">家居、家具、家装、厨具 ></div>
<div class="cont">男装、女装、内衣、珠宝 ></div>
<div class="cont">个护化妆、清洁用品 ></div>
<div class="cont">鞋靴、箱包、钟表、奢侈品 ></div>
<div class="cont">运动户外 ></div>
<div class="cont">汽车、汽车用品 ></div>
<div class="cont">母婴、玩具乐器 ></div>
<div class="cont">食品、酒类、生鲜、特产 ></div>
<div class="cont">营养保健 ></div>
<div class="cont">图书、音像、电子书 ></div>
<div class="cont">彩票、旅行、充值、票务 ></div>
<div class="cont">理财、众筹、白条、保险 ></div>
</div>
<div id="A2"><a href="http://sale.jd.com/act/mgdTYlKoOHFxSG0.html?cpdad=1DLSUE"><img src="/D:/素材/温暖.png"/></a></div>
<div id="A3">
<div id="a">
<div id="jingdong"><h4>京东快报</h4></div>
<div id="gengduo"><a href="http://www.jd.com/moreSubject.aspx"><h5>更多></h5></a></div>
</div>
<div id="a1">
<a href="http://mall.jd.com/index-1000001243.html">【特惠】善存&钙尔奇全场满100减20</a><br>
<a href="http://www.jd.com/news.aspx?id=26711">【公告】河南地区因降雪配送延迟</a><br>
<a href="http://sale.jd.com/act/7yRrm2tOzISXwW.html">【特惠】自营鞋服特卖 低至12元</a><br>
<a href="http://www.jd.com/news.aspx?id=26680">【公告】东北区因降雪配送延迟</a><br>
<a href="http://sale.jd.hk/act/OijFbvnNrDEepV.html">【特惠】黑五来袭 满235减155</a>
</div>
<div id="a2"><h4>生活服务</h4></div>
<div id="a3">
<div class="cent">话费</div>
<div class="cent">机票</div>
<div class="cent">电影票</div>
<div class="cent">游戏</div>
<div class="cent">彩票</div>
<div class="cent">团购</div>
<div class="cent">酒店</div>
<div class="cent">水电煤</div>
<div class="cent">众筹</div>
<div class="cent">理财</div>
<div class="cent">礼品卡</div>
<div class="cent">白条</div>
</div>
</div>
</body>
</html>

margin的简单应用的更多相关文章

  1. CSS margin详解

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...

  2. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  3. （转） silverlight 样式学习

    原文地址:http://www.cnblogs.com/Joetao/articles/2074727.html <UserControl x:Class="StyleDemo.Mai ...

  4. Normalize.css 初识

    一. 用来干嘛的 一个现代的.准备好了支持 HTML5 技术,并且要替代 CSS Reset 处理样式的理念. Normalize.css 使浏览器渲染所有元素更加一致,并且符合现代标准.它只是针对那 ...

  5. 这可能是史上最全的css布局教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  6. 金融量化分析【day112】：因子选股

    一.因子选股基础 二.因子选股策略实现代码 # 导入函数库 import jqdata import psutil #初始化函数,设定基准等等 def initialize(context): set ...

  7. 简单属性margin和padding

    关于margin属性的介绍 margin:20px 上 右 下 左 都是20px margin:20px 40 px 上 下 20px 左 右 40px margin:20px 40px  60px ...

  8. margin负边距的使用（超简单）

    写在开头: 在css的世界中,一切都是框,所有的框都处于流动的状态 margin负边距可以使文档流发生偏移   在没有设置margin-bottom的时候,parent的高度会跟随child的内部元素 ...

  9. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

随机推荐

  1. USACO Section 1.2 Dual Palindromes 解题报告

    题目 题目描述 有一些数(如 21),在十进制时不是回文数,但在其它进制(如二进制时为 10101)时就是回文数. 编一个程序,从文件读入两个十进制数N.S.然后找出前 N 个满足大于 S 且在两种以 ...

  2. Kubernetes 1.4 部署

    k8s 1.4 新版本部署 测试环境: node-: 10.6.0.140 node-: 10.6.0.187 node-: 10.6.0.188 kubernetes 集群,包含 master 节点 ...

  3. 如何把mysql的ID归0？

    如何把mysql的ID归0 可以归0的,truncate table + 表名     就行了

  4. SpringMVC强大的数据绑定

    6.6.2.@RequestParam绑定单个请求参数值 @RequestParam用于将请求参数区数据映射到功能处理方法的参数上. public String requestparam1(@Requ ...

  5. USACO 1.3.3 Prime Cryptarithm

    题目链接:1.3.3 我用的枚举法,即每产生一组数据就判断是否是所给数字里的. AC还沾沾自喜,但一看题解,发现自己的代码真low... 在平时练习时,应该追求高效,精炼的代码,这样比赛时才能省出大量 ...

  6. Struts2--模块包含

    login.xml: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUB ...

  7. Paragraph 对象'代表所选内容、范围或文档中的一个段落。Paragraph 对象是 Paragraphs 集合的一个成员。Paragraphs 集合包含所选内容、范围或文档中的所有段落。

    Paragraph 对象'代表所选内容.范围或文档中的一个段落.Paragraph 对象是 Paragraphs 集合的一个成员.Paragraphs 集合包含所选内容.范围或文档中的所有段落. 方法 ...

  8. php登录

    if ($name && $passowrd){ $sql = "SELECT * FROM liuyanban WHERE name = '$name' and passw ...

  9. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  10. openlayers画图形返回范围

    //画图形返回圖形的范围 var polygonLayer = new OpenLayers.Layer.Vector("选择范围"); var drawControls = ne ...