是看视频有感的，也是记录一下，这些很奇特的技巧
“权重”问题
之前敲代码的时候没有关注这个事情，比方说一个div有个class为nav，然后里面又套了个class为content的控件，然后又套了个class为inner的控件，然后".nav .content .inner"打这么一长串意图不明的CSS设置(要是为了设置定位倒也能理解)，但今天明白了，就是设置“权重”，比方说有个控件我想设置padding为20px，刷新之后，发现根本就没有实现效果，就可以考虑是不是这个问题了，我这里的例子如图：
例图.png
在左边和右边的控件都有一个小三角，我给他的定义是
/*左边控件*/
<i class="a"><s><s><i>
/*右边控件*/
<i class="b"><s><s><i>
要是单纯设置这个class，然后设置它们的内边距或者外边距，会发现没有效果，通过审查元素发现，不知为啥，设置的内容被“划掉”了，分析过后才发现这就是“权重”问题，如果不像“.xxx .xxx .xxx”设置那么长一串的话，可能会被判定无效
并列样式
也是针对这一张图，两边都想设置一样的，不想写重复代码，又方便管理，怎么办？可以考略并列样式，就好比一个样式，可以多个类使用，
.shortcut .dt,
.fr li.fore
{
/*设置右左(按照“上右下左”的格式)两个内边距，因为点击上去的时候左右有空隙*/
padding: 0 25px 0 10px;
position: relative;
}
.dt i,
.fore i
{
/*400是font-weight,是加粗的程度 bold是700的参数，这里是用数字写了*/
/*15px/15px 字体大小/行高 */
font: 400 15px/15px "宋体";
/*设置定位*/
position: absolute;
right: 7px;
top: 13px;
/*只需要“菱形”的一半高度即可*/
height: 7px;
/*超出的部分都隐藏*/
overflow: hidden;
/*如果运行之后没有看见小三角那设置宽度*/
width: 15px;
}
.dt i s,
.fore i s
{
/*设置为绝对定位*/
position: absolute;
top: -8px;
left: 0;
}
虚线模式
/*顶部是“点式”虚线*/
border-top:1px dotted #E4E4E4;
/*底部是下滑线虚线)*/
border-bottom: 1px dashed #E4E4E4;
一列四个盒子的设计模式
如图
需求.png
思路:在生活服务里一行里有四个盒子的思路:1.由于要有线,肯定是要有border的,此时肯定248px宽度肯定不够
所以可以让顶部和左边都移动一个px间距,也就是-1px来调试2.此时一行还是只有三个盒子,那可以考虑是宽度问题
那可以在限定宽度的基础上,再找一个盒子或者控件,来重新设置一下宽度,然后把超出的部分减掉即可
这里由于父盒子news限定了248px的宽,所以可以在li的父亲,也就是ul就可以把宽度拉长,然后在ul的父盒子把拉长
之后超出的部分减掉,即可完成一行四个盒子的需求
实现功能的代码(.html文件就是ul和12个li就不多写了，只是解释一下需要用到的"盒子")
1.leftservice:整个生活服务模块的盒子
2.dt：生活服务标题那一列位置的盒子
3.dd：包裹ul和li的盒子
4.news包裹着lifeservice的父盒子,它是参考后续布局的重要输出
实现:
.news{
width: 248px;
height: 451px;
border:1px solid #E4E4E4;
/*设置右浮动*/
float: right;
margin-top:12px;
}
.lifeservice{
height: 251px;
width: 248px;
overflow: hidden;
}
/*修复针对如果顶部没有虚线的处理方式*/
.lifeservice .dd{
border-top:1px dotted #E4E4E4;
overflow: hidden;
height: 251px;
}
.lifeservice .dd ul{
/*要想一行四个盒子的必要步骤，“盒子”里的“盒子”要变“宽”*/
width: 253px;
}
.lifeservice .dd ul li{
/*经过fireworks测量，宽度就是这么多*/
width: 62px;
height: 70px;
border:1px solid #E4E4E4;
/*左浮动,让li顺序排布*/
float: left;
/*设计间距，让边线看上去“更清晰”，让需求更贴近*/
margin:-1px 0 0 -1px;
}
封装class类（针对浏览器适配问题的)
//进一步封装自己的类名 -- 如果classname上面包裹了一个id为xxx的盒子时
function improvedGetClassName(classname,id){
//也判定支持和不支持的条件
if (document.getElementsByClassName){
//有id的情况
if (id){
var eleId = document.getElementById(id);
return eleId.getElementsByClassName(classname);
}else{//没有id的情况
return document.getElementsByClassName(classname);
}
}
//不支持的情况
if (id)
{
var eleId = document.getElementById(id);
//有id的话,就获得id下面所有标签的元素
var dom = eleId.getElementsByTagName("*");
}else{
var dom = document.getElementsByTagName("*");
}
var arr = [];
for(var i=0;i<dom.length;i++){
//分隔数组
var textArr = dom[i].className.split(" ");
for(var j=0;j<textArr.length;j++){
if(textArr[j] == classname){
arr.push(dom[i]);
}
}
}
return arr;
}
网友评论