html盒子不随页面滑动

html-css06

html盒子不随页面滑动,第1张

html盒子不随页面滑动可以设置。

使用css中的flaot属性就可以了,首先打开Dreamweaver,创建html文件,然后先给页面设置背景颜色,创建段落两个段落,段落上面设置2张图片的float属性即可随页面滑动了。

所谓盒子,就是将html网页中的标签在网页版面中所占据的平面范围,抽象出来的一个视觉形状。

、首先新建一个html页面,然后在这个html代码页面创建一个<div>标签,同时给这个<div>添加一个class类为footer。

2、然后设置footer类,把div固定在底部。创建<style>标签,在该标签内设置通过position: fixedbottom:0设置footer类样式,把div固定在底部。

css样式代码:

.footer{

height: 100px

width: 100%

background-color: #ddd

position: fixed

bottom: 0

}

3、保存html代码,然后使用浏览器打开即可看到不管如何放大缩小浏览器div都是固定在底部的。

先在body中创建div(2)在 head中写入style(3)在style中写入盒子的边框宽度、线条形式、颜色(4)打开网页查看效果(5)盒子创建完成上面创建的盒子 只有一个盒子 没有宽度 没有高度下面来编辑盒子2、编辑盒子(1)添加盒子宽度打开页面查看效果刚才没编辑宽度的时候 宽度是页面的100% 现在编辑后 明显看到已经有了宽度(2)添加盒子高度打开页面查看效果这样既可以看到盒子既有宽度 又有高度3.调整盒子外部线条样式盒子线条有三个元素 按顺序分别是 宽度、样式、颜色(1)更改宽度在border后三个元素第一个元素更改由上部代码及效果 可以看出像素值越大 边框线条越宽(2)编辑线条样式solid为实线double为双实线dotted为点虚线dashed为线段虚线(3)更改线条颜色通过更改border第三个元素 更换颜色4、多个盒子进行编辑在body中创建多个div 然后进行命名(1)命名创建三个不同的盒子 为三个不同的盒子分别取名字(分别取名字,是为了分开编辑,若三个盒子一样相同效果,可不用取名字,直接创建盒子即可)(2)分别编辑在head中分别编辑