文字溢出,背景图片处理,项目演练
文字溢出
单行文本溢出的三件套
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行文本溢出做截段
overflow: hidden;
背景图片处理
背景图片填充
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>123</title>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body>
<div></div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
color: #424242;
font-family: arial;
}
div{
width: 200px;
height: 200px;
border: 1px solid black;
background-image: url(1.PNG);/*可当作背景图片,url是背景图片地址*/
background-size: 200px 200px;/*设置背景大小*/
background-repeat: no-repeat;/*不重复平铺*/
background-position: 100px 100px;/*按坐标出现在某个区域*/
}
当CSS失效解决图片链接不能用的问题:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>123</title>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body>
<a href="http://www.taobao.com" target="_blank">淘宝网</a>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
color: #424242;
font-family: arial;
}
a{
display: inline-block;
text-decoration: none;
background-repeat: no-repeat;
background-size: 190px 90px;
color: #424242;
height: 90px;
width: 190px;
border:1px solid black;
background-image: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
text-indent: 190px; /*把文字缩进出去*/
white-space: nowrap; /*文字不换行*/
}
padding部分也可以加背景图片
p标签里不能套块级元素
留白区域的结构:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>123</title>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
.wrapper{
height: 30px;
background-color: #123;
}
.content{
margin: 0 auto; /*auto自适应*/
width: 800px;
height: 30px;
background-color: #0f0;
}
文本类属性:
inline block inline-block;
inline inline-block -->文本类元素
带inline 都有文本类特点
设置属性:
position:absolute;
float: left/right;
会自动加上display:inline-block 属性
如果一个行级块元素或者一个文本类元素里面包含文字,外面文字会和里面的文字进行底对齐(无视文字大小)
消除底对齐
vertical-align:10px;
调整该行的对齐线