前端学习(三)

这里写图片描述

我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .body{
        width:1344px;
        height: 510px;
        border: 1px solid;
        margin: 0 auto;
    }
    .main{
        height: 470px;
        position: relative;
        margin:20px 20px 20px 20px;
        border: 1px solid #999;
        background-color: #eee;
    }
    .left{
        width: 200px;
        height: 80px;
        background-color: white;
        border: 1px solid #999;
        float: left;
        margin:20px;
        padding: 20px;
    }
    .ima{
        width: 80px;
        height:80px;
        float: left;
        padding-right: 20px
    }
    .img{
        width: 80px;
        height: 80px;
        padding: 20px 20px 0px 20px;
    }
    .center{
        margin: 20px 160px 0px 280px;
        padding: 20px;
        border: 1px solid #999;
        background-color: white;
    }
    .right{
        width: 120px;
        height: 430px;
        background-color: white;
        border: 1px solid #999;
        position: absolute;
        top:20px;
        right:20px;
    }
    </style>
</head>
<body>
    <div class="body">
        <div class="main">
            <div class="left">
                <image class="ima" src="C:\Users\Public\Pictures\Sample Pictures\1.jpg"></image>
                <span>八仙花qqqq</span>
            </div>  
            <div class="center">
                <p>八仙花</p>
                <p>八仙花(学名:Hydrangea macrophylla)又名绣球、紫阳花,为虎耳草科八仙花属植物。八仙花花洁白丰满,大而美丽,其花色能红能蓝,令人悦目怡神,是常见的盆栽观赏花木。中国栽培八仙花的时间较早,在明、清时代建造的江南园林中都栽有八仙花。20世纪初建设的公园也离不开八仙花的配植。现代公园和风景区都以成片栽植,形成景观。</p>
                <p>八仙花为落叶灌木,小枝粗壮,皮孔明显。叶大而稍厚,对生,倒卵形,边缘有粗锯齿,叶面鲜绿色,叶背黄绿色,叶柄粗壮。</p>
                <p>花大型,由许多不孕花组成顶生伞房花序。花色多变,初时白色,渐转蓝色或粉红色。高1-4米;茎常于基部发出多数放射枝而形成一圆形灌丛;枝圆柱形,粗壮,无毛,具少数长形皮孔。叶纸质或近革质,近圆形或阔卵形,长1.4-2.4厘米,宽1-2.4厘米,粉红色、淡蓝色或白色;孕性花极少数,具2-4毫米长的花梗;萼筒倒圆锥状,长1.5-2毫米,与花梗疏被卷曲短柔毛,萼齿卵状三角形,长约1毫米;花瓣长圆形,长3-3.5毫米;雄蕊10枚,近等长,不突出或稍突出,花药长圆形,长约1毫米;子房大半下位,花柱3,结果时长约1.5毫米,柱头稍扩大,半环状。
                蒴果未成熟,长陀螺状,连花柱长约4.5毫米,顶端突出部分长约1毫米,约等于蒴果长度的1/3;种子未熟。花期6-8月</p>
            </div>
            <div class="right">
                <image class="img" src="C:\Users\Public\Pictures\Sample Pictures\1.jpg"></image>
                <image class="img" src="C:\Users\Public\Pictures\Sample Pictures\1.jpg"></image>
                <image class="img" src="C:\Users\Public\Pictures\Sample Pictures\1.jpg"></image>
                <image class="img" src="C:\Users\Public\Pictures\Sample Pictures\1.jpg"></image>
            </div>
        </div>
    </div>
</body>
</html>

我的效果图:
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值