html中标签的技巧

最新推荐文章于 2024-10-09 11:42:00 发布

易安sparkle

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量270

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_43675447/article/details/86995598

版权

html 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

p标签怎样实现首行缩进两个空格？

使用text-indent；
例：< p style="text-indent: 2rem">怎样创建个人博客< /p>
使用“ ”空格

p标签怎样设置行间距？
使用line-height设置行高
怎样消除span a之间产生的默认间距？

直接float；
给父元素添加字体大小为0

input 去掉外边框,placeholder的字体颜色、字号

（1）input 标签去除外边框
在进行webAPP开发时，input外边框非常影响美观，去除外边框方法如下：

<input style="border: 0px;outline:none;cursor: pointer;"  type="text" placeholder="请输入手机号">

解释：
“border: 0px；” 去除 placeholder 外的边框;
“outline:none;”“去除点击input框时显示的边框;
“cursor: pointer;”点击显示光标光标呈现为指示链接的指针（一只手）

（2） placeholder的字体颜色
查阅不同资料后发现，因为各家浏览器对css支持各有不同，所以需要对齐区别设置，在样式表添加：

::-webkit-input-placeholder { /* WebKit browsers */
    color:#999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#999;
}

效果如图：
在这里插入图片描述

如何调整input里文字的初始位置

input中的placeholder=“提示”，文字位置不是自己想要的，换个思路就能解决：

input {
text-align = center; /*placeholder文字居中*/
text-align = left; /*placeholder文字居左*/
text-align = right; /*placeholder文字居右*/
/*位置还是不对的话就用padding*/

padding-left：10px; /*placeholder文字距左10px*/
padding-right：10px; /*placeholder文字距右10px*/
/*最后别忘了内减盒子*/

box-sizing:border-box;

}

如何调整input里文字间的间距？
css属性：< input type="text" style="letter-spacing:10px;">
网站中，图片文件（jpg，png,gif），如何点击下载？而非点击预览？

<a href="https://www.baidu.com/favicon.ico" download >下载</a>  
<!-- 我们还可以指定文件名称，如下写法： -->
<a href="tupiandizhi.jpg" download="baidu" ></a>

实现点击文字，文字后面radio选中效果

<form>  
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />  
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
</form>