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

php中文网
发布: 2016-06-24 11:53:15
原创
1217人浏览过

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

(1)title前面的logo。


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

立即学习前端免费学习笔记(深入)”;

<link rel="shortcut icon" href="./flappyBird/bird.png"/>
登录后复制

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

立即学习前端免费学习笔记(深入)”;

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

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

立即学习前端免费学习笔记(深入)”;

white-space: nowrap;
登录后复制

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

立即学习前端免费学习笔记(深入)”;

需要加两个属性:

怪兽AI知识库
怪兽AI知识库

企业知识库大模型 + 智能的AI问答机器人

怪兽AI知识库 51
查看详情 怪兽AI知识库

立即学习前端免费学习笔记(深入)”;

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;		}
登录后复制

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

立即学习前端免费学习笔记(深入)”;

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号