• 网页设计作业

    目录

    《花之语》作业一

    效果展示：

    代码如下：

    背景颜色：

    居中：

    去掉下划线：

    添加下划线：

    字体颜色：

    图片靠左：

    水平线：

    无序列表：

    有序列表：

     a标签：

     img标签：

     《欢迎光临我的主页》作业二

    效果展示：

    代码如下：

     框：

    《花之语》作业一

    效果展示：

    代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>flowertitle>
    6.     <style>
    7.     body{
    8.         background-color: #ffe4e6;
    9.     }
    10.     h1{
    11.         color: #99344e;
    12.         text-align:center;
    13.     }
    14.     a{
    15.         color:#bf7ea7;
    16.         text-decoration: none;
    17.     }
    18.     .div-a{
    19.         
    20.         text-align:center;
    21.     }
    22.     .center{
    23.         background-color: #b3375c;
    24.     }
    25.     .col-y
    26.     {
    27.         color:yellow;
    28.     }
    29.     .col-w
    30.     {
    31.         color:#fff;
    32.     }
    33.     img{
    34.         float:left;
    35.     }
    36.     style>
    37. head>
    38. <body>
    39. <h1>花之语h1>  
    40. <div class="div-a">
    41. <a href="">鲜花礼品a>
    42. <a href="">自助订花a>
    43. <a href="">绿色植物a>
    44. <a href="">花之物语a>
    45. <a href="">会员中心a>
    46. <a href="">联系我们a>
    47. div>
    48. <div class="center">
    49.       <hr>
    50.     <h3 class="col-w">花的语言h3>
    51.     <img src="img/flower1.jpg" alt="">
    52.     <p class="col-w">花语是各国、各民族根据各种植物，尤其是花卉的特点、习性和传说典故，赋予的各种不同的人性化象征意义。是指人们用花来表达人的语言，表达人的某种感情与愿望，在一定的历史条件下逐渐约定俗成的，为一定范围人群所公认的信息交流形式。赏花要懂花语，花语构成花卉文化的核心，在花卉交流中，花语虽无声，但此时无声胜有声，其中的涵义和情感表达甚于言语。p>
    53.     <p class="col-w">花语是指人们用花来表达人的语言，表达人的某种感情与愿望，在一定的历史条件下逐渐约定形成的，为一定范围人群所公认的信息交流形式。赏花要懂花语，花语构成花卉文化的核心，在花卉交流中，花语虽无声，但此时无声胜有声，其中的涵义和情感表达甚于言语。不能因为想表达自己的一番心意而在未了解花语时就乱送别人鲜花，结果只会引来别人的误会。p>
    54.     <p class="col-y">花语最早起源于古希腊，那个时候不止是花，叶子、果树都有一定的含义。在希腊神话里记载过爱神出生时创造了玫瑰的故事，玫瑰从那个时代起就成为了爱情的代名词。花语在19世纪初 花语起源于法国，随即流行到英国与美国，是由一些作家所创造出来，主要用来出版礼物书籍，特别是提供给当时上流社会女士们休闲时翻阅之用。p>
    55.     <p class="col-w">真正花语盛行是在法国皇室时期，贵族们将民间对于花卉的资料整理编档，里面就包括了花语的信息，这样的信息在宫廷后期的园林建筑中得到了完美的体现。大众对于花语的接受是在19世纪中，那个时候的社会风气还不是十分开放，在大庭广众下表达爱意是难为情的事情，所以恋人间赠送的花卉就成为了爱情的信使。 p>
    56.     <p class="col-y">随着时代的发展，花卉成为了社交的一种赠与品，更加完善的花语代表了赠送者的意图。p>  
    57. div>
    58.  
    59. <h3>鲜花导购h3>
    60. <ul>
    61. <li>玫瑰花li>
    62. <li>郁金香li>
    63. <li>太阳花li>
    64. <li>康乃馨li>
    65. <li>马蹄莲li>
    66. <li>扶郎li>
    67. <li>剑兰li>
    68. <p>1班马文博p>
    69. ul>
    70. body>
    71. html>

    背景颜色：

     background-color:#ffe4e6(颜色);

    居中：

    text-align:center;

    去掉下划线：

    text-decoration: none;

    添加下划线：

    text-decoration: underline;

    字体颜色：

    color: #99344e(颜色);

    图片靠左：

    img{
            float:left;
        }

    水平线：

    无序列表：

             

    • 内容

      •         

    • 内容

    有序列表：

             

    1. 内容

      2.         

    2. 内容

     a标签：

     img标签：

     《欢迎光临我的主页》作业二

    效果展示：

    代码如下：

    HTML：

    1. //HTML
    2.  
    3. html>
    4. <html lang="en">
    5. <head>
    6.     <meta charset="UTF-8">
    7.     <title>作业title>
    8.     <link rel="stylesheet" href="css/index.css">
    9. head>
    10. <body>
    11.     <h1>欢迎光临我的主页h1>
    12.  
    13.  
    14. <div class="div-1">
    15. <a href="">我的爱好|a>
    16. <a href="">我的家乡|a>
    17. <a href="">我的日志|a>
    18. <a href="">我的相册|a>
    19. <a href="">请你留言a>
    20. div>
    21.  
    22.  
    23. <h2>我的家乡-重庆h2> 
    24.  
    25. <p class="p1">       
    26. 走出重庆江北机场，处于亚热带季风性湿润气候带的重庆，用她的温暖和湿润，将参加“魅力重庆网上行”采访活动的我迎入了她的怀抱。p>
    27.  
    28. <p class="p2">
    29. 这是立体感极强的城市。从渝北区到渝中区这段车行中，汽车一直穿行在不同的坡道上。沿途所见，是应接不暇的错落景观：巍峨的高山间，拔起一座座现代楼宇；点缀其中的，是枝繁叶茂的黃桷树在迎风昂首；而不经意间，嘉陵江就映入眼帘，这条流淌千年的河流，纵流1119公里，于此注入长江。车未到目的地，我已经开始喜欢这座城市的美了。p> 
    30.  
    31. <p class="p3">
    32. 夜幕降临的重庆城区，万家灯火与水色天光交相辉映，璨若星河。美景引人入胜，也许重庆八年来的成就，就藏在她的身后，等待我们去亲历，去发现，去体验。
    33. p> 
    34. <h2>我的爱好：h2>
    35. <ul>
    36.     <li>画画li>
    37.     <li>打篮球li>
    38.     <li>游泳li>
    39. ul>
    40.  
    41. <h2>我的日志:h2> 
    42. <ol>
    43.     <li>军训感言li>
    44.     <li>大学生活li>
    45.     <li>工作体会li>
    46. ol>
    47. <div class="div-2"><h2>我的相册:h2>
    48. <img src="image/img1.jpg" alt="">
    49.  
    50. <img src="image/img2.jpg" alt="">
    51.  
    52. <img src="image/img3.jpg" alt="">
    53.  
    54. <img src="image/img4.jpg" alt="">
    55. div>
    56.  
    57. body>
    58. html>
    59.  
    60.  
    61.

    CSS：

    1. //css
    2. h1{
    3. background-color:orange;
    4. text-align:center;
    5. }
    6. a{
    7.     text-decoration: underline;
    8.     color: orange;
    9. }
    10. .div-1{
    11.     text-align : center;
    12. }
    13. .p1{
    14.  text-decoration: underline;     
    15. }
    16. .p3{
    17.  text-decoration: underline;     
    18. }
    19. .div-2{
    20.     border: 1px black dotted;
    21. }
    22. body {
    23.     background-color: grey;
    24. }

     框：

    border:1px(粗细) black(颜色) dotted(虚线);

    border:1px(粗细) black(颜色) solid(实线);

    width: 300px;(自定义宽度)

    height:400px;(自定义高度)

  • 相关阅读:
    2023黑龙江八一农垦大学计算机考研信息汇总
    信创办公–基于WPS的EXCEL最佳实践系列 （获取外部数据）
    【Node.js】第二章 fs文件系统模块
    java设计模式，简单工厂和抽象工厂有什么区别？
    INVETA peer-stream 自述文件
    keepalived安装配置（服务器主备、负载均衡）
    C++&QT day8
    JavaScript之函数、返回值、变量作用域、立即执行函数
    包管理器 npm
    Tkinter创建菜单窗口
  • 原文地址：https://blog.csdn.net/m0_57249790/article/details/126866945