html怎么实现这样的框架 用css div

html-css026

html怎么实现这样的框架 用css div,第1张

首先，您需要创建一个div,对div进行添加一个class。我们利用CSS通过class来设置div的边框。创建一个用于设置边框的CSS文件，对于您实际开发中，将边框添加到您的CSS文件中即可。在CSS文件中设置DIV的边框，首先我们可以先给div一个宽度与高度。得到了宽度与高度后，如果我们没有边框，是看不到样式的。如果您的div中有内容，那么只是显示那些内容而已。接下来，添加一个border边框我们将边框设置为1px.如果只是设置了宽度而没有设置颜色与具体的显示样式的话，边框并不会显示，您现在可以刷新一下您的页面看一下，添加了border:1px后是否显示，答案是肯定不显示的，因为我们参数没有写完整。参加第二个参数颜色值，具体的颜色您可以百度搜索具体的样式值的代码，您可以使用基本色直接使用单词拼写也是可以的。最后一个参数是显示样式，您可以选择不同的样式来进行显示，我们这里使用的是实线的方式来实现。如果您使用的是一些专门用来做前端开发的软件，您输入后，会有一些提示，您如果选择不同样式来试一试看。添加了上述的三个属性后，您的div边框即可显示出来了。您可以根据您的需求，对边框做其他操作。

先在<head>标签里写几个CSS

<style

type="text/css">

.blue{

background-color:Blue

}

.yellow{

background-color:Yellow

}

</style>

还想要什么颜色自己再写就行了，然后哪个<div>里想要什么颜色，将<div>的class属性设成对应的CSS名称就行了。例如<div

class="blue">这个<div>背景就是蓝的，这样写方便以后再修改，不必修改每一个<div>，只需要修改<style>里定义的代码就行了

虽然没有图，但我想你要的效果应该是这样，运行一下代码吧：

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>example</title>

<style type="text/css">

<!--

body{ font-size:12pxtext-align:center}

.page{ margin:0 autowidth:1000px}

.div1{ background:#bbbheight:100pxwidth:100%}

.div2{ background:#dddheight:100pxwidth:100%}

.div3{ background:#cccfloat:leftheight:500pxwidth:100px}

.div4{ background:#eeefloat:leftheight:500pxwidth:900px}

-->

</style>

</head>

<body>

<div class="page">

<div class="div1">div1</div>

<div class="div2">div2</div>

<div class="div3">div3</div>

<div class="div4">div4</div>

</div>

</body>

</html>