：focus-within
当一个元素，如文本框获取焦点后，这个事件会向上冒泡
<style> .box{ width:50px; height:50px; border:1px solid red; } .box:focus-within{ border:1px solid blue; } /*只有当text文本获得焦点时（鼠标点击），.box:focus-within的属性会为.box应用 </style> <body> <div class="box"> <input type="text" name="" id=""> </div> </body> placeholder <input type="text" placeholder="输入内容" name="" id="">? 文本框默认是“输入内容”，当鼠标点击并且输入新的内容时，默认内容消失
10-22 页面-导航栏 <style> .box{ width:300px; height:60px; background-image:url(search.png); /*为盒子设置背景图片，但图片会重复*/ background-repeat:no-repeat; /*设置图片不重复*/ outline:none; /*轮廓线消失*/ } </style> <body> <div class="box"> <input type="text" name="" id="" placeholder="在这里可劲搜吧...."> <!--文本框默认是“在这里可劲搜吧....”，当鼠标点击并且输入新的内容时，默认内容消失--> </div> </body> 使用span用伪元素添加iconfont内容 <style> @font-face { font-family: 'iconfont'; /* Project id 2879573 */ src: url('//at.alicdn.com/t/font_2879573_qup6xy5uufh.woff 2?t=1634875247753') format('woff2'), url('//at.alicdn.com/t/font_2879573_qup6xy5uufh.woff?t=1634875247753') format('woff'), url('//at.alicdn.com/t/font_2879573_qup6xy5uufh.ttf?t=1634875247753') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } span::before{ content="e61c;"; } /*不需要将完整unicode代码拷贝过来，将所有代码拷贝过来，反而内容不会显示，应将“&#x”删掉（因为所有的unicode编码格式都是以&#x开头）*/ </style> <body> <span class="iconfont">技术交流</span> </body> 最小宽度 <style> .header{ width:90%;/*保证缩小网页时，子元素内容可以全部看见*/ height:60px; line-height:60px; margin:0 auto; border:1px solid black; } .header-wrap{ border:1px solid red; width:100%; height:60px; background-color:#fff; min-width：1400px;/*网页缩小时，最小宽度在1400px } /*当用户缩小网页时，.header子元素超出界面，导致在页面中消失 </style> <body> <div class="header-wrap"> <div class="header"> </div> </div> </body> 清除浮动 <style> .main{ margin-top:20px; /*height:200px;去掉需要去除浮动，否则盒子塌陷*/ } .article-wrap{ width:830px; height:200px; background-color:blue; float:left; } .aside-wrap{ width:320px; height:200px; background-color:orange; float:right; } /*清除浮动*/ .clearfix::before,.clearfox::after{ content=""; display:block; clear:both; overflow:hidden; } </style> <body> <div class="main clearfix"> <div class="article-wrap"> </div> <div class="aside-wrap"> </div> </div> </body> “|”的实现 <style> .module-title{ border:1px solid black; margin:30px 0; } ..module-title span:first-child{ position:relative } .module-title span:first-child::after{ content:""; position:absolute; /*display:inline-block; /*当用定位 子绝父相 子元素自动转为块元素*/ background-color:red; height:100%; /*还可以设置 top：0;bottom:0;效果一样； } </style> <body> <div class="module-title"> <span>博客</span> <span>Articles</span> </div> </body>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
