本篇博客我们来做一个好看又简单的前端案例——彼岸的花网页界面。

这里是代码和网页素材，需要的自取：(提取码：7777)https://pan.baidu.com/s/1PH0TCuLpapPlJnczDcGkig?pwd=7777&_at_=1669882863950

一、案例图

二、源代码

2.1 html部分

2.2 css部分

一、案例图

二、源代码

2.1 html部分

<body><!--标题模块--><div class="header"><h1><strong>彼岸の花</strong>&nbsp;&nbsp;<em>偏安一隅 静静生活</em></h1><hr size="2" color="#d1d1d1" width="980px" /></div><!--分类模块--><div class="fenlei"><h2>商品分类 ></h2><img src="banner.jpg" alt="网上花店" /><br /><br /><p>我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样的芬芳...</p><p>I love flowers, quietly open, never quiet. Little flowers, with the same fragrance...</p><br /></div><!--热卖模块--><div class="bestseller"><img src="bestseller1.png" alt="" /><br /><br /><img src="bestseller2.jpg" alt="" /><br /><br /><p class="txt">多肉植物是指植物营养器官肥大的高等植物，<em>通常具根、茎、叶三种营养器官和花、果实、种子三种繁殖器官</em>。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。</p><p class="txt"><em>全世界共有多肉植物一万余种</em>，它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。</p><br /></div><!--页脚模块--><div class="shouhou">品质保障&nbsp;&nbsp;|&nbsp;&nbsp;七天无理由退换货&nbsp;&nbsp;|&nbsp;&nbsp;特色服务体验&nbsp;&nbsp;|&nbsp;&nbsp;帮助中心<br /><br /></div><div class="boss"><img src="tuxiang.gif" alt="网上花店" align="left" /><h3>店主：Michael_唐僧</h3><p>飞舞的花儿像一首诗 ?写着秋天的心事 ?带着相思 ?轻轻、轻轻 ?飘向大地 ?</p><p>也许这只是秋季里的一场游戏 ?</p><br /><br /><br /></div>
</body>

2.2 css部分

  <style type="text/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*/.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;}</style>

2.3 效果图

最近这几天在努力学习前端的课程，因为学校的前端课有点跟不上了，所以计划中的数据结构的博客得拖一拖了。

【Web前端】彼岸の花——网上花店(网页制作)相关推荐

web前端开发——期末大作业网页制作——web网页设计期末课程大作业 HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript
web前端大三实训网页设计:餐饮网站设计--烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
web前端开发技术：旅游网页设计与实现——旅游风景区网站HTML+CSS
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制 ...
大一学生Web课程设计红酒美食主题网页制作(HTML+CSS+JavaScript)
Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | ...
web前端期末大作业【网页设计】基于HTML+CSS2 华为商城 5页
Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项 ...
Web前端---响应式室内家具网页设计（HTML+CSS+JS）
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
web前端入门到实战：网页设计十大流行趋势
1.个性化排版设计最近看到越来越多的网络设计尝试个性化的风格,其中比较突出的一点是个性化字体的增多:用自己独特设计的字体代替标准印刷体,让设计更加独特.让字体在体现个性的同时保留专业印刷风格. 2. ...
Web前端：Web前端开发工程师工作内容网页案例设计
题目要求参考代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
Web前端小白必看【网页开发工具/HTML常用标签】
网页开发工具和HTML常用标签一.网页开发工具vscode的使用 1.1常见的网页开发工具: 1.2vscode为例创建网页文件. 1.3vscode网页制作相关插件安装 1.4vscode出现的网 ...

【Web前端】彼岸の花——网上花店(网页制作)

一、案例图

二、源代码

2.1 html部分

2.2 css部分

2.3 效果图

【Web前端】彼岸の花——网上花店(网页制作)相关推荐

最新文章

热门文章