20160602 html5学习代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20160602 html5学习代码相关的知识，希望对你有一定的参考价值。
index.html部分
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>我的第一个网站首页面</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<div class="hd-top">
<div class="wp">
<div class="left">
<a href="">
<img src="images/icon-star.png" >
收藏都都</a>
</div>
<div class="right">
<span>欢迎来到都都服饰！</span>
<a href=""><img src="images/icon-xinlang.png" />都都家装博客</a>
<em>|</em>
<a href=""><img src="images/icon-weixin.png" / >微信
<img src="images/icon-二维码.png" />
</a>
</div>
</div>
<div class="clear"> </div>
</div>
<div class="hd-bottom">
<div class="wp">
<div class="left">
<div class="logo">
<a href="">
<img src="images/logo.png"/>
</a>
<div class="logo-txt">
重质量赢客户，以口碑传都都
<!--<span>重质量赢客户，以口碑传都都</span>-->
</div>
<div class="clear"></div>
</div>
</div>
<div class="right">
<span>0571-88854090</span><br/>
<em>周一至周日8：30-17:00</em>
</div>
<div class="clear"></div>
</div>
</div>
</header>
</body>
</html>
index.css部分
@charset ‘utf-8‘;
*{margin: 0;padding: 0;}
body{
font-family: "微软雅黑"；
}
a{
text-decoration: none;/*去除下划线*/
}
.wp{
width: 1200px;
margin: 0 auto;
/*margin: 上 右 下 左
margin: 上 左右 下
*/
/*border: 1px solid red;*/
}
.hd-top{
height: 30px;
border-bottom: 1px solid #dadada;
background-color: #f5f5f5;
}
.hd-top .left{
line-height: 30px;/*内联*/
float: left;/* 左浮动，块元素一行展示要浮动 浮动以后脱离文档流*/
}
.hd-top .right{
line-height: 30px;
float: right;/* 右浮动，块元素一行展示要浮动 浮动以后脱离文档流*/
}
.clear{
clear: both;
}
.hd-top .left a{
color: #878787;
font-size: 12px;
}
.hd-top .left a img{
position: relative;/*相对定位*/
top: 2px;
margin-left: 2px;
}
.hd-top .right span{
color: #515151;
font-size: 12px;
margin-right: 30px;
}
.hd-top .right a{
color: #878787;
font-size: 12px;
}
.hd-top .right a img{
position: relative;/*相对定位*/
margin:0 6px 0 6px;
top: 2px;
display: inline-block;
}
.hd-top .right em{
height: 14px;
font-style: normal;
color: #d1d1d1;
margin: 0 8px 0 8px;
}
.hd-top .right a:last-child{
display: inline-block;
padding-right: 16px;
background-image: url(../images/icon-多边形1.png);/*平铺 */
background-repeat: no-repeat;
background-position: right center;
}
/*.hd-bottom*/
.hd-bottom{
padding-top: 15px;
height: 55px;
border: 1px solid red;
}
.hd-bottom .left{
line-height: 70px;
float: left;
}
.hd-bottom .right{
float: right;
text-align: right;
}
.logo img{
float: left;
}
.logo-txt{
font-size: 17px;
color: #616161;
margin-left: 15px;
padding-left: 25px;
float: left;
height: 36px;
line-height: 36px;
margin-top: 3px;
background:url("../images/dian.png") no-repeat 15px center;
border-left:1px solid #dfdfdf;
/* 加小黄点有两种方法*/
/*padding-left: 15px;*/
}
/*.logo-txt span{
margin-left: 10px;
}*/
.hd-bottom .right span{
color: #f08300;
font-size: 24px;
font-family: "Arial";
padding-left:42px;
background:url("../images/tel.png") no-repeat left center;
}
.hd-bottom .right em{
font-style: normal;
font-size: 12px;
color: #906a57;
}
以上是关于20160602 html5学习代码的主要内容，如果未能解决你的问题，请参考以下文章