零基础学习网页制作（五）

郑重声明：
1.所谓的零基础并不是真的零基础，首先你会用电脑的一些简单操作，如：新建一个文本文档(txt)；
2.文章仅供本人娱乐，如有雷同，纯属巧合；
3.文章的目的还有一个，告诉一些不懂写代码的人，写代码没那么神奇，告诉那些了解一点点代码的人，写代码没那么容易；

五、如何定位一个元素的位置(一)
1)描述
这边可以认为是一条公路上有茫茫多的汽车,每个汽车在公路中之间的距离控制以及每辆车中人与货物中的位置
2)引入
引入了width,height可以使用百分之多少的形式来代替
margin-left代表一辆车左后视镜与左边车辆右后视镜的距离
而margin-top代表一辆车车头与前方车车尾的距离
padding-left代表坐在车里的人距离车厢左边的距离
padding-top代表坐在车里的人距离车前方挡风玻璃的距离

代码示例如下:

<html><head><meta charset="utf-8"><title>第五章</title></head><!-- 注释可以写在页面的任何地方,body里面的元素包含body都可以添加样式style--><!-- 可以使用像素px表示宽度,高度,字体大小,宽度和高度也可以使用百分之多少来代替,百分数是针对于它的父级标签,而呈现中body可以认为是最父级标签所以body的百分比是针对于整个屏幕当前可见区域拖动,缩放暂时除外--><!-- 下方代表最大父级body,宽度和高度等于当前浏览器可见区域背景色为金色另外每一个div框结束的时候默认是表示可以换行的--><body style="width: 100%;height: 100%;background: gold;" ><!-- 先定义一个具有背景色框背景色为红色,我们控制它在浏览器中的位置--><!-- 下方引入到了margin-left表示div元素外边框距左边临近元素这里代表body的距离margin-top表示div元素外边框距临近元素上边边框的距离;这个div上方没有其他元素所以就是距离body的上方边框距离--><div style="background: red;width: 100px;height:100px;margin-left: 100px;margin-top: 20px;" >我居左边100像素,居上面100像素</div><!-- 下方的div当做是上方div的参照物margin-left表示div元素外边框距左边临近元素这里代表body的距离margin-top表示div元素外边框距临近元素上边边框的距离;这里表示居上方div下边框的距离--><div style="background: red;width: 100px;height: 100px;margin-left: 300px;margin-top: 50px;" >我居左边300像素,居上面50像素</div><!-- 下方引入了两个新的属性padding-left表示div里面的内容距div内边框左边的距离padding-top表示div里面的内容距div内边框上方的距离--><div style="margin-top:200px;background: green;width: 50px;height: 50px;margin-left: 10px;padding-left: 10px;padding-top: 20px;" >我在div的位置</div><!-- 下方div作为上方div的参照 --><div style="margin-top:20px;background: green;width: 50px;height: 50px;margin-left: 20px;padding-left: 20px;padding-top: 40px;" >我在div的位置</div></body>
</html>

绿色边框距离橘色内边框左边的距离表示padding-left,
padding-top同理
3)预览效果如下

零基础学习网页制作（五）相关推荐

零基础学习网页制作需要注意的问题集锦
一.外观 1 不要先决定网页的外观,然后强迫自已去适应它,应该从你的访客对像,你要传达的讯息以及你的制网目标推导出一个最适合的网页架构. 2 每页排版不要太疏或用太大的字,尽量避免看你的网页时需要作 ...
零基础学习网页制作（一）
郑重声明: 1.所谓的零基础并不是真的零基础,首先你会用电脑的一些简单操作,如:新建一个文本文档(txt): 2.文章仅供本人娱乐,如有雷同,纯属巧合: 3.文章的目的还有一个,告诉一些不懂写代码的人 ...
第一个HTML页面如何写？—零基础自学网页制作
把txt文件变成html网页文件请按照其中说明创建一个txt文件.具体过程如下: step1:在您方便的磁盘中建立一个文件夹,命名为"零基础自学网页制作".例如我在D盘中建立了& ...
html带颜色表格怎么做,使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作...
行颜色设置的简便方法使用HTML添加表格4(行颜色与表格嵌套)--零基础自学网页制作昨天我们在<使用HTML添加表格3(间距与颜色)--零基础自学网页制作>(目录在结尾)中学习了设置单 ...
iframe嵌入页面白屏_封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
在页面中嵌入PDF文件在上一篇<在html页面中嵌入其他页面的方法--零基础自学网页制作>(结尾见目录)中我们学习了如何在页面中嵌入其他页面的操作.今天我们来嵌入一个pdf文件. 其实使 ...
el-table 行背景颜色_使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
行颜色设置的简便方法昨天我们在<使用HTML添加表格3(间距与颜色)--零基础自学网页制作>(目录在结尾)中学习了设置单元格以及其中内容的空间间距和背景颜色. 其中添加列向单元格背景颜色 ...
HTML元素中的属性2（路径详解）—零基础自学网页制作
相对路径与绝对路径的使用方法在<HTML元素中的属性1-零基础自学网页制作>这一篇教程最后内容中,我们详细展示了"绝对路径"与"相对路径"在写法上 ...
html表格内图片填充颜色设置,使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作...
行颜色设置的简便方法昨天我们在<使用HTML添加表格3(间距与颜色)--零基础自学网页制作>中学习了设置单元格以及其中内容的空间间距和背景颜色. 其中添加列向单元格背景颜色只需要修改对应 ...
音视频格式转换神器与html视频元素加字幕—零基础自学网页制作
音视频格式转换神器--格式工厂如果您下载了上一篇<为HTML页面添加音频.视频的方法--零基础自学网页制作>(目录在结尾)中的素材,您会看到有这样一个文件,如图因为格式工厂是免费软件, ...

零基础学习网页制作（五）

代码示例如下:

零基础学习网页制作（五）相关推荐

最新文章

热门文章