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

要求：参考教材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="data: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="data:images/bestseller1.png" alt=""/><br/><br/><img src="data: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="data: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;
}

网页设计与制作项目三“网上花店”相关推荐

web期末期中网页设计与制作项目展示
web网页设计与制作期末作品期末考试项目适合大学期末期中考试及初学web网页设计者本人大学web网页设计与制作课程总成绩94.5.本项目制作占期末65%,预估获得满分,最差情况最多扣了三五分. 最 ...
网页设计与制作项目教程HTML+CSS+JavaScript之项目一
制作第一个网页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
《网页设计与制作项目教材》-Chapter08学好英语网 -20210607
本章是最难的综合练习. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
《网页设计与制作项目教材》-Chapter06千年之恋 -20210605
注意表单的使用 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
网页设计与制作教程项目1
网页设计与制作教程项目1 Hello 大家好,我是白熊就是白熊欢迎各位有缘人来看我的文章(●'◡'●) 今天跟大家分享一下老师教我们在课堂上敲写的一些项目,今天就先分享一下项目1(适用于初学者), ...
HTML5期末大作业：210套 Dreamweaver网页设计与制作 HTML+CSS+JavaScript【建议收藏】
HTML5期末大作业:Dreamweaver网页设计与制作210例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板 ...
HTML网页设计期末课程大作业~旅游住宿酒店的HTML网页设计(14页) ~学生网页设计作业源码旅游网页代码学生网页设计与制作期末作业下载 DW旅游网页作业代码下载
旅游住宿酒店的HTML网页设计14页 ~ 学生网页设计与制作期末作业下载~ 大学生网页设计与制作成品下载 ~DW旅游网页作业代码下载临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
张洪斌 html css,网页设计与制作张洪斌刘万辉体设计.doc
网页设计与制作张洪斌刘万辉体设计 <网页设计与制作>课程整体设计课程代码KC11课程性质专业基础课建议学时48适用专业软件技术及相关专业建议教学方式"教.学.做" ...
HTML静态页面总体设计思路,网页设计与制作(HTML+CSS+JavaScript)（张洪斌刘万辉）课程整体设计...
内容简介: 网页设计与制作(HTML+CSS+JavaScript)(张洪斌刘万辉)课程整体设计一.课程设计思路本课程依据课程标准,以软件技术专业学生的就业岗位群能力目标为导向,以Web客户端静 ...
html网页特效微课,让微课走进中职网页设计与制作教学
原标题:让微课走进中职网页设计与制作教学让微课走进中职网页设计与制作教学［摘要］网页设计与制作是中职计算机课程的重要组成部分,对帮助学生认识一些重要的编程语言.掌握网页设计的技能具有重要意义.但 ...

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

网页设计与制作项目三“网上花店”相关推荐

最新文章

热门文章