制作亿贝网页
制作亿贝网页
亿贝前端练习页面
html
<``head>
<``meta charset="utf-8" />
<title>亿贝首页</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="top">
<div class="top_bar">
<div class="logo">
</div>
<div class="at1">
手机访问WAP.INBAI.COM
</div>
<div class="clear">
</div>
</div>
<div class="nav">
<ul>
<li><a href="#">亿贝首页</a></li>
<li><a href="#">亿贝call</a></li>
<li><a href="#">亿贝通讯录</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">留言版</a></li>
<li><a href="#">帮助中心</a></li>
</ul>
</div>
</div>
</body>
插入背景图片 分析
*{margin: 0; padding: 0;}
body{
font-size: 12px;
color: #454545;
font-family: "微软雅黑","arial, helvetica, sans-serif";
background-color: #909090;
background-image:url(../img/img/bg3.jpg) ;/背景图片/
background-repeat:repeat-x;/背景图片重复/
background-position: left bottom;/背景图片的位置,分为水平和垂直2个方向/
background-attachment: fixed;/背景的固定/
}
.clear{
clear: both;
width: 100%;
height: 0;
overflow: hidden;
}
.top{
/背景图片是bg1/
background-image:url(../img/img/bg1.jpg);
height: 118px;
}
.top_bar,.nav ul{
margin: 0 auto;
width: 1000px;
}
.logo{
float: left;
width: 241px;
height: 79px;
background-image: url(../img/img/logo.png);
/background-color: red;/
}
.at1{
float:right;
width: 209px;
height: 30px;
line-height: 30px;
margin-top:24px;
background-image: url(../img/img/bg1.png);
/background-color: red;/
color: #ffffff;
text-indent: 50px;
}
.nav{
background-image: url(../img/img/bg2.jpg);
height: 40px;
line-height: 40px;
}
.nav ul li{
float: left;
width: 166px;
background-image: url(../img/img/nav_s.jpg);
background-repeat: no-repeat;
background-position: left 2px;
list-style-type: none;
font-size: 14px;
text-align: center;
}
.nav ul li a{
display: block;
width: 166px;
height:40px ;
color: #FFF;
text-decoration: none;
}
.nav ul li a:hover{
background-image: url(../img/img/nav_h.jpg);
background-repeat: no-repeat;
background-position: center;
}
浙公网安备 33010602011771号