masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > html、css容易被忽略的小知识点_html/css_WEB-ITnose

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

WBOY
Lepaskan： 2016-06-24 11:53:15
asal
1092 orang telah melayarinya

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

（1）title前面的logo。


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

<link rel="shortcut icon" href="./flappyBird/bird.png">
Salin selepas log masuk

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

（2）规定段落中的文本不进行换行。

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

white-space: nowrap;
Salin selepas log masuk

（3）文本框内的文本要出现溢出，就用省略号表示剩下的部分。

需要加两个属性：

overflow: hidden;			text-overflow: ellipsis;
Salin selepas log masuk

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

把上述（2）（3）合起来的效果就是

源代码是：

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

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

Label berkaitan：
html、css容易被忽略的小知识点
sumber：php.cn
Artikel sebelumnya：html 背景色渐变，怎么实现，我用谷歌的浏览器的_html/css_WEB-ITnose Artikel seterusnya：（一）CSS3动画应用
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2192
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2340
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1963
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1851
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1908
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan