css技巧

最新推荐文章于 2024-07-14 16:50:03 发布

han0715

最新推荐文章于 2024-07-14 16:50:03 发布

阅读量2.6k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/bule_sky78/article/details/120912868

版权

：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>

han0715

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css技巧

：focus-within当一个元素，如文本框获取焦点后，这个事件会向上冒泡<style> .box{ width:50px; height:50px; border:1px solid red; } .box:focus-within{ border:1px solid blue; } /*只有当text文本获得焦点时（鼠标点击），.box:focus-within的属性会为.box应用
复制链接

扫一扫