网页设计代码

网上花店

html代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>网上花店</title>

<link rel="stylesheet" href="css/style03.css" type="text/css">

</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.litter 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>

</div>

<!--bestseller end-->

<!--footer begin-->

<div class="shouhou">

<p>品质保障&nbsp;&nbsp;|&nbsp;&nbsp;七天无理由退换货&nbsp;&nbsp;|&nbsp;&nbsp;特色服务体验&nbsp;&nbsp;|&nbsp;&nbsp;帮助中心</p>

</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-->

</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 em{

font-weight: 400;

font-style:normal;

font-size:14px;

}

.header strong{

font-weight:400;

font-size:30px;

font-style:normal;

}

.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;

height:30px;

}

.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;

text-family:"微软雅黑";

font-size:16px;

font-weight:bold;

}

.boss{

width:602px;

margin:0 auto;

}

.boss p{

text-indent:2em;

}

.boss h3{

height:30px;

line-height:30px;

font-family:"微软雅黑";

font-size:18px;

font-weight:normal;

text-indent:2em;

}

.boss p{

font-style:italic;

line-height:26px;

font-size:14px;

}

  • 17
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值