用css div做两个实体小方块

html-css026

用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文件，查看实现的效果，就完成了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

html, body { height: 100%margin: 0padding: 0}

.wrap { width: 100%height: 100%}

.fixed { float: leftwidth: 200pxheight: 100%  background: #000margin-left: -100%}

.main { float: leftwidth: 100%height: 100%}

.main-inner { margin-left: 200px  background: #f00height: 100%}

</style>

</head>

<body>

<div class="wrap">

<div class="main">

<div class="main-inner">

test

</div>

</div>

<div class="fixed">a</div>

</div>

</body>

</html>

-------

html和body的高度设置为100%, 这样才能让div#wrap的高度生效.

若要将左侧高度固定,将.fixed的height设置为固定值就行了.

不能写两个

但是可以用阴影来模拟边框

div{

       width:300px

       height:300px

       box-shadow: 0 0 0 10px red,0 0 0 20px green

    }

阴影不占据空间~