HTML-CSS_Day_1：HTML-CSS文字溢出处理、背景图片处理、企业开发经验

最新推荐文章于 2024-07-22 22:37:58 发布

孤光冰雪LightIce

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量210

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Brandon_/article/details/119283065

版权

一、文字溢出处理

溢出容器，要打点展示

1. 单行文本

white-space:nowrap：文本遇到边界不换行展示

overflow:hidden：隐藏超出边界文本

text-overflow:ellipsis：超出边界文本部分打点

2. 多行文本

PC端直接手打“…”或做截断处理即可（老版本浏览器较多，不适配），移动端可在CSS3中实现

overflow:hidden：截断处理

二、背景图片处理

1.background-image:url(图片地址.jpg)：以图片充当背景

2.background-size:XXpx XXpx：调整图片尺寸

3.background-repeat:no-repeat：图片尺寸小于容器尺寸时不再自动重复图片填充

4.background-position: x y：调整图片位置

三、企业开发经验

淘宝网图片实例

<body>
	<a href="http://www.taobao.com target="_blank""></a>
</body>

图片如何代替文字，CSS有时展示图片，CSS无时展示文字_1

a{
	display:inline-block;
	text-decoration:none;
	color:#424242;
	width:190px;
	height:90px;
	border:1px solid black;
	background-image:url(https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
	background-size:190px 90px;
	
	text-indent:200px;
	white-space:nowrap;
	overflow:hiddden;
}

图片如何代替文字，CSS有时展示图片，CSS无时展示文字_2_padding

a{
display:inline-block;
	text-decoration:none;
	color:#424242;
	width:190px;
	height:0px;
	padding-top:90px;
	overflow:hiddden;
	border:1px solid black;
	background-image:url(https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
	background-size:190px 90px;
}

几个特殊点

行级元素只能嵌套行级元素，块级元素可以嵌套任何元素
<p>中不能套<div>
<a>中不能套<a>

孤光冰雪LightIce

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML-CSS_Day_1：HTML-CSS文字溢出处理、背景图片处理、企业开发经验

一、文字溢出处理溢出容器，要打点展示1. 单行文本white-space:nowrap：文本遇到边界不换行展示overflow:hidden：隐藏超出边界文本text-overflow:ellipsis：超出边界文本部分打点2. 多行文本PC端直接手打“…”或做截断处理即可（老版本浏览器较多，不适配），移动端可在CSS3中实现overflow:hidden：截断处理...
复制链接

扫一扫