CSS世界书籍代码积累
qq_21696621
这个作者很懒,什么都没留下…
展开
-
margin与一栏定宽的两栏自适应布局实例
HTML: <h4>左侧固定</h4> <div class="box box-left"> <img src="1.jpg" class="img"> <p>DOM文档流中,图片定宽在左侧,文字内容在右侧,和视觉呈现的前后顺序一致。</p> </div> <h4>右侧固定-DOM...翻译 2020-04-28 20:27:22 · 159 阅读 · 0 评论 -
label元素模拟button,解决不同浏览器对按钮的padding值兼容性
HTML代码 <button id="btn"></button> <label for="btn">按钮</label> CSS代码 button{ position:absolute; clip: rect(0 0 0 0); } label{ display:inline-block; line-height:20px; p...原创 2020-04-28 11:20:49 · 189 阅读 · 0 评论 -
百分比padding值与等比例头图效果实例
实现一个宽高比为5:1的比例固定头图效果 HTML代码 <div class="box"> <img src="cover.jpg"> </div> CSS代码 .box { padding: 10% 50%; position: relative; } .box > img { position: absol...翻译 2020-04-28 11:06:26 · 99 阅读 · 0 评论 -
CSS实现动态 "正在加载中..."字
HTML代码 正在加载中<dot>...</dot> CSS代码 dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::...翻译 2020-04-28 10:53:35 · 1414 阅读 · 0 评论 -
content属性,让普通标签元素变成替换元素
传统标题图片代码 <h1><<CSS世界>></h1> h1{ width:180px; height:36px; background:url(logo.png); /*隐藏文字*/ text-indent:-999px; } 使用content创新方法 <h1><<CSS 世界>>>&...翻译 2020-04-28 10:48:51 · 220 阅读 · 0 评论