品优购项目总结

MoYuP_ENG

已于 2022-03-17 16:02:58 修改

阅读量709

点赞数 1

文章标签： python 开发语言

于 2022-03-17 15:59:02 首次发布

本文链接：https://blog.csdn.net/MoYuP_ENG/article/details/123542190

版权

文章目录

前言

历时一个多星期终于将这个项目给做完了，这个过程是枯燥的、也是充满乐趣的。枯燥是对代码构建的繁杂性，乐趣是一个个困难的克服和一个个模块的实现，所以现在就我的开发过程做一点点总结。

一、整体布局

拿到psd效果图后，不要直接上手写，要先分析页面构成，在脑海中有一定的总体结构，然后开始构建总体结构，给每一个模块不同的背景颜色，区分每一个模块，便以给每一个模块添加内容时更容易区分，清晰简洁的内容块和步骤，能让我们的开发过程更加的方便和快捷。如果不做总体规划很容易越做越迷糊，不知道该怎么下手。

二、开发过程中用到的技巧、方法

1.子绝父相是常用的一个定位方式

即子元素用绝对定位，而父元素使用相对定位。这一方法也是由他们的定义决定的。

绝对定位：不保留原来的位置（脱标），可以覆盖其他元素，以最近的有定位的父元素（都没有定位时以浏览器）为参照

相对定位：保留原来的位置（不脱标），以自己原来的位置为参照

这一语义就决定了他们的使用方法，如果光给子元素加绝对定位的话，位置不好定，还容易出问题。

2.俩个盒子中的竖线丨

两个盒子中的竖线可以在两盒子中间放一个不设置宽高的空盒子，通过设padding的上下值来控制竖线的高度，然后通过两个盒子将其挤压成一条竖线

实例代码如下：

/* sk是秒杀图片的盒子 */
.sk {
    position: absolute;
    top: 10px;
    left: 200px;
}
/* 竖线空盒子 */
.sk::before {
    content: "";
    border: 1px solid #c81523;
    padding: 5px 0;
    margin-right: 20px;
}

效果图：

3、常用样式放入公共样式表base.css

①、清除所有标签的内外边距及盒子模型

* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}

②、去除em、i标签的倾斜（可以用em、i标签做文本标签，减少类名）

em,
i {
    font-style: normal
}

③、去掉li前面的圆点（无序列表是常用的一种布局标签）

li {
    list-style: none
}

④、通过图片的对齐，取消图片底部的空白（将图片转化为块级元素也能解决空白问题）

img {
    border: 0;
    vertical-align: middle
}

⑤、CSS3 抗锯齿形让文字显示的更加清晰

body {
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

⑥、清除浮动（调用的时候，直接在类名后面空格+clearfix就可以，不用再在样式里用overflow：hidden；）

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}
.clearfix {
    *zoom: 1
}

4、在同一个盒子里元素过多且都要设置样式的时候最好给要设置相同样式的元素给相同的标签，不同样式用不同的标签，如：em、i、p、span、label等双标签，这样比较容易布局，也不太需要考虑继承性和权重问题。但还是要考虑标签的语义是否适合，比如p标签就有一些特殊的语义。

5、类名的使用也十分重要，建议多使用类名，方便样式的选择

同一标签下放同一标签，不给类名的话，容易两个都选中。

如：

    <ul>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>

这种情况想用结构伪类选择器选中第二个li里面的第一个小li，能够选中也能修改样式，但是第一个父元素li的样式也被修改了。如果将第一层的li加上类名，或者都加上类名就更好选中，更方便了，或者将第一层的li改用为div也可以，使用合理的使用标签也能使布局更加方便。

6、三角的制作

这也是常用的一种技巧，通常用来构建对话框等特殊效果

用一个没有宽高的空盒子，给每一条边不同的颜色，统一的宽度和style。

    <style>
        div {
            border-color: black blue brown burlywood;
            border-width: 50px;
            border-style: solid;
            width: 0;
        }
    </style>

结果如下：

想要哪一个三角，就将其他的颜色设置为transparent（透明）就能够得到一个三角形。

三、开发过程中遇到的问题

1、复选框和后面的文字无法对齐

解决方法：

①、给复选框和后面的文字同时加上vertical-align:middle;的对齐方式

②、给复选框该为块元素并添加浮动（记得清除浮动）

2、让盒子中的盒子随着盒子的长度自动调整字的间距

解决方法：

盒子要给定宽度,justify是将文本两端对齐，而text-align-last是文本最后一行的对齐方式，光给text-align：justify对于单行元素是达不到想要的效果的。

代码如下：

span {
    width: 50px;
    text-align: justify;
    text-align-last: justify;
}

还有一种方法就是单行不行就弄多行，在想要对齐的标签后面加伪元素就可以了。

代码如下：

span {
    text-align: justify;
}
span::after {
    content: "";
    width: 100%;
    height: 0;
    display: inline-block;
    display: none;
}

两种方法的效果都如下：

3、外边距塌陷

有三种情况：

①、当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          .box1 {
     width: 150px;
     height: 100px;
     margin-bottom: 20px;
     background-color: rgb(201, 239, 98);
  }
  .box2 {
     width: 100px;
     height: 100px;
     background-color: rebeccapurple;
     margin-top: 10px;
  }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>
</html>

这时两个盒子之间的间距不是30px，而是20px；即盒子1的外边距

解决方法就是尽量只给一个盒子加外边距

②、对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          .box1 {
     width: 150px;
     height: 100px;
     margin-top: 20px;
     background-color: rgb(201, 239, 98);
  }
  .box2 {
     width: 100px;
     height: 100px;
     background-color: rebeccapurple;
     margin-top: 10px;
  }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

这时候两个盒子会发生合并，上外边距为20px，即盒子1的上边距，即使给盒子而较大的外边距，也不能使盒子1盒子2分开，都是一起移动。

解决办法：

给父元素定义上边框

给父元素定义上内边距

给父元素添加 overflow：hidden；

给子元素添加浮动

给子元素添加绝对定位

3、如果存在一个空的块级元素，border、padding、inline content（行内内容）、height、min-height（指定的最小高度）都不存在，那么上下边距中间将没有任何阻隔，上下外边距将会合并。

<body>
    <p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
    <div style="margin-top: 20px; margin-bottom: 20px;"></div>
    <p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
</body>

这个时候中间div宽度为0且上下边距融合，只取margin的最大值。

MoYuP_ENG

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
品优购项目总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言历时一个多星期终于将这个项目给做完了，这个过程是枯燥的、也是充满乐趣的。枯燥是对代码构建的繁杂性，乐趣是一个个困难的克服和一个个模块的实现，所以现在就我的开发过程做一点点总结。一、整体布局拿到psd效果图后，不要直接上手写，要先分析页面构成，在脑海中有一定的总体结构，然后开始构建总体结构，给每一...
复制链接

扫一扫