网页设计与制作项目教程HTML+CSS+JavaScript之项目三 flower shop

最新推荐文章于 2023-10-26 15:49:35 发布

MrSuper王

最新推荐文章于 2023-10-26 15:49:35 发布

阅读量4.6k

点赞数 12

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

本文链接：https://blog.csdn.net/m0_46412771/article/details/105860275

版权

html 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

flower shop

html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style03.css" type="text/css" />
<title>网上花店</title>
</head>
<body>
<!-- header begin-->
<div class="header">
       <h1><strong>彼岸の花</strong>   <em>偏安一隅 静静生活</em></h1>
    <hr size="2" color="#d1d1d1" width="980px"/>
</div>
<!-- header end-->
<!-- fenlei begin-->
<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 fragrance...</p>
    <br />
</div>  
<!-- fenlei end-->
<!--bestseller begin-->
<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>
    <br />
</div>
<!--bestseller end-->
<!--footer begin-->
<div class="shouhou">
    品质保障&nbsp;&nbsp;|&nbsp;&nbsp;七天无理由退换货&nbsp;&nbsp;|&nbsp;&nbsp;特色服务体验&n&nbsp;|nb&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 begin-->
</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*/
.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*/
.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;
   }

实现效果如下：
在这里插入图片描述

如有需要项目图片资源的，可到资源处下载：
https://download.csdn.net/download/m0_46412771/12376471

MrSuper王

关注

12
点赞
踩
69

收藏

觉得还不错? 一键收藏
0
评论
网页设计与制作项目教程HTML+CSS+JavaScript之项目三 flower shop

flower shophtml代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">...
复制链接

扫一扫