常用CSS备忘

1 怎样让div中的img居中

水平居中:div设置:text-align:center;
img设置:width:图片宽度; margin:0 auto;

垂直居中:div设置:position:relative;
img设置:position:absolute; top:50%; height:图片高度; margin-top:图片高度的一半;

2 display显示块圆角特效

border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;-o-border-radius: 2px;

3 div没有高度

子元素 div2 本身具有高度和宽度,但由于其具有float:left;属性后。其父元素 div1 不具有高度,解决方法:
1) 直接给 div1 设置固定高度来解决
2) 给父元素 div1 设置 overflow:hidden 属性

4 css改变光标的位置

<input style="padding-left:0 8px;"/>

5 css实现如下效果:

复制代码
<div style='background-color:#0A9EE5;width:100%;height:52px;position:fixed;z-index:99'>
    <div style='padding:10px;height:32px;line-height:32px;'>
    <div style='float:left;width:10%;'>
        <div style='text-align:center'><img style='margin:auto' src='../img/Back-32.png'></div>
    </div>
    <div style='float:left;padding-left:1%;width:79%;'>
        <input id='assSearchId0000' type='text' style='width:92%;height:28px;border:0px;padding:0 8px;' placeholder='关键字..'>
    </div>
    <div style='float:left;width:10%;'>
        <div style='text-align:center'><img style='margin:auto' src='../img/Search-32.png'></div>
    </div>
    </div>
</div> 
复制代码

 6 css实现以下简单布局:要求title左右居中

<div style="position:absolute;left:0px;right:0px;text-align:center;">XXX</div>
<div style="position:absolute;right:0px;">XXX</div>

 7 去除button,input点击后出现的蓝色(或红色等等)覆盖层或边框

{outline:none;}

 

posted @   Jager  阅读(311)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示