css常用tips

PC静态网页制作

版心设置

版心一般比父容器小，有固定的宽度，设置固定宽度时，在浏览器窗口发生变化时，会导致一些样式加载不成功，所以我们给版心设置宽度时，可以使用margin设置距离父容器的距离或者百分比，后面的相关属性也要设置成对应的magin或者百分比，只要左右设置的一样，版心一样居中
例如
CSS部分

.head {width:100%};
.inner-c{magin:0 60px}

HTML部分

<div class="head">
	<div class="inner-c"></div>
</div>

三角形提示信息框制作

这是小编的一些样式，可供参考。

.header-c .header-right li a span.point {
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 16.5px;
    right: -6px;
    border-width: 4px;
    border-color: transparent;
    border-right-color: #ED4462;
    border-bottom-right-radius: 1px;
    border-top-right-radius: 1px;
}

.header-c .header-right li a span.tips {
    position: absolute;
    top: 14px;
    right: -32px;
    width: 26px;
    height: 13px;
    line-height: 13px;
    background-color: #ED4462;
    color: #fff;
    border-radius: 3px 2px 2px 3px;
}

消除边框重合阴影部分

如下图所示（图片来源，拉勾招聘页面），左边盒子阴影和右边盒子阴影连接起来

• 左边目录小编用的是 <li>标签，右边是<li>的<dl>标签
• 可以给左边所选内容用div包括起来，让div和dl平级。给li加box-shadow，
  让div背景色和li一样，在用定位像右移动1px，设置div的z-index为1，让div的背景色盖住dl的。

部分代码如下

div的css如下

li和dl的css如下