加载中…
个人资料
箜房子
箜房子
  • 博客等级:
  • 博客积分:0
  • 博客访问:127,946
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
好友
加载中…
友情链接

eale·右视觉

摄影大师

Elle'sblog

网页设计是一家

好好

好好

访客
加载中…
博文

内容器400px;让其在页面居中,以下设置:关键在与margin-left: -负总宽度除以2;

position: absolute;

width: 400px;

left:50%;

margin-left: -200px;   (这是关键,总宽度400px/2 )​



阅读  ┆ 转载 ┆ 收藏 

@mixin widths-item($width) {
.w#{$width} { width: 1px * $width; }
input.w#{$width}, textarea.w#{$width} { width: 1px * $width - 22; }
.select-group.w#{$width} { width: 1px * $width - 2; }
}

@include widths-item
(90);
@include widths-item
(100);
@include widths-item
(140);
@include widths-item
(200);
@include widths-item
(245);
@include widths-item
(300);

.W# 其实这里的# 取的是($width)这个变量的值。
所以@include widths

阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
(2016-03-24 16:50)
分类: web标准
  这个功能特别适合批量样式,比如产品列表。
a1 a2
a3 a4
a5 a6
以上排列,a1右边margin:10px, 但是a2 a4不需要margin,就可以针对的写:
first-child{ 2n}
name:first-child{ } 针对第一行
name:last-child{ } 针对最后一行

name:nth-child{2n}
name:nth
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
分类: web标准
class name: 不管css样式写的顺序,Html调用的顺序会影响。列如:
.css1{margin-right:2px}
.css2{margin-right:0}

div='class2 class1'
最后系统会读取css2的样式。因为css2 在html内优先调用

@media(width:1280px){}
如果做响应式页面,一定要把media放在最后面。这样才能优先读取。

.div-wrap{
  ul{
    li{margin-right:20px;}
    li.ss{margin-right:0;}
  }
}
给所有的li定义了右边距,当需要其中一个li右边距的样式不同时,一定要这样写li.ss{} 才能优先


以下列子,都是定义在div-wrap里面的div-list样式,第一个的优先级高,因为指定更明显。
.div-wrap .div-content  .div-list{margin-right:20px;}  这个优先级高,因为它把指定更明显。
                 .div-content  .div-list{margin-right:0;}
 
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
分类: web标准

给自己的笔记,不要忘了这个属性

如果给input定义宽度,300px,  但是它的border:1px; 那么占用了左右2px,  再给它padding​:10px; 那么左右再占20px,  最后这个input只能设置宽为300-2-20=278px。
box-sizing:​border-box;这些padding,margin,border都包括在容器里,宽度设300px它就是300px.

特别适用以下列子:​

左右两个div要并排显示,那么各占50%;当给div设置了padding, border,这些属性时,这个50%的比例就会掉下来,因为padding, border,会占宽度。so: 必须添加box-sizing:​border-box;

​div {
width:50%; float:left;padding:10px border:1px; box-sizing:​border-box;
}

阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
分类: web标准

新手时经常犯傻,对这种有边框的Li 会设置 border-left (or right)边线为0来解决,然后在最后或第一个Li 上把边框补回来​​

其实方法很简单,只要在Li 设置一个margin-left:-1px  用负1来解决就OK了。​


li{ border:1px solid #333; margin-left:-1px }


阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

健康

分类: web标准
背景色渐变的方法:
.add-to-cart-button{padding:5px 10px;cursor:pointer;background:#7DB72F;background:-webkit-gradient(linear,left top,left bottom,from(#7DB72F),to(#4E7D0E));background:-moz-linear-gradient(top,#7DB72F,#4E7D0E);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7DB72F',endColorstr='#4E7D0E');color:#fff;text-shadow:none;border-color:#999;border:0 none;font-weight:700;font-size:1.3em;margin-top:-5px;margin-left:35px;}

圆角的方法:
header-menu{background:none repeat scroll 0 0 #404040;border-radius:4px;-o-border-radius:4px;-icab-border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;height:auto;list-style:none outside none;margin:10px auto 0;padding:0 10px;}*/

div的外框阴影:
.master-wrapper-page{margin:30px auto 0;margin:0 auto 0;width:960px;background:none repeat scroll 0 0 #FFF;box-shadow:0 0.5em 2em rgba(0,0,0,0.1);-moz-box-shadow:0 0.5e
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

it

分类: web标准

屏幕宽度为940px,希望图片列表能够全屏显示。

图片列表用ul li排列,li之间的间距为margin-right:20px,图片加外框宽度为300px,这样的后果是最终右边多20px空白。整个列表不居中。我以前的处理方法是:margin左右各为10px。这样就不够灵活,虽然居中但左右各留白了10px,无法整屏幕显示。请看下图:

111

阅读  ┆ 评论  ┆ 转载 ┆ 收藏 

1.  background-attachment:fixed  固定背景图片不动,不会因为滚动条下来而滚动。

 

2.  经常用到background-image,因为有PS,都会把图片的尺寸跟容器的尺寸P成一样的。无需修改,所以很多background 的CSS设置都遗忘了。

background-size:cover;背景铺满容器
等比调整背景图片的宽度或高度(较小者),以铺满整个容器,保持背景图片的宽高比。

 

阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
标签:

it

分类: web标准
对于追未完美的设计师来说,这是不美观的。网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美。


下面是我找到的一个比较完美的方法,来自国外的
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
  

新浪BLOG意见反馈留言板 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

新浪公司 版权所有