HTML,CSS工具
1.初始化HMTL属性
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
margin属性的拥有者: body有8px的margin(上下左右都有),p标签有margin-top/margin-bottom为12px的值,ol,ul,li除了有margin-top/margin-bottom为12px的值外,还有padding-left为40px的值
padding属性的拥有者:ol,ul有padding-left为40px的值
list-style属性的拥有者:ol,ul标签有各自的type属性值
text-decoration属性的拥有者:a标签的下划线
2.文字环绕图片
将img设置为float时,对文字可见,首行文字会排在图片后,之后的文字多的话,就会形成一个环绕图片的效果
html代码:
<img src="img/taobaowang.png" alt="淘宝网">
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
img{
float:left;
}
执行结果:
如果jio得图片跟文字太挤了,可以设置img的margin的值为10px;得到下面的效果
是不是变的好看了点,对,是这样的
3.两栏展示
在很多页面中都需要两栏展示
html代码:
<div class="right"></div>
<div class="left"></div>
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
.right{
position:absolute;
top:0;
right:0;
width:100px;
height:100px;
border:1px solid #f40;
}
.left{
height:100px;
margin-right:102px;
border:1px solid black;
}
执行结果:
由于图有点长,截取了右边的一部分,html中的两个div不能互换位置,如果换了的话,定位的right出生位置发生改变,变成了下面的
4.文字溢出处理
需求:溢出容器,要打点展示,这里文本溢出分为两种
第一种:单行文本溢出(常用)
要使用到溢出打点三件套(自己总结的),
A: white-space :nowrap;//文字长度大于容器宽度,文字不换行,直接定出容器(一行展示)
B: overflow :hidden//第一行文字溢出容器的部分隐藏
C: text-overflow :ellipsis//一个在容器最末端被截断的文字打点展示
htm代码:
<p>现在是2018.11.18.20:37,我很开心</p>
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
p{
width:150px;
height:20px;
line-height:20px;
border:1px solid black;
}
执行结果为:
在border:1px solid black;下面加一个white-space:nowrap,执行结果为:
在white-space:nowrap下面加overflow:hidden,执行结果为:
在overflow:hidden下面加text-overflow:ellpsis;
第二种:多行文本溢出处理()
告诉技术经理,我们只做截断,不做打点,哈哈哈哈,
语法:只写overflow:hidden
html代码:
<p>现在是2018.11.18.20:37,我很开心现在是2018.11.18.20:37,我很开心现在是2018.11.18.20:37,我很开心现在是2018.11.18</p>
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
p{
width:150px;
height:40px;
line-height:20px;
border:1px solid black;
}
执行结果:
加上overflow:hidden,执行结果为:
5.背景图片处理
语法:background-image:url();
与之配合的是background-size: *px *px;
background-repeat:repeat(默认,一张图片铺不满这个容器,俺就重复几张图片铺)/no-repeat(不重复,单张图片)
background-position:left/center/right top/center/bottom;属性值表示x的坐标位置和y轴的坐标位置,只写一个代表x或y的属性值的话,
另一个方向的值默认为center,例如写background-position:top;相当于属性值为center top;如果只写right那么相当于background-position:right center;下面是我对background-position值的理解,谢谢
tml代码:
<div></div>
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
div{
width:200px;
height:200px;
border:1px solid black;
background-image:url('1.jpg');
background-size: 100px 100px;
background-repeat:no-repeat;
background-position:center ;
}
执行结果:
