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

    要求：参考教材p68~p76完成“网上花店”专题页

    目的：1、学会建立网站站点

          2、使用HTML5标签插入文本、图片

          3、使用div+css进行页面布局

          4、使用css3控制文本及图片的样式 

          5、使用注释语句对代码进行注释                       

    步骤：1、建立站点

          2、页面结构分析

          3、定义基础样式

          4、制作“标题”模块

          5、制作“分类”模块

          6、制作“热卖”模块

          7、制作“页脚”模块

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

    css外链式的位置可能不一样，更改就行//图片可以下载文件

    1. /*重置浏览器的默认样式*/
    2. *{margin: 0;padding: 0;}
    3. /*全局控制定义页面公共样式*/
    4. body{background-color: #ededed;font-family: "楷体";font-size: 16px;color: #a5a5a5;}
    5. /*控制标题模块*/
    6. .header{
    7.     width: 980px;
    8.     margin: 0 auto 7px;
    9.     height: 86px;
    10.     line-height: 86px;
    11.     text-align: center;
    12.     font-family: "微软雅黑";
    13.     color: #a5a5a5;
    14. }
    15. .header h1{font-weight: normal;}
    16. .header strong{
    17.     font-weight: normal;
    18.     font-size: 30px;
    19. }
    20. .header em{
    21.     font-style: normal;
    22.     font-size: 14px;
    23. }
    24. /*控制分类模块*/
    25. .fenlei{
    26.     width: 980px;
    27.     margin: 0 auto;
    28. }
    29. .fenlei h2{
    30.     font-size: 14px;
    31.     font-family: "微软雅黑";
    32.     color: #a5a5a5;
    33.     height: 42px;
    34.     line-height: 42px;
    35. }
    36. .fenlei p{
    37.     line-height: 30px;
    38.     text-align: center;
    39.     font-size: 18px;
    40. }
    41. /*控制热卖模块*/
    42. .bestseller{
    43.     width: 602px;
    44.     margin: 0 auto;
    45. }
    46. .bestseller .txt{
    47.     line-height: 30px;
    48.     text-indent: 2em;
    49. }
    50. .bestseller .txt em{
    51.     font-style: normal;
    52.     text-decoration: underline;
    53. }
    54. /*控制页脚模块*/
    55. .shouhou{
    56.     width: 602px;
    57.     margin: 0 auto;
    58.     text-align: center;
    59.     font-family: "微软雅黑";
    60.     font-size: 16px;
    61.     font-weight: bold;
    62. }
    63. .boss{
    64.     width: 602px;
    65.     margin: 0 auto;
    66. }
    67. .boss h3,.boss p{text-indent: 2em;}
    68. .boss h3{
    69.     height: 30px;
    70.     line-height: 30px;
    71.     font-family: "微软雅黑";
    72.     font-size: 18px;
    73.     font-weight: normal;
    74. }
    75. .boss p{
    76.     font-style: italic;
    77.     line-height: 26px;
    78.     font-size: 14px;
    79. }

     

  • 相关阅读:
    天龙八部科举答题问题和答案（全5/8）
    C++switch语句
    微信截图不能截微信界面
    R语言基于ARMA-GARCH过程的VaR拟合和预测
    永磁同步电机滞环电流控制（PI双闭环）matlab仿真模型
    【图书管理系统】附源码+教程
    Python 打印文本进度条
    TypeScript-02基础知识之函数
    css 隐藏元素的方法
    2022年NPDP考完多久出成绩？怎么查询？
  • 原文地址：https://blog.csdn.net/m0_63485942/article/details/126711499