css怎么让悬浮框下移

html-css023

css怎么让悬浮框下移,第1张

新建一个html文件，命名为test.html，用于讲解CSS实现文本框怎么下移。在test.html文件内，使用div标签创建一个模块，并设置div的class属性为mydiv，主要用于下面通过该class来设置css样式。在test.html文件内，在div标签内，使用input标签创建一个文本框，并设置input的id属性为myinput。在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内在css标签中，定义类名为mydiv的样式，使用border设置div的边框为1px灰色边框，使用width设置div的宽度为400px，使用height设置div的高度为200px。在浏览器中打开test.html文件，查看文本框未下移前的效果。在css标签内，定义id为myinput的样式，使用margin-top设置文本框下移20px。在浏览器打开test.html文件，查看实现的效果。

background:url(images/loginbackground.png)top no-repeat 0px 10px

等同与

background:url(images/loginbackground.png)top no-repeat

background-position: 0px 10px//水平方向(以左上角为原点，x方向)移动 0像素，垂直方向（y轴方向）即向下以动 10 像素

***注意：0px 不能省略，否则默认为x方向移动的距离。也可以设置为百分比值。

修改后：

1 方法:

①设置div1的margin-top的值为 (div的height-div1的height)/2

②设置div1的display值为 inline-block

2 代码

<html>

<head>

    <title></title>

    <style type="text/css">

        div {

            width: 700px

            height: 100px

            background-color: #93C

        }

        #div1 {

            width: 700px

            height: 40px

            background-color: #06F

            margin-top: 30px

            display: inline-block

        }

    </style>

</head>

<body>

    <div>

        <div id="div1">div1</div>

    </div>

</body>

</html>

3 显示效果如下