网页设计作业

目录

《花之语》作业一

效果展示:

代码如下:

背景颜色:

居中:

去掉下划线:

添加下划线:

字体颜色:

图片靠左:

水平线:

无序列表:

有序列表:

 a标签:

 img标签:

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

效果展示:

代码如下:

 框:


《花之语》作业一

效果展示:

代码如下:

<!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>

        <li>内容</li>

        <li>内容</li>

</ul>

有序列表:

<ol>

        <li>内容</li>

        <li>内容</li>

</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;
}

 框:

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

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

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

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

  • 8
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

袁百万

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值