> 웹 프론트엔드 > HTML 튜토리얼 > html、css容易被忽略的小知识点_html/css_WEB-ITnose

html、css容易被忽略的小知识点_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:53:15
원래의
1083명이 탐색했습니다.

都说前端容易,谁说的。前端上手快,越往后学习越困难。学习前端快一年了,依然发现一些小的知识点不会。这些经验性的东西不碰到永远学不会。

(1)title前面的logo。


就像这个编辑文章前面的logo。不知道大家知不知道这个图标是如何加载过来的。反正我之前不知道。。。如果大家知道的话就直接忽视掉我吧。当我自己做笔记了吧。

<link rel="shortcut icon" href="./flappyBird/bird.png">
로그인 후 복사

这个rel后面要写shortcut icon,代表这是title的logo图片。如果是样式表的话,就要写stylesheets了。

(2)规定段落中的文本不进行换行。

就是你写的这段文字让他永远在一行内显示。只需要加一个css属性即可:

white-space: nowrap;
로그인 후 복사

(3)文本框内的文本要出现溢出,就用省略号表示剩下的部分。

需要加两个属性:

overflow: hidden;			text-overflow: ellipsis;
로그인 후 복사

text-overflow就是文本溢出的意思。

把上述(2)(3)合起来的效果就是

源代码是:

<div class="test">Hello everybody I'm WesternRanger,welcome to Peking!</div>
로그인 후 복사
.test{			border:#999 solid 1px;			width:200px;			height:30px;			font-weight: 700;			line-height: 30px;			overflow: hidden;			text-overflow: ellipsis;			white-space: nowrap;		}
로그인 후 복사

这次就暂时碰到这么多。本文将不断更新。遇到本人感觉比较冷门的小知识我就记下来。就当我做笔记了吧

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿