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 · 182 阅读 · 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 · 213 阅读 · 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 · 134 阅读 · 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 · 1492 阅读 · 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 · 243 阅读 · 0 评论