《网上花店》

最新推荐文章于 2024-10-05 09:05:35 发布

hl20050330

最新推荐文章于 2024-10-05 09:05:35 发布

阅读量388

点赞数 8

文章标签： html5

本文链接：https://blog.csdn.net/hyw20050330/article/details/135151381

版权

《HTML》样式

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="css/style03.css" type="text/css" />
       <title>网上花店</title>
   </head>
   <body>
       <div class="header">
           <h1><strong>彼岸の花 14 </strong><em>偏安一隅静静生活</em></h1>
           <hr size="2" color="#d1d1d1" width="980px"/>
       </div>
       <div class="fenlei">
           <h2>商品分类 ></h2>
           <img src="img/banner.jpg" alt="网上花店"/>
           <br /><br />
           <p>我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样的芬芳...</p >
           <p>I love flowers, quietly open, never quiet. Little flowers, with the same fragrance...</p >
           <br />
       </div>
       <div class="bestseller">
           <img src="img/bestseller1.png" alt="" />
<br /><br />
<img src="img/bestseller2.jpg" alt="" />
<br /><br />
<p class="txt">多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。</p >
<p class="txt"><em>全世界共有多肉植物一万余种</em>，它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。</p >
<br />
       </div>
       <div class="shouhou">
           <p>品质保障  |  七天无理由退换货  |  特色服务体验  |  帮助中心</p >
       </div>
       <div class="boss">
           <img src="img/tuxiang.gif" alt="网上花店" align="left"/>
           <h3>店主：Michael_唐僧</h3>
           <p>飞舞的花儿像一首诗，写着秋天的心事。带着相思，轻轻，轻轻，飘向大地！</p >
           <p>也许这只是秋季里的一场游戏。</p >
           <br /><br /><br />
</div>
</div>
</body>
</html>

《css》样式

@charset "utf-8";
/* CSS Document */
/*重置浏览器的默认样式*/
*{margin:0; padding:0;}
/*全局控制*/
body{ background-color:#ededed; font-family:"楷体"; font-size:16px; color:#a5a5a5;}
.header{
   width:980px;
   margin:0 auto 7px;
   height:86px;
   line-height:86px;
   text-align:center;
   font-family:"微软雅黑";
   color:#a5a5a5;
}
.header h1{ font-weight:normal;}
.header strong{
   font-weight:normal;
   font-size:30px;
}
.header em{
   font-style:normal;
   font-size:14px;
}
.fenlei{
   width:980px;
   margin:0 auto;
}
.fenlei h2{
   font-size:14px;
   font-family:"微软雅黑";
   color:#a5a5a5;
   height:42px;
   line-height:42px;
   }
.fenlei p{
   line-height:30px;
   text-align:center;
   font-size:18px;
   }
.bestseller{
   width:602px;
   margin:0 auto;
}
.bestseller .txt{
   line-height:30px;
   text-indent:2em;
   }
.bestseller .txt em{
   font-style:normal;
   text-decoration:underline;
   }
.shouhou{
   width:602px;
   margin:0 auto;
   text-align:center;
   font-family:"微软雅黑";
   font-size:16px;
   font-weight:bold;
   }
.boss{
   width:602px;
   margin:0 auto;
}
.boss h3,.boss p{ text-indent:2em;}
.boss h3{
   height:30px;
   line-height:30px;
   font-family:"微软雅黑";
   font-size:18px;
   font-weight:normal;
   }
.boss p{
   font-style:italic;
   line-height:26px;
   font-size:14px;
   }