Project3_The_Flower_shop_in_Internet

最新推荐文章于 2023-12-31 18:17:44 发布

FawkesDoris

最新推荐文章于 2023-12-31 18:17:44 发布

阅读量693

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/qq_30277453/article/details/88069461

版权

web 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

web习作三

Html部分

<!DOCTYPE html>
<html lang="en" xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"; http-equiv="Content-Type" content="text/html"/>
  <link rel="stylesheet" href="css/style03.css" type="text/css"/>
    <title>网上花店</title>
</head>
<body>
<!--head begining-->
<div class = "header">
  <h1>
    <strong>彼岸の花</strong>
    <em>偏安一隅 静静生活</em>
  </h1>
  <hr size="2" color="#d1d1d1" width="980px"/>
</div>
<!--head end-->

<!--fenlei begining-->
<div class="fenlei">
<h2>商品分类</h2>
  <img src="images/banner.jpg" alt="网上花店"/>
  <br/><br/>
  <p>我喜欢一些花，静静地开放，从不声张。小小的花朵，有着一样的芬芳···</p>
  <p>I love flowers,quietly open,never quiet.Little flowers,with the same fragance...</p>
  <br/>
</div>
<!--fenlei end-->

<!--bestseller begining-->
<div class="bestseller">
<img src="images/bestseller1.png" alt=""/>
  <br/><br/>
  <img src="images/bestseller2.jpg" alt=""/>
  <br/><br/>
  <p class="txt">多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花、果实、种子三中繁殖器官/。在园艺上，又称肉质植物或者多肉花卉，但多疑多肉植物这个名称最为常用。</p>
  <p class="txt"><em>全世界共有多肉植物一万余种</em>，它们绝大多数部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。</p>
</div>
<!--bestseller end-->

<!--footer begining-->
<div class="shouou">
品质保障&nbsp;&nbsp;|&nbsp;&nbsp;七天无理由退换货&nbsp;&nbsp;|&nbsp;&nbsp;特色服务体验&nbsp;&nbsp;|&nbsp;&nbsp;帮助中心
  <br/><br/>
</div>
<div class="boss">
  <img src="images/tuxiang.gif" alt="网上花店" align="left"/>
  <h3>店主:Michael_唐僧</h3>
  <p>飞舞的花儿像一首诗？写着秋天的心事？带着相思？轻轻、轻轻？飘向大地？</p>
  <p>也许这只是求激励的一场游戏？</p>
  <br/><br/><br/>
</div>
<!--footer end-->
</body>
</html>

css部分

/*重置浏览器的默认格式*/
*{
  margin: 0; padding: 0;}
/*全局控制*/
body{background-color: #eddede;font-family: "楷体";
  font-size: 16px;
  color: #a5a5a5;}
.header{
  width: 980px;
  height: 86px;
  margin: 0 auto 7px;
  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;
}
.shouou{
  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;
}

FawkesDoris

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Project3_The_Flower_shop_in_Internet

web习作三Html部分&lt;!DOCTYPE html&gt;&lt;html lang="en" xmlns = "http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;meta charset="UTF-8"; http-equiv="Content-Type" content="tex
复制链接

扫一扫