新技能(二)
改变图片(图标)大小的两种方式
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是由系统自动给出效果