css定义坐标

html-css030

css定义坐标,第1张

这是用html和css写出的页面

怎么才能达到这种效果

先看源码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<link rel="stylesheet" href="css/index.css" />

<title></title>

</head>

<body>

<div>

<h1>春</h1>

<p>盼望着，盼望着，东风来了，春天的脚步近了，一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。

小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回

迷藏。风轻悄悄的，草绵软软的。</p>

<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已

经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，

像眼睛，像星星，还眨呀眨的。</p>

</div>

</body>

</html>

div{

height: 600pxwidth: 416px  /*定义盒子高度和宽度*/

border: solid 1px red      /*border-width, border-style,和border-color.*/

padding: 115px 4em 0

/*为了避免背景图像重复平铺到边框区域，应禁止他平铺*/

background: url(../img/p3.jpg) no-repeat

/*设计背景图像的定位坐标点为元素边框上的左上角*/

background-origin: border-box          /*相对位置*/

background-size: cover

overflow: hidden  /*overflow属性指定如果内容溢出一个元素的框，会发生什么。*/

/*visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden           内容会被修剪，并且其余内容是不可见的。

scroll           内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto           如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。*/

}

/*定义标题*/

div h1{

font-size: 18pxfont-family: "幼圆"

text-align: center

}

/*定义文章*/

div p{

text-indent: 2em/*text-indent 属性规定文本块中首行文本的缩进*/

line-height: 2em/*行高*/

font-family: "楷体"

margin-bottom: 2em

}

后面的细节慢慢挑出来演示一下。

css中的绝对定位，意思就是把元素的左上角固定到浏览器窗口的某个指定的唯一的坐标点上。

css中的相对定位，意思是是相对于上一个相对定位的，总是相对于前面的同级标签为基准标签。

不管是什么定位都需要有一个参照物。相对定位的参照物是本身。绝对定位的参照物就是父级元素。两种定位产生的影响也不同。相对定位，设置后，原来的位置始终保留着。绝对定位，设置后，原来的位置会被后面的内容占据。