您的位置：首页 > Web前端
前端学习（三）

2016-04-25 14:50 302 查看
我的代码：
<!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>
我的效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航