早安.晚安

新技能(二)

改变图片(图标)大小的两种方式

1.改<img>即修改HTML。

代码:

html:

  <img class="dream" src="image/4.png" />

style:

  .dream{
  width: 50px;
  height: 35px;
  }

修改html可在界面中拖动图片

2.改background(url)即修改CSS。

代码:

html:

  <div class="dream"></div>

style:

  .dream{
  height: 50px;
  width: 35px;

  background-image: url(image/4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  }

修改css不可再界面中拖动图片

  在写东西的时候最好给每一个块级元素都加上宽和高,限定一个范围,这样可以防止在这个地方换另一张图时导致图片过大影响整体布局。若不知道大小,可以用max-height,min-height,height:auto等。(宽同理)

Css min-height应用地方解释
  我们有时设置一个对象盒子时候避免对象没有内容时候不能撑开,但内容多少不能确定所以又不能固定高度,这个时候我们就会需要css来设置min-height最小高度撑高对象盒子。当内容少时候最小高度能将内容显示出,如果内容多余最小高度能装下时候,对象也会再随内容增多而增高。

Css max-height最大高度应用解释
  此属性很少使用,可能是为了避免内容太多将高度撑太高影响布局美化统一,这个时候我们设置最大高度限制。比如一个table tr td表格对象里装一个图片,而图片高度不确定,如果太高了不想图片撑破tr td表格,这个时候通过css max-height限制图片最大高度是有必要的。

设置边框弧形
  boder-radius:**px;

<head>
<title></title>
<style type="text/css">
div{
  width: 100px;
  height: 50px;
  border: solid 2px red;
  border-radius:10px;
}
</style>
</head>
<body>
  <div></div>
</body>

效果图:

修改鼠标效果:

  cursor:url('鼠标地址');
  text是移动到文本上的那种效果
  wait是等待的那种效果
  default是默认效果
  e-resize是向右的箭头
  ne-resize是向右上的箭头
  n-resize是向上的箭头
  nw-resize是向左上的箭头
  w-resize是向左的箭头
  sw-resize是左下的箭头
  s-resize是向下的箭头
  se-resize是向右下的箭头
  auto是由系统自动给出效果

posted on 2015-11-26 11:04  早安.晚安  阅读(130)  评论(0编辑  收藏  举报