网页设计与制作项目教程HTML+CSS+JavaScript之项目三 flower shop
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"> 品质保障 | 七天无理由退换货 | 特色服务体验&n |nb 帮助中心 <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> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
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; } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
实现效果如下：
如有需要项目图片资源的，可到资源处下载：
https://download.csdn.net/download/m0_46412771/12376471
相关知识
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
HTML5期末大作业：网上花店/鲜花网站设计——大气的鲜花预订商城(6页) HTML+CSS+JavaScript
Bootstrap响应式食饮类网页制作教程资源
学生花卉网网页设计作品 学生鲜花网页模板 简单在线花店主页成品 鲜花网页制作 HTML学生花店商城网站作业设计
HTML+CSS网页设计期末课程大作——篮球网页设计(6页) 学校篮球网页制作模板 学生简单体育运动网站设计成品
HTML5期末大作业：鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码
七夕情人节送花告白动画(HTML+CSS+JavaScript)
网页版式设计与色彩搭配（101页）
web课程设计网页规划与设计：鲜花网站设计——基于HTML+CSS+JavaScript制作网上鲜花网页设计(5页)
【司空侠PS教程】景观项目提升之小区创意花坛改造设计
网址: 网页设计与制作项目教程HTML+CSS+JavaScript之项目三 flower shop https://m.huajiangbk.com/newsview562567.html
| 上一篇: 花店经营模拟器卡顿延迟掉帧怎么解 |
下一篇: Java+JSP网上花店系统设计 |
