HTML5前端开发实战03-网上花店网页制作

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

页面效果

页面源码

HTML源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="css/style.css" type="text/css" /><title>网上花店</title></head><body><!-- 头部模块 begin--><div class="header"><h1><strong>蝶恋花</strong> <em>花开荼蘼 恋恋不忘</em></h1><hr size="2" color="#d1d1d1"/></div><!-- 头部模块 end--><!-- 分类模块 begin--><div class="category"><h2>商品分类 ></h2><img src="img/banner.jpg" alt="网上花店" /><br /><br /><p>我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着清新的芬芳...</p><p>I love flowers, quietly open, never quiet. Little flowers, with the ...</p><br /></div><!-- 分类模块 end--><!-- 热卖模块 begin--><div class="bestseller"><img src="img/bestseller1.png" alt="bestseller1" /><br /><br /><img src="img/bestseller2.jpg" alt="bestseller2" /><br /><br /><p class="description">多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。</p><p class="description"><em>全世界共有多肉植物一万余种</em>，它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。</p><br /></div><!-- 热卖模块 end--><!-- 底部模块 begin--><div class="service">品质保障&nbsp;&nbsp;|&nbsp;&nbsp;免费退换&nbsp;&nbsp;|&nbsp;&nbsp;优质服务&nbsp;|&nbsp;帮助中心<br /><br /></div><div class="owner"><img src="img/icon.gif" alt="头像" align="left" /><h3>店主：盛夏</h3><p>飞舞的花儿像一首诗 ，写着秋天的心事 ，带着相思 ，轻轻地飘向大地</p><p>秋已至、夏未尽</p><br /><br /><br /></div><!--  底部模块 begin--></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;
}.category {width: 980px;margin: 0 auto;
}.category h2 {font-size: 14px;font-family: "微软雅黑";color: #a5a5a5;height: 42px;line-height: 42px;
}.category p {line-height: 30px;text-align: center;font-size: 18px;
}.bestseller {width: 602px;margin: 0 auto;
}.bestseller .description {line-height: 30px;text-indent: 2em;
}.bestseller .description em {font-style: normal;text-decoration: underline;
}.service {width: 602px;margin: 0 auto;text-align: center;font-family: "微软雅黑";font-size: 16px;font-weight: bold;
}.owner {width: 602px;margin: 0 auto;
}.owner p {text-indent: 2em;
}.owner h3 {height: 30px;line-height: 30px;font-family: "微软雅黑";font-size: 18px;font-weight: normal;text-indent: 2em;
}.owner p {font-style: italic;line-height: 26px;font-size: 14px;
}

HTML5前端开发实战03-网上花店网页制作相关推荐

【Web前端】彼岸の花——网上花店(网页制作)
本篇博客我们来做一个好看又简单的前端案例--彼岸的花网页界面. 这里是代码和网页素材,需要的自取:(提取码:7777)https://pan.baidu.com/s/1PH0TCuLpapPlJncz ...
HTML5前端开发实战02-旅游网页面设计
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
HTML5前端开发实战08-外语培训
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
HTML5前端开发实战06-幸福表单
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
HTML5期末大作业：网上花店网站设计——简约的网上花店网站设计(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:网上花店网站设计--简约的网上花店网站设计(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网 ...
HTML5期末大作业：XXX 网站设计——指环王：护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规
HTML5期末大作业:XXX 网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划 ...
HTML5期末大作业：影视电影网站设计—— 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计
HTML5期末大作业:影视电影网站设计-- 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计常见网页设计作业 ...
HTML5期末大作业：网上花店网站设计——鲜花店电商网站(24页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:网上花店网站设计--鲜花店电商网站(24页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计 ...
什么是HTML5前端开发？HTML5前端要学哪些技术？
什么是HTML5前端开发?HTML5前端要学哪些技术? 什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的.程序员指从事程 ...
微信小程序云开发实战：网上商城（二）
微信小程序云开发实战:网上商城(二) 主页面入口页面云函数与云数据库代码实现云端实现小程序端实现选择UI组件库 WeUI Vant 整合UI组件库以扩展包的方式引入weui 接下来主页 ...

HTML5前端开发实战03-网上花店网页制作

版权声明

页面效果

页面源码

HTML源码

CSS源码

HTML5前端开发实战03-网上花店网页制作相关推荐

最新文章

热门文章