HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）

最新推荐文章于 2024-03-25 19:58:02 发布

403_ss

最新推荐文章于 2024-03-25 19:58:02 发布

阅读量617

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_40980087/article/details/98826399

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.实现多个div盒子横排列，鼠标点上去后显示border，相连的border合并。

：利用position：relative的层级比标准流高（后来居上原则），与margin-left：-1px；

若都有position：relative 利用z-index提高层级

效果：

代码：

<style>

div {
    width: 250px;
    height: 300px;
    float: left;
    border: 2px solid rgb(194, 182, 182);
    margin-left:-2px; 

}
div:hover{
    border: 2px solid #a00c0c;
    position: relative;
}
</style>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

2.微信滑动门

查看原理：如何使用滑动门

效果：

代码：

<style>
    *{
        margin: 0;
        padding: 0;
    }

    li{
        list-style: none;
        float: left;
        margin-right: 30px;
    }
.nav{
    height:500px;
    background: url(images/wx.jpg) repeat-x;
  
}
.nav a{
    line-height: 75px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    background: url(images/to.png) no-repeat left;
    padding-left: 15px;

}

.nav span{
    line-height: 75px;
    display: inline-block;
    background: url(images/to.png) no-repeat right;
    padding-right: 15px;
 
}

.nav a:hover , .nav a:hover span{
    background-image: url(images/ao.png);
}
</style>

<body>
<div class="nav">
        <ul >
            <li>
                <a href="#"><span>首页</span></a>
            </li>
            <li>
                    <a href="#"><span>公众平台</span></a>
            </li>
            <li>
                <a href="#"><span>技术与支持</span></a>
            </li>
            <li>
                <a href="#"><span>公众平台</span></a>
            </li>
            <li>
                <a href="#"><span>帮助与反馈</span></a>
            </li>
        </ul>
    </div>
</body>

3. 增加icomoon字体图标，

本质其实是文字，可以改变透明度、旋转度，颜色、产生阴影、透明效果等. 体积小。

网站

下载好的包：

1. 将fonts 复制到项目目录下。

2.打开demo.html ，复制红框的图案到想要放入的位置。

3.声明字体。

//链接外部CSS样式


@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?6ps2qh');
    src:  url('../fonts/icomoon.eot?6ps2qh#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?6ps2qh') format('truetype'),
    url('../fonts/icomoon.woff?6ps2qh') format('woff'),
    url('../fonts/icomoon.svg?6ps2qh#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

4 引用字体：

额外加标签法 :1. 打开demo.html ，复制红框的图案到 < i > 标签内。

2.设置字体样式 font-family: 'icomoon' ;

伪元素插入法：div ::after { content : " \e93f" } //content是图片红框前的字符。

注意：伪元素的好处在于不用多写一个i盒子。并且after 伪元素也可以算是一个盒子。也可以使用position等

网址前 icon ：位置放到项目根目录下。 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

注意： SVG转为字体图标： import icons -> xx.svg

追加字体图标：import icons -> selecttion.json

4.去掉设置的li 的上下左右边框：

思路：让父级的大小与子级大小一样，子级会有多余的border，多余的用overflow隐藏

但是问题又来了，这样子级的宽度不高li会掉下来。

解决在div（父级）与li（子级）之间加一个宽度比父级大的的宽度高 ul

5、让搜索框下面显示数据 datalist


    <!-- datalist 与input配合使用  input的list与datalist的id一致4
        设置value显示数据
    -->
    <input type="text" name="" list="datalists">
    <datalist id="datalists">
        <option value="百度"></option>
        <option value="百度"></option>
        <option value="腾讯"></option>
        <option value="阿里巴巴"></option>
        <option value="酷狗"></option> 
        <option value="百白何"></option>
    </datalist>

6.纯css 三角形原理

均分原理。当div的宽高是0时，设置border时，会从中心向上下左右四个角均分四个border

403_ss

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）

1.实现多个div盒子横排列，鼠标点上去后显示border，相连的border合并。：利用position：relative的层级比标准流高（后来居上原则），与margin-left：-1px；若都有position：relative 利用z-index提高层级效果：代码：<style>div { width: 250px;...
复制链接

扫一扫