css-布局
2018-10-22 本文已影响4人
杰伊_约翰
关于css布局里，主要的有浮动（float）关键词，可以设置为left/right/；再一个是overflow解决盒子塌陷的问题（IE 6 浏览器要使用“zoom=1”）。接着是：display 属性规定元素应该生成的框的类型。block是此元素将显示为块级元素，此元素前后会带有换行符，也就是转换为块级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>亚马逊中国区</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
height: 60px;
margin: 0 auto;
}
.content{
width: 1500px;
height: 300px;
margin: 0 auto;
}
.center{
width: 1500px;
height: 100%;
background: url('jianpiz_20181012_1500x300_books._CB481621744_.jpg');
}
.footer{
width: 1500px;
height: 200px;
background-color: #bbff44;
margin: 0 auto;
}
.footer h3{
display: block;
font-size: 50px;
font-weight: bold;
font-family: '华文彩云';
font-style: solid;
float: left;
}
.logo{
margin: 0 auto;
float: left;
width: 200px;
height: 60px;
background-image: url('捕获.PNG');
}
div .search-box{
display: block;
float:left:;
/*width:500px;*/
height:60px;
background-color:none;
margin:0 auto;
}
.input-box{
/* width:600px;*/
height:60px;
line-height:60px;
padding-left:11px;
border:0;
background:none;
text-align:left;
font-size:14px;
}
.nav-input{
float: right;
width: 80px;
height: 52px;
}
#textbox{
float: left;
width: 1250px;
height: 48px;
}
.search-box input:hover{
border-color: red;
}
.nav{
list-style: none;
margin:5px auto;
background-color: #F7F7F7;
overflow: hidden;
}
.nav li{
float: left;
width: 4%;
}
.nav a{
display: block;
width: 100%;
text-align: center;
padding:5px;
text-decoration: none;
color:#4876FF;
font-size: 10px;
}
.nav a:hover{
background-color: #F8F8FF;
color:#EE0000;
font-family: '华文彩云';
font-size: 15px;
}
.two{
list-style: none;
margin: 50px auto;
background-color: #E0FFFF;
overflow: hidden;
}
.two a{
display: block;
width: 100%;
text-align: center;
padding:5px;
text-decoration: none;
color:#63B8FF;
font-size: 10px;
}
.one li{
float: right;
width: 4%;
}
.one{
text-align: center;
display: block;
width: 100%;
text-decoration: none;
}
.one a{
display: block;
width: 100%;
text-align:center;
padding:5px;
text-decoration: none;
color:#63B8FF;
font-weight: bold;
font-size: 10px;
}
</style>
</head>
<body>
<div>
<!--头部-->
<div class="header">
<a href="css-22.html">
<div class="logo"></div>
<div class="search-box">
<input type="submit" class="nav-input" value="搜索" tabindex="22">
<input type="text" id="textbox" value="" name="field-keywords" autocomplete="off" placeholder="" class="nav-input" dir="auto" tabindex="21">
</div>
</a>
</div>
<div>
<ul class="nav">
<li><a href="https://www.amazon.cn/ap/signin?_encoding=UTF8&openid.assoc_handle=cnflex&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.mode=checkid_setup&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.ns.pape=http%3A%2F%2Fspecs.openid.net%2Fextensions%2Fpape%2F1.0&openid.pape.max_auth_age=0&openid.return_to=https%3A%2F%2Fwww.amazon.cn%2Fgp%2Fyourstore%2Fcard%3Fie%3DUTF8%26ref_%3Dcust_rec_intestitial_signin" target="_blank">My亚马逊</a></li>
<li><a href="https://www.amazon.cn/gp/goldbox/ref=nav_cs_top_nav_gb27" target="_blank">Z秒杀</a></li>
<li><a href="https://www.amazon.cn/gift-cards/b?ie=UTF8&node=311868071" target="_blank">礼品卡</a></li>
<li><a href="https://www.amazon.cn/gp/feature.html/ref=nav_topnav_sell?ie=UTF8&docId=1503558" target="_blank">我要开店</a></li>
<li><a href="https://www.amazon.cn/%E4%BA%9A%E9%A9%AC%E9%80%8A%E6%B5%B7%E5%A4%96%E8%B4%AD/b/ref=nav_nav_topnav_ags?ie=UTF8&node=1403206071" target="_blank">海外购</a></li>
<li><a href="https://www.amazon.cn/gp/help/customer/display.html/ref=nav_topnav_help" target="_blank">帮助</a></li>
<div class="one">
<li><a href="#">购物车</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</div>
</ul>
</div>
<!--主体-->
<div class="content">
<a href="https://www.amazon.cn/b?_encoding=UTF8&field-enc-merchantbin=A1AJ19PSB66TGU&node=1983162071&pf_rd_i=desktop&pf_rd_m=A1AJ19PSB66TGU&pf_rd_p=ed874869-74b6-4b6d-88ea-a5e41eb5dfcc&pf_rd_r=T9082JW6D74WQ78V9A42&pf_rd_s=Tcg-slide-bmvd&pf_rd_t=36701&ref_=p-Tcg-slide-bmvd-14-0d4e0e0a-466e-4f03-bbae-f8a84f1b603c" target="_blank">
<div class='center'>
</div>
</a>
</div>
<!--底部-->
<div class="footer">
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
<h3>待开发...</h3>
</div>
</div>
</body>
</html>
#作者：软工学院-邵广超 最近更新：2018-10-22
下面是显示的效果图：
亚马逊
