The code is as follows:
<HTML><Head> <MetaCharSet= "Utf-8"> <title></title> <styletype= "Text/css"> *{padding:0;margin:0; }. Clearfloat{Zoom:1;/*Activating IE Properties*/ }. Clearfloat:after{Display:Block;Clear:both;content:"';Visibility:Hidden;Height:0; }. Header{width:1000px;Height:40px;Line-height:40px;margin:0 Auto;background:#ccc; }. Header H3{float: Left;Margin-left:40px;Color:#fff; }. header. Line{float: Left;width:200px;Margin-left:50px;Margin-top:20px;Border-top:1px solid #fff; }. header. Btn-group{float: Right;Margin-right:20px; }. header. btn{ /*The inline-block element defaults to a 4px margin of hack, such as IMG, which is resolved by changing it to a block element*/Display:Inline-block;width:10px;Height:10px;Margin-left:6px;background:#999;Border-radius:50%;/*The box will turn into a circle*/ }. header. Active{background:#69f; } </style></Head><Body> <Divclass= "header Clearfloat"> <H3>Fruit List</H3> <Divclass= "line"></Div> <Divclass= "Btn-group"> <ahref=""class= "BTN Active"></a> <ahref=""class= "BTN"></a> <ahref=""class= "BTN"></a> <ahref=""class= "BTN"></a> </Div> </Div></Body></HTML>
CSS---h3 title, horizontal line, and Circle button