cssdiv样式,cssdiv网页布局技术教程

用css div做两个实体小方块

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

相关问答

Q1: css 样式 div

style type="text/css"

#1{ width:100px;

height:100px;

float:left;

border:1px solid #00;

margin-right:20px;

}

#2{ width:200px;

height:200px;

float:left;

border:1px solid #00;

}

/style

/head

body

div id="1"/div

div id="2"/div

/body

Q2: 用css怎么设置div滚动条的样式，可改变大小的

在css样式中设置浏览器滚动条样式操作步骤如下：

1.打开软件，新建html文档，如下图红框所示为新建界面。

2.在/head和body中间书写hmtl代码，div这里面输入你想要输入的内容即可/div，如下图红框所示。

3.然后在body和/body中间书写外层轨道css代码：body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外层轨道*/} 。

这里主要是设置外层轨道的形状和颜色，根据想要设置的样式进行调节即可，如下图红框所示。

4.然后在外层轨道下面书写内层轨道css代码：body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*内层轨道*/}。

这里主要是设置内层轨道的形状和颜色，根据想要设置的样式进行调节即可，如下图红框所示。

5.以上代码代码输入完成，就可以运行看效果，效果如下红框所示，滚动条设置完成，如果不喜欢样式，回去修改代码属性即可。

Q3: 怎样定义一个DIV里的元素的CSS样式

有三种常用方式：1、通过id 例：style#test{color:red;}/stylediv id="test" test/div

2、通过类名 例：style.test{color:blue;}/stylediv class="test" test/div

3、直接放在div标签里 例：div style="color:purple" test/div

Q4: 怎么定义1个DIV的CSS样式？

两个DIV,ID分别是aa,bb，则：

div id='aa'/div

div id='bb'/div

那么分别给这两个div加上样式，可以这样写：

#aa{color:#f00;}---这个定义了id为aa的div的样式

#bb{color:#0f0;}---这个定义bb的样式

使用符号“#”则对应了div的id属性。

如果不是根据id属性来定义，例如多个div需要使用同样的样式的话，由于同一个页面id属性是唯一的，所以需要通过下面方式来定义样式：

div id='aa' class='red'红色/div

div id='bb' class='red'红色/div

div id='cc' class='blue'蓝色/div

----样式定义这样写：

.red{color:#f00;}

.blue{color:#00f;}

这里样式名称前面的符号是"."，则通过div里面的class属性来匹配样式不过，在HTML如果是这样。

div id="a"

pdfsad/p

/div

div id="b"

padasdfas/p

/div

如果要控制id为a中的p的话，可以把CSS的选择器写成

#a p{

各种样式;

}

CSS中用空格来表示是在#a当中的p