margin的簡單應用

時間 2019-11-20

標籤 margin 簡單應用欄目 CSS 简体版

原文原文鏈接

今晚學了盒模型的marg部分，簡單仿下京東的官網首頁部分html

第一次製做，儘管看來實在慘不忍睹，畢竟娘不嫌兒醜，以後多加努力吧，這幾天儘可能加快學習進度，能單獨製做一張精美的網頁最好學習

附上代碼htm

<!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>blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。