html head meta charset=UTF-8 title弹性布局title head style
<html>
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
</head>
<style>
.container1{
justify-content:start;
}
.container2{
justify-content:end;
}
.container3{
justify-content:center;
}
.container4{
justify-content:space-between;
}
.container5{
justify-content:space-around;
}
div[class^=item]{
background-color: #B2f2bb;
border: 4px solid #9ac190;
border-radius: 4px;
margin-right: 10px;
height: 20px;
/*width: 100px;*/
}
div[class^=container]{
margin: 0 auto;
width: 1000px;
height: 100px;
background-color: rosybrown;
border-radius: 20px 20px 20px 20px;
border: 4px solid #f4a5a5;
display: flex;
align-items: center;
}
.item1{
width: 100px;
}
.item2{
width: 50px;
}
.item3{
width: 100px;
}
</style>
<body>
<h1>flex-start</h1>
<div class="container1">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-end</h1>
<div class="container2">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-</h1>
<div class="container3">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-</h1>
<div class="container4">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-</h1>
<div class="container5">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>子页</title>
<link rel="stylesheet" type="text/css" href="css/子页.css"/>
</head>
<body>
<div class="beijing">
<div class="top">
<div class="top-bar">
<div class="logo">
</div>
<div class="at1">手机访问www.com</div>
<div class="clear"></div>
</div>
<div class="nav">
<ul>
<li>
<a href="#">亿贝首页</a>
</li>
<li>
<a href="#">亿贝CALI</a>
</li>
<li class="active">
<a href="5.8子页.html">亿贝通讯录</a>
</li>
<li>
<a href="#">最新动态</a>
</li>
<li>
<a href="#">留言板</a>
</li>
<li>
<a href="#">帮助中心</a>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="banner2">
<img src="img/banner2.jpg"/>
</div>
<div class="clear"></div>
<div class="color">
<div class="yibei1">亿贝通讯录
<div class="dangqian"><span style="color:#F00">当前位置：</span>首页 >亿贝通讯录</div>
</div>
<div class="left">
<div class="at3">
<div class="at3_l"><img src="img/icon3.gif" width="90" height="90" /></div>
<div class="at3_c">
<h2>亿贝通讯录<span>（版本 1.23）</span></h2>
<p>下载即赠送2元话费，无月租、长途费用，拨打国内任意电话每分钟低至0.08元，独有的快速拨号技术，让您使用亿贝通话变得非常方便。</p>
</div>
<div class="at3_r">
<a href="http://www.865171.cn/"><img src="img/btn1.jpg" width="142" height="39" /></a>
</div>
</div>
<div class="clear"></div>
<div class="box4">
<div class="box4_l">
<a href="http://www.865171.cn/"><img src="img/5.jpg" width="59" height="60" /></a>
</div>
<div class="box4_r">
<h2><a href="http://www.865171.cn/">安全方便</a></h2>
<p>能帮您把手机中的电话号码备份到一个有密码保护的网络存储空间中，永不丢失，操作界面简洁美观，只需2到3分即可完成备份。</p>
</div>
<div class="clear"></div>
</div>
<div class="box4">
<div class="box4_l">
<a href="http://www.865171.cn/"><img src="img/6.jpg" width="59" height="60" /></a>
</div>
<div class="box4_r">
<h2><a href="http://www.865171.cn/">备份提醒</a></h2>
<p>当您隔一段时间忘记备份时，我们会自动通过短信或邮件提醒您进行备份。</p>
</div>
<div class="clear"></div>
</div>
<div class="box4">
<div class="box4_l">
<a href="http://www.865171.cn/"><img src="img/7.jpg" width="59" height="60" /></a>
</div>
<div class="box4_r">
<h2><a href="http://www.865171.cn/">快速恢复</a></h2>
<p>在您购买新机时，能帮您把备份的电话号码迅速下载到您的新手机上。</p>
</div>
<div class="clear"></div>
</div>
<div class="box4">
<div class="box4_l">
<a href="http://www.865171.cn/"><img src="img/8.jpg" width="59" height="60" /></a>
</div>
<div class="box4_r">
<h2><a href="http://www.865171.cn/">在线浏览</a></h2>
<p>在您手机没带或者没电时，还能通过WAP和WEB网站随时随地查看您的电话号码本。</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="right">
<div class="box6">
<div class="prot3">
<div class="prot4">
<div class="at4">
<p>您可以随时充值、查询余额、查询话单、查询资费信息，让您明明白白消费。您可以随时充值、查询余额、查询话单、查询资费信息，让</p>
<br />
<br />
<img src="img/img2.jpg" />
</div>
<div class="jiantou"></div>
</div>
</div>
</div>
<div class="box5">
<div class="prot1">
<div class="port2">
<h2 class="title3"><img src="img/icon8.jpg" width="32" height="32" /> 常见问题</h2>
<ul class="menu2">
<li>
<a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a>
</li>
<li>
<a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a>
</li>
<li>
<a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a>
</li>
<li>
<a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a>
</li>
<li>
<a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a>
</li>
</ul>
<div class="more">
<a href="http://www.865171.cn/">>>了解详情</a>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<footer class="footer">
<div class="container2">
<div class="footer-links">
<a href=" ">帮助中心</a > | <a href="#">隐私条款</a > | <a href="#">关于我们</a >
</div>
<div class="copyright">
<img class="fImg" src="../yibei/img/logo2.jpg" alt="logo2" />
<span> ©2009 INBAI Technology Co.Ltd <br />粤ICP备09104593</span>
</div>
</div>
</footer>
</body>
</html>
.banner2 {
background: url(../img/bg.jpg) no-repeat left bottom;
height: 103px;
}
.banner2 img {
width: 1000px;
height: 100px;
}
.bar {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #cacaca;
position: relative;
text-indent: 50px;
margin-bottom: 16px;
}
.bar b {
color: #3a0b00;
font-size: 22px;
font-weight: 400
}
.bar span {
position: absolute;
right: 45px;
top: 0;
display: block;
color: #bb3c03
}
.bar samp {
position: absolute;
right: 45px;
top: 0;
display: block;
}
.bar samp a {
color: #bb3c03;
font-weight: bold;
}
.left {
width: 580px;
float: left;
margin: 0 37px 0 50px;
display: inline
}
.box4 {
border-bottom: 1px dashed #cacaca;
padding: 16px 0 12px 0;
overflow: hidden
}
.at3 {
border-bottom: 1px solid #cacaca;
padding: 0px 0 135px 0;
align-items: center;
margin-top: 20px;
}
.at3_l {
width: 90px;
height: 90px;
float: left
}
.at3_c {
width: 305px;
float: left;
margin: 0 15px;
display: inline
}
.at3_c h2 {
color: #3a0b00;
font-size: 18px;
margin-bottom: 8px;
}
.at3_c h2 span {
color: #454545;
font-size: 12px;
font-weight: normal
}
.at3_r {
width: 142px;
float: left;
margin-top: 50px;
align-items: center;
}
.box4_l {
width: 59px;
height: 60px;
float: left;
margin: 0 36px 0 14px;
display: inline
}
.box4_l img {
width: 59px;
height: 60px;
}
.box4_r {
width: 470px;
float: right;
overflow: hidden
}
.box4_r h2 {
font-size: 14px;
padding-bottom: 8px;
}
.box4_r a {
color: #3a0b00
}
.box4_r p {
line-height: 20px;
}
.right {
width: 283px;
float: left
}
.box6 {
background: url(../img/prot6.jpg) repeat-y;
margin-bottom: 14px;
}
.prot3 {
background: url(../img/port4.jpg) no-repeat left top;
}
.prot4 {
background: url(../img/prot5.jpg) no-repeat left bottom;
padding: 10px 0 14px 0;
position: relative;
}
.jiantou {
background: url(../img/left.jpg) no-repeat;
width: 14px;
height: 27px;
position: absolute;
left: -12px;
top: 30px;
z-index: 100
}
.at4 {
width: 210px;
margin: 0 auto;
background: url(../img/icon9.jpg) no-repeat left top;
padding: 2px 0 0 40px;
color: #792100;
}
.box5 {
background: url(../img/prot2.jpg) repeat-y;
}
.prot1 {
background: url(../img/prot1.jpg) no-repeat left top
}
.port2 {
background: url(../img/prot3.jpg) no-repeat left bottom;
padding: 18px 0
}
.title3 {
height: 32px;
line-height: 32px;
padding: 0 0 14px;
color: #3a0b00;
font-size: 18px;
font-weight: 400;
}
.title3 * {
vertical-align: middle;
margin-left: 20px;
}
.title3 img{
vertical-align: middle;
margin-right: 8px;
}
.menu2 {
width: 235px;
margin: 20px auto
}
.menu2 li {
height: 24px;
line-height: 24px;
background: url(../img/icon7.jpg) no-repeat left center
}
.menu2 li a {
margin-left: 10px
}
.more {
text-align: right;
padding-right: 30px;
}
.more a {
color: #b04f01
}
.clear {
clear: both;
width: 100%;
height: 0;
overflow: hidden;
}
.top {
background-image: url(../img/bg1.jpg);
height: 118px;
}
.top-bar {
width: 1000px;
margin: 0 auto;
}
.logo {
float: left;
width: 241px;
height: 79px;
background-image: url(../img/logo.png);
}
.at1 {
float: right;
width: 209px;
height: 30px;
line-height: 30px;
/*background-color: red;*/
margin-top: 24px;
background-image: url(../img/bg1.png);
color: #FFFFFF;
text-indent: 50px;
}
.nav {
background: url(../img/bg2.jpg);
height: 40px;
line-height: 40px;
}
.nav ul {
margin: 0 auto;
width: 1000px;
}
.nav ul li {
float: left;
width: 166px;
text-align: center;
list-style-type: none;
/*去掉修饰符*/
background-image: url(../img/nav_s.jpg);
background-repeat: no-repeat;
background-position: left 2px;
}
.nav ul li a {
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
/*去下划线*/
width: 166px;
}
.nav ul li a:hover {
background-image: url(../img/nav_h.jpg);
text-decoration: underline;
/*添加下划线*/
}
.nav ul li.active a {
background-image: url(../img/nav_h.jpg);
text-decoration: underline;
}
.beijing{
font-size: 12px;
color:#454545;
font-family: "微软雅黑", "arial, helvetica, sans-serif";
background-color: #909090;
background-image: url(../img/bg3.jpg);
/*背景图片*/
background-repeat: repeat-x;
/*背景图片重复*/
background-position: left bottom;
/*背景图片的位置,分为水平*/
background-attachment: fixed;
/*背景的固定*/
}
.color {
background-color: white;
overflow: hidden;
/*margin-left: -50px;*/
}
.yibei1 {
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: bold;
color: #3a0b00;
border-bottom: 1px solid #cacaca;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding-right: 20px;
}
.dangqian {
position: absolute;
right: 10px;
top: 0;
font-size: 12px;
font-weight: normal;
align-items: center;
margin-right: 50px;
}
.container{
width: 1000px;
margin: 0 auto;
}
.footer {
width: 100%;
height: 52px;
background: url(../img/bg3.jpg);
color: #777;
font-size: 12px;
}
.container2 {
width: 1000px;
height: 52px;
margin: 0 auto;
/* background-color: #ff0000; */
position: relative;
}
.footer-links {
float: left;
padding-top: 20px;
}
.fImg {
float: left;
}
.copyright span {
float: left;
margin-top: 5px;
}
.copyright {
position: absolute;
right: 0;
top: 6px;
}
.right{
margin-top: 20px;
}
子页，弹性盒子
浙公网安备 33010602011771号