0
0

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

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

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

一、案例图

二、源代码

2.1 html部分

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

2.2 css部分

  1.   <style type="text/css">
  2.     * {
  3.       margin: 0;
  4.       padding: 0;
  5.     }
  7.     body {
  8.       background-color: #ededed;
  9.       font-family: "楷体";
  10.       font-size: 16px;
  11.       color: #a5a5a5;
  12.     }
  14.     .header {
  15.       width: 980px;
  16.       margin: 0 auto 7px;
  17.       height: 86px;
  18.       line-height: 86px;
  19.       text-align: center;
  20.       font-family: "微软雅黑";
  21.       color: #a5a5a5;
  22.     }
  24.     .header h1 {
  25.       font-weight: normal;
  26.     }
  28.     .header strong {
  29.       font-weight: normal;
  30.       font-size: 30px;
  31.     }
  33.     .header em {
  34.       font-style: normal;
  35.       font-size: 14px;
  36.     }
  38.     /*fenlei*/
  39.     .fenlei {
  40.       width: 980px;
  41.       margin: 0 auto;
  42.     }
  44.     .fenlei h2 {
  45.       font-size: 14px;
  46.       font-family: "微软雅黑";
  47.       color: #a5a5a5;
  48.       height: 42px;
  49.       line-height: 42px;
  50.     }
  52.     .fenlei p {
  53.       line-height: 30px;
  54.       text-align: center;
  55.       font-size: 18px;
  56.     }
  58.     /*bestseller*/
  59.     .bestseller {
  60.       width: 602px;
  61.       margin: 0 auto;
  62.     }
  64.     .bestseller .txt {
  65.       line-height: 30px;
  66.       text-indent: 2em;
  67.     }
  69.     .bestseller .txt em {
  70.       font-style: normal;
  71.       text-decoration: underline;
  72.     }
  74.     .shouhou {
  75.       width: 602px;
  76.       margin: 0 auto;
  77.       text-align: center;
  78.       font-family: "微软雅黑";
  79.       font-size: 16px;
  80.       font-weight: bold;
  81.     }
  83.     .boss {
  84.       width: 602px;
  85.       margin: 0 auto;
  86.     }
  88.     .boss h3,
  89.     .boss p {
  90.       text-indent: 2em;
  91.     }
  93.     .boss h3 {
  94.       height: 30px;
  95.       line-height: 30px;
  96.       font-family: "微软雅黑";
  97.       font-size: 18px;
  98.       font-weight: normal;
  99.     }
  101.     .boss p {
  102.       font-style: italic;
  103.       line-height: 26px;
  104.       font-size: 14px;
  105.     }
  106.   </style>

2.3 效果图

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

标签： 前端 html5 css3
本文转载自: https://blog.csdn.net/Brant_zero/article/details/124677328
版权归原作者 Brant_zero2022 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【Web前端】彼岸の花——网上花店(网页制作)”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？