Html Css（博文尚美）案例筆記

一·.定義全域性的CSS程式碼：
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix::after{
content: “”;
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.center{

width: 1090px;
margin: 0 auto;
}
二、logo設定：
HTML程式碼：

• HOME
• ABOUT
• PROTFOLIO
• SERVICE
• NEWS
• CONTACT

CSS程式碼： .header{ height: 60px; padding-top: 20px; } .header .logo{ width: 167px; height: 44px; } .header .nav{ width: 690px; color: #646464; font-size: 14px; } .header .nav>li{ float: left; margin-left: 50px; line-height: 44px; } logo效果圖： 

三、banner設定：

HTML程式碼：

CSS程式碼： .banner{ position: relative; } .banner > ul img{ width: 100%; } .banner .banner-list{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .banner .banner-list li{ height: 8px; width: 8px; border-radius: 50%; border: 2px solid #fff; float: left; margin: 0 6px; } .banner .banner-list .active{ background-color: #fff; } banner效果圖：