2021-05-09

 

 

 

做第一个企业网站遇到的一些问题和解决办法

（1）鼠标移上去图片有一个半透明及蒙尘效果

初始

第一时间想到的就是一个简单的hover效果,我太脑瘫了。后来发现盖不住，请教后知道得使用定位效果。

代码如下

html:

    <!-- 蒙尘效果 -->

    <ul class="container severs cf">
        <li>
            <img src="images/tu_01.jpg" alt="">
            <!-- 这个p标签一开始用的a 标签，但是后边的也需要a就改成了p -->
            <p>监控系统</p>
            <a href="#">-- 警报系统 --</a>
        </li>
        <li>
            <img src="images/tu_02.jpg" alt="">
            <p>监控系统</p>
            <a href="#">-- 警报系统 --</a>
        </li>
        <li>
            <img src="images/tu_03.jpg" alt="">
            <p>监控系统</p>
            <a href="#">-- 警报系统 --</a>
        </li>
        <li>
            <img src="images/tu_04.jpg" alt="">
            <p>监控系统</p>
            <a href="#">-- 警报系统 --</a>
        </li>
        <li>
            <img src="images/tu_05.jpg" alt="">
            <p>监控系统</p>
            <a href="#">-- 警报系统 --</a>
        </li>
        <li>
            <img src="images/tu_06.jpg" alt="">
            <p>监控系统</p>
            <a href="#">-- 警报系统 --</a>
        </li>
    </ul>

/* 蒙尘效果 */

.severs li{
    float: left;
    width: 200px;
    height: 300px;
    position: relative;
}

.severs p{
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 255, 0.6);
    width: 100%;
    line-height: 30px;
    color: #fff;
    text-align: center;
}

.severs a{
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 255, 0.6);
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 300px;
    display: none;
}

.severs li:hover a{
    display: block;
}

 

效果图：   

 

 

 

 

（2）屏幕放大缩小时，横幅的宽度改变与其中文字位置变化

当有一一张很宽的横幅图片铺在屏幕中，而其中又有一些文字，遇到不同的分辨率出现的效果也不一样，一开始没有设置任何属性，就一张单纯背景图如下：

在版心内的内容与旁边的内容叠在一起

当屏幕放大缩小时，banner就会移动

解决办法：设置图片居中，然后两边设置一个横幅的背景色铺满，这样当屏幕放大缩小时，和在不同的分辨率内（1920-1280）都可以让其中内容显示在中中间间，其他分辨率看不到两边的内容那就活该了。

.light{
    background: #eee url(../images/banner3.jpg) no-repeat center;
    height: 510px;
}

结果：

 

（3）鼠标移到目标上去的时候有一个压线效果 使用

 

这里可以在a标签后添加一个伪元素::after来制作一个压线效果

X    <nav class="container">
        <a href="#">首页</a>
        <a href="#">收藏</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">公司新闻</a>
        <a href="#">产品展示</a>
    </nav>

 

/* 压线效果 */

nav{
    background: #ccc;
    height: 100px;
    text-align: center;
}

nav a{
    margin: 0 10px;
    color: #fff;
    display: inline-block;
    padding: 30px;
    line-height: 40px;
}

nav a:hover::after{
    content: "";
    background: #f00;
    display: block;
    height: 3px;
    width: 50%;
    margin: 0 auto;
}