[分享]css写蔚蓝书店静态网页

蔚蓝书店是一家以文化为主导的书店，它以质量高、价格合理、服务周到受到了广大书迷的喜爱。下面是使用CSS写静态网页的代码：/网页的基本样式/ body{ backgroundcolor:fff; col...

蔚蓝书店是一家以文化为主导的书店，它以质量高、价格合理、服务周到受到了广大书迷的喜爱。下面是使用CSS写静态网页的代码：

/*网页的基本样式*/
body{
   background-color:#fff;
   color:#000;
   font:16px/1.6 '微软雅黑',san-serif;
}

/*标题样式*/
h1{
   font-size:48px;
   color:#0072c6;
}

/*导航栏样式*/
.nav{
   height:60px;
   background-color:#0072c6;
   color:#fff;
   padding:0 10px;
}

.nav ul{
   list-style:none;
   margin:0;
   padding:0;
}

.nav li{
   float:left;
   margin-right:10px;
   line-height:60px;
}

/*内容样式*/
.content{
   padding:20px;
}

/*书籍列表样式*/
.book{
   width:200px;
   height:300px;
   padding:10px;
   margin:10px;
   border:1px solid #ccc;
   float:left;
}

.book img{
   width:160px;
   height:240px;
   margin:0 auto;
   display:block;
}

.book h3{
   margin-top:10px;
   font-size:20px;
   text-align:center;
   color:#0072c6;
} 

通过这个CSS样式，我们就可以轻松创建出一个美观、简洁的网页。网页的主色调为蓝色，符合书店的主旨。导航栏和标题使用了不同大小和颜色的字体，让他们更加突出蔚蓝书店文化的特点。

内容部分使用了float浮动左右对齐的方式，自然地开辟出一个个小块，使页面的可读性更高，更好的展示书籍信息。每本书都有独立的样式，包括边框，大小，图片对齐方式，标题颜色等等。这样更好的突出每本书的特点，让读者更加清晰地了解每本书的特点。

这个CSS样式节省了很多网页制作时间，并且让网页视觉效果更优，接下来只需要在HTML中使用这些样式进行排版，就能轻松创建一个漂亮、舒适的蔚蓝书店静态网页，为读者提供了一个美好的浏览体验。