【HTML&CSS】静态页面布局（二）

最新推荐文章于 2022-02-20 16:09:13 发布

Lxq~

最新推荐文章于 2022-02-20 16:09:13 发布

阅读量2.4k

点赞数 4

本文链接：https://blog.csdn.net/qq_42872073/article/details/84341721

版权

京东首页（静态页面布局）

☆设计思想

在制作网页时，一般都是从上到下，从左到右设计，刚开始时先看网页整体的布局，将网页分成若干个块，然后从上到下、从左到右依次分析每个块里面的子块。
每个块的布局要从外向里分析，实质上也就是盒子套盒子（个人比较喜欢用div布局）。例如：
在刚开始学习网页设计的时候，可以每次布局完成之后先给相应的块加边框或者背景测试，这样可以避免不必要的错误，当然也可以大大减少查错改错的时间。

☆网页设计中应该注意的问题

到底该使用绝对定位还是相对定位的问题
       刚开始学习网页布局的时候老是在纠结到底该用绝对定位还是相对定位，这个问题困扰了我很久，当我做了两天多的京东静态网页之后，才慢慢的不再纠结了。
       相对定位和绝对定位什么时候都可以用，没有什么规定，哪个方便用哪个，那到底什么时候算是方便相对定位，又什么时候方便绝对定位呢？
       若元素不能显示到我们想要它在的位置，这时候就可以用position属性了。一定要记得绝对定位不占位置，而相对定位是占位置的。当其父元素是相对定位的，而我们想要此元素在父元素的内部或者距离父元素很近的位置，这时候就可以使用绝对定位来对这个元素进行操作，当然也可以用相对定位（相对于此元素本身的位置进行left,right,top,bottom值的设置。若相对于此元素本身的位置进行向上移动，或者向左移动，这时top或者left的值必须是负值）。
导入文件的路径问题
我们知道，无论是导入图片、链接还是CSS样式，都存在导入路径的问题。路径分为相对路径、绝对路径和远程路径，我们一般都使用的是相对路径。主要是有时候分不清./、 …/、/的区别。下面进行说明。

<!--一个.表示向上一级，一个/表示向下走一级-->
./     <!--当前目录-->
../    <!--父级目录-->
/      <!--根目录-->

举例说明：
在这里插入图片描述如果两个文件在同一级则引用为直接写文件名或者./文件名/

CSS中定位和浮动的用法和区别
浮动可以自动排列自动折行，其默认是左上角或者右上角，但是它的下一个元素会受到它浮动的影响，因此，浮动经常需要clear的配合来清除浮动。有些时候display:inline-block可以替代flot实现相同的效果（但不脱离文档流）。
position:absolute会导致元素脱离文档流，被绝对定位的元素在文档中不占据任何位置。flot也会导致元素脱离文档流，但是与绝对定位不同的是它还在文档或者容器中占据位置。
解决给子元素设置边距，父元素会跟着子元素移动的问题

将子元素设置转换成行级块元素（display:inline-block）即可。

将多个并列的行级元素转换成inline-block后，每两个行级块之间会有默认宽的间隔，可以通过flot消除间距。例如：
加flot之前

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .demo{
            height: 100px;
        }
        .span1{
            display: inline-block;
            /*float: left;*/
            height: 100px;
            width: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="demo">
        <span class="span1"></span>
        <span class="span1" style="background-color: blue"></span>
        <span class="span1"></span>
    </div>
</body>
</html>

结果：
在这里插入图片描述
设置flot属性后：