《网页设计与制作项目教材》-Chapter03网上花店 -20210603

最新推荐文章于 2023-09-13 22:45:54 发布

i see the future

最新推荐文章于 2023-09-13 22:45:54 发布

阅读量3.4k

点赞数 9

分类专栏： HTML/CSS/JS/Bootstrap 文章标签： html css

本文链接：https://blog.csdn.net/m0_46629123/article/details/117536480

版权

HTML/CSS/JS/Bootstrap 专栏收录该内容

98 篇文章 9 订阅

订阅专栏

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="">
    <p>我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样的芬芳...</p>
    <p>I love flowers, quietly open, never quiet. Little flowers, with the same fragrance...</p>
</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">全世界共有多肉植物一万余种，它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。</p>
</div>
<!--bestseller end-->
<!--footer begin-->
<div class="shouhou">
    <p>品质保障&nbsp;&nbsp;|&nbsp;&nbsp;七天无理由退换货&nbsp;&nbsp;|&nbsp;&nbsp;特色服务体验&nbsp;&nbsp;|&nbsp;&nbsp;帮助中心</p>
    <br /><br />
</div>
<div class="boss">
    <img src="images/person2.jpg" 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{
    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;
	}