要求：参考教材p68~p76完成“网上花店”专题页

目的：1、学会建立网站站点

      2、使用HTML5标签插入文本、图片

      3、使用div+css进行页面布局

      4、使用css3控制文本及图片的样式 

      5、使用注释语句对代码进行注释                       

步骤：1、建立站点

      2、页面结构分析

      3、定义基础样式

      4、制作“标题”模块

      5、制作“分类”模块

      6、制作“热卖”模块

      7、制作“页脚”模块

<!DOCTYPE html><!--页面布局 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= initial-scale=1.0">
    <title>网上花店</title>
    <!--网页标题-->
    <link href="css/style03.css" type="text/css" rel="stylesheet"/>
    <!--外链式引入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. 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">
    <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-->
</body>
</html>

css外链式的位置可能不一样，更改就行//图片可以下载文件

/*重置浏览器的默认样式*/
*{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;
}

更多推荐

网页设计与制作项目三“网上花店”