Index.html part
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> My first Site first page </title>
<link rel= "stylesheet" href= "Css/index.css" >
<body>
<div class= "Hd-top" >
<div class= "WP" >
<div class= "Left" >
<a href= "" >
All collections are </a>
</div>
<div class= "Right" >
<span> Welcome to All costumes! </span>
<a href= "" > Dudu Home Improvement Blog </a>
<em>|</em>
<a href= "" >
</a>
</div>
</div>
<div class= "Clear" > </div>
</div>
<div class= "Hd-bottom" >
<div class= "WP" >
<div class= "Left" >
<div class= "logo" >
<a href= "" >
</a>
<div class= "Logo-txt" >
Quality to win customers, by word of mouth are all
<!--<span> Quality to win customers with word of mouth </span>-->
</div>
<div class= "Clear" ></div>
</div>
</div>
<div class= "Right" >
<span>0571-88854090</span><br/>
<em> Monday to Sunday 8:30-17:00</em>
</div>
<div class= "Clear" ></div>
</div>
</div>
</body>
Index.css part
@charset ' Utf-8 ';
*{margin:0;padding:0;}
body{
Font-family: "Microsoft Jas Black";
}
a{
text-decoration:none;/* Remove underline */
}
. wp{
WIDTH:100RPX;
margin:0 Auto;
/*margin: Upper right Down left
Margin: up or down
*/
/*BORDER:1PX Solid red;*/
}
. hd-top{
height:30px;
border-bottom:1px solid #dadada;
Background-color: #f5f5f5;
}
. hd-top. left{
line-height:30px;/* Inline */
Float:left;/* left floating, block element line show to float after floating out of document flow */
}
. hd-top. right{
line-height:30px;
float:right;/* right float, block element line show to float after floating out of document flow */
}
. clear{
Clear:both;
}
. hd-top. Left a{
Color: #878787;
font-size:12px;
}
. Hd-top. Left a img{
position:relative;/* Relative Positioning */
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;/* Relative Positioning */
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-polygon 1.png);/* Tile */
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;
/* Plus small yellow dot there are two ways */
/*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 Learning Code