网页设计作业

袁百万

已于 2022-09-15 12:38:33 修改

阅读量3.8k

点赞数 8

分类专栏： HTML 文章标签： html 前端

于 2022-09-15 12:32:03 首次发布

本文链接：https://blog.csdn.net/m0_57249790/article/details/126866945

版权

HTML 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

《花之语》作业一

效果展示：

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flower</title>
    <style>
    body{
        background-color: #ffe4e6;
    }
    h1{
        color: #99344e;
        text-align:center;
    }
    a{
        color:#bf7ea7;
        text-decoration: none;
    }
    .div-a{
        
        text-align:center;
    }
    .center{
        background-color: #b3375c;
    }
    .col-y
    {
        color:yellow;
    }
    .col-w
    {
        color:#fff;
    }
    img{
        float:left;
    }
    </style>
</head>
<body>
<h1>花之语</h1>  
<div class="div-a">
<a href="">鲜花礼品</a>
<a href="">自助订花</a>
<a href="">绿色植物</a>
<a href="">花之物语</a>
<a href="">会员中心</a>
<a href="">联系我们</a>
</div>
<div class="center">
      <hr>
    <h3 class="col-w">花的语言</h3>
    <img src="img/flower1.jpg" alt="">
    <p class="col-w">花语是各国、各民族根据各种植物，尤其是花卉的特点、习性和传说典故，赋予的各种不同的人性化象征意义。是指人们用花来表达人的语言，表达人的某种感情与愿望，在一定的历史条件下逐渐约定俗成的，为一定范围人群所公认的信息交流形式。赏花要懂花语，花语构成花卉文化的核心，在花卉交流中，花语虽无声，但此时无声胜有声，其中的涵义和情感表达甚于言语。</p>
    <p class="col-w">花语是指人们用花来表达人的语言，表达人的某种感情与愿望，在一定的历史条件下逐渐约定形成的，为一定范围人群所公认的信息交流形式。赏花要懂花语，花语构成花卉文化的核心，在花卉交流中，花语虽无声，但此时无声胜有声，其中的涵义和情感表达甚于言语。不能因为想表达自己的一番心意而在未了解花语时就乱送别人鲜花，结果只会引来别人的误会。</p>
    <p class="col-y">花语最早起源于古希腊，那个时候不止是花，叶子、果树都有一定的含义。在希腊神话里记载过爱神出生时创造了玫瑰的故事，玫瑰从那个时代起就成为了爱情的代名词。花语在19世纪初 花语起源于法国，随即流行到英国与美国，是由一些作家所创造出来，主要用来出版礼物书籍，特别是提供给当时上流社会女士们休闲时翻阅之用。</p>
    <p class="col-w">真正花语盛行是在法国皇室时期，贵族们将民间对于花卉的资料整理编档，里面就包括了花语的信息，这样的信息在宫廷后期的园林建筑中得到了完美的体现。大众对于花语的接受是在19世纪中，那个时候的社会风气还不是十分开放，在大庭广众下表达爱意是难为情的事情，所以恋人间赠送的花卉就成为了爱情的信使。 </p>
    <p class="col-y">随着时代的发展，花卉成为了社交的一种赠与品，更加完善的花语代表了赠送者的意图。</p>  
</div>

<h3>鲜花导购</h3>
<ul>
<li>玫瑰花</li>
<li>郁金香</li>
<li>太阳花</li>
<li>康乃馨</li>
<li>马蹄莲</li>
<li>扶郎</li>
<li>剑兰</li>
<p>1班马文博</p>
</ul>
</body>
</html>

背景颜色：

background-color:#ffe4e6(颜色);

居中：

text-align:center;

去掉下划线：

text-decoration: none;

添加下划线：

text-decoration: underline;

字体颜色：

color: #99344e(颜色);

图片靠左：

img{
float:left;
}

水平线：

<hr>

无序列表：

<ul>

</ul>

有序列表：

<ol>

</ol>

a标签：

img标签：

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

效果展示：

代码如下：

HTML：

//HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <h1>欢迎光临我的主页</h1>


<div class="div-1">
<a href="">我的爱好|</a>
<a href="">我的家乡|</a>
<a href="">我的日志|</a>
<a href="">我的相册|</a>
<a href="">请你留言</a>
</div>


<h2>我的家乡-重庆</h2> 

<p class="p1">       
走出重庆江北机场，处于亚热带季风性湿润气候带的重庆，用她的温暖和湿润，将参加“魅力重庆网上行”采访活动的我迎入了她的怀抱。</p>

<p class="p2">
这是立体感极强的城市。从渝北区到渝中区这段车行中，汽车一直穿行在不同的坡道上。沿途所见，是应接不暇的错落景观：巍峨的高山间，拔起一座座现代楼宇；点缀其中的，是枝繁叶茂的黃桷树在迎风昂首；而不经意间，嘉陵江就映入眼帘，这条流淌千年的河流，纵流1119公里，于此注入长江。车未到目的地，我已经开始喜欢这座城市的美了。</p> 

<p class="p3">
夜幕降临的重庆城区，万家灯火与水色天光交相辉映，璨若星河。美景引人入胜，也许重庆八年来的成就，就藏在她的身后，等待我们去亲历，去发现，去体验。
</p> 
<h2>我的爱好：</h2>
<ul>
    <li>画画</li>
    <li>打篮球</li>
    <li>游泳</li>
</ul>

<h2>我的日志:</h2> 
<ol>
    <li>军训感言</li>
    <li>大学生活</li>
    <li>工作体会</li>
</ol>
<div class="div-2"><h2>我的相册:</h2>
<img src="image/img1.jpg" alt="">

<img src="image/img2.jpg" alt="">

<img src="image/img3.jpg" alt="">

<img src="image/img4.jpg" alt="">
</div>
 
</body>
</html>

CSS：

//css
h1{
background-color:orange;
text-align:center;
}
a{
    text-decoration: underline;
    color: orange;
}
.div-1{
    text-align : center;
}
.p1{
 text-decoration: underline;     
}
.p3{
 text-decoration: underline;     
}
.div-2{
    border: 1px black dotted;
}
body {
    background-color: grey;
}