用css div做两个实体小方块

html-css08

用css div做两个实体小方块,第1张

1、首先新建一个html文件,命名为test.html。

2、在test.html文件内,使用div标签一个模块,在div内,再使用div标签创建两个内部模块,下面将让两个内部div并排显示。

3、在test.html文件内,分别给每一个div设置class属性,分别为wdiv,fldiv,frdiv。

4、在css标签内,设置class为wdiv的div样式,定义其宽度为500px,高度为400px,背景颜色为灰色。

5、在css标签内,再分别设置class为fldiv和frdiv的样式,定义它们的宽度为240px,高度为350px,同时,使用float属性分别设置一个div浮动向左,另一个浮动向右,从而实现并排显示。

6、最后在浏览器打开test.html文件,查看实现的效果,就完成了。

display:inline-block //元素以行内元素呈现,内容以块元素呈现。 width:100% height:44px //宽度100%,高度44像素。 border-radius:4px //边框圆角4像素。 border:1px solid #e0e0e0 //1像素实体边框,颜色为#e0e0e0; line-height:44px //内容行高44像素,以当前样式来看,就是内容垂直居中。 color:#ffffff //字体颜色为白色。 background-color:#ff5a84 //设置元素背景颜色为#ff5a84。 -webkit-box-sizing:border-box box-sizing:border-box

//设置盒模型。为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 text-align:center //内容水平居中。 white-space:nowrap //文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 overflow:hidden //超过设定的宽高(宽100%,高44像素)的内容全部隐藏。 cursor:pointer //设置鼠标样式,当鼠标停在元素上呈现手的图标。

border:1px solid #FFF 这个就代表边框的宽度是1,是实体边框,边框的颜色是白色。 如果你想改变边框底纹,应该改变solid这个值,你在Dreamweaver会看到很多种提示