首先,我们还是先来了解下一些今天所讲到底css属性。
CSS 布局 :overflow 、 CSS float(浮动)
第一 、CSS overflow 属性用于控制内容溢出元素框时显示的方式。,如:
<head>
<meta charset="UTF-8">
<style>
#overflowtest
{color: honeydew;
background: green;
width: 400px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
overflow: scroll;
}
</style>
</head>
<body>
<h2>练习</h2>
<div id="overflowtest">
<p>assfdsvsd</p>
<p>sdgf</p>
<p>dfbgdfbg</p>
<p>sdfgsgs</p>
<p>sgdfgsdfg</p>
</div>
</body>
运行结果:
当然,我们要设置显示框的大小和背景等都可以在 head 里的 style 里面设置
第二 、float(浮动,通俗说就是用于将某个东西的位置改变),往往是用于图像,但它在布局时一样非常有用。如:
<head>
<meta charset="UTF-8">
<style>
img
{
float:right;
}
</style>
</head>
<body>
<img src="../博客资料/a1.gif"/>
<img src="../博客资料/a2.png"/>
<img src="../博客资料/a3.gif"/>
</body>
注意,这里的图像路径最好写相对路径
运行结果:
同样的,我们也可以在head 里的 style 里面设置图片的相关性质
并且也可以以命名的方式来方便我们控制
<style>
img
{
float:right;
}
.a1
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.a2
{
float:left;
width:60px;
height:45px;
margin:5px;
}
</style>
</head>
<body>
<img class="a1" src="../博客资料/a1.gif"/>
<img class="a2" src="../博客资料/a2.png"/>
<img class="a1" src="../博客资料/a3.gif"/>
</body>
</html>
结果如:
That’s the end of,Thanks!