互联网技术与应用_网页设计期末大作业-计算机相关介绍(html+css,无js,响应式布局)

本文链接：https://blog.csdn.net/OrientalGlass/article/details/128709865

大一选修的互联网技术与应用的期末作业,学的不是很深比较菜,使用了一些动画和响应式布局

源码和图片视频等资源已经打包并上传好,下载链接:互联网技术与应用,网页设计期末大作业-计算机相关介绍

推荐资源:

1.黑马程序员pink老师前端入门教程

2.【装机教程】全网最好的装机教程，没有之一

1.首页

2.计算机历史

3.计算机组成

4.组装DIY

5.部分源码

index.html首页:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Computer</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="head&foot.css">
</head>
<body>
    <header>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="./history/history.html">计算机历史</a></li>
                <li><a href="./Organization/organization.html">计算机组成</a></li>
                <li><a href="./DIY/DIY.html">组装DIY</a></li>
                <li class="icon"><img src="./images/icon.jpg" alt=""></li>
            </ul>
    </header>

    <main>
        <div class="box1">
            <ul class="bg3">
                <li><a href="https://baike.baidu.com/item/%E4%BA%91%E8%AE%A1%E7%AE%97/9969353?fr=aladdin" target="_blank">云计算</a></li>
                <li><a href="https://baike.baidu.com/item/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/9180" target="_blank">人工智能</a></li>
                <li><a href="https://baike.baidu.com/item/%E8%87%AA%E5%8A%A8%E9%A9%BE%E9%A9%B6%E7%B3%BB%E7%BB%9F?fromtitle=%E8%87%AA%E5%8A%A8%E9%A9%BE%E9%A9%B6&fromid=57276852" target="_blank">自动驾驶</a></li>
                <li class="bg1">
                    <img src="./images/cpu2.jpeg" alt="">
                </li>
                <li><a href="https://baike.baidu.com/item/%E5%85%83%E5%AE%87%E5%AE%99/58292530" target="_blank">元宇宙</a></li>
                <li><a href="https://baike.baidu.com/item/%E5%A4%A7%E6%95%B0%E6%8D%AE/1356941" target="_blank">大数据</a></li>
                <li><a href="https://baike.baidu.com/item/%E7%89%A9%E8%81%94%E7%BD%91/7306589" target="_blank">物联网</a></li>
            </ul>
            <p>21世纪是“互联网+”的时代，互联网技术应用已成为当今社会生活和经济发展不可或缺的部分，与我们每个人的生活与工作息息相关。
                计算机,作为人们畅游互联网的主要工具之一,已经深入到我们生活的方方面面。
            </p>
            <img class="bg2" src="./images/bg.jpeg" alt="">
        </div>
        
        <h2 class="mid">“计算机”的形式</h2>
        
        <ul class="box2">
            <li>
                <p class="introduce">台式机是最早走入千家万户的电脑,凭借其性能强大,价格便宜,稳定性强等优点备受青睐。</p>
                <img src="./images/desktop.jpeg" alt=""> 
            </li>
            <li>
                <p class="introduce">笔记本电脑克服了台式机的便携性不足的缺点，性能相对比较强大，但是价格较为昂贵，性价比不如台式机。</p>
                <img src="./images/laptop.jpeg" alt="" id="bug">
            </li>
            <li>
                <p class="introduce">平板电脑介于笔记本电脑和手机之间，可以方便的追剧，做笔记，绘画等。但是便携性不如手机，性能不如平板，根据个人实际需要购买。</p>
                <img src="./images/tablet.jpeg" alt="">
            </li>
            <li>
                <p class="introduce">手机的基本结构和原理与电脑无二，也是一种小型的计算机。现如今人人都离不开手机，联系、娱乐、网购、移动支付等，似乎手机是另一个“我”</p>
                <img src="./images/phone.jpeg" alt="">
            </li> 
        </ul>

        <div class="box3">
            <h2>错误操作!<span>!</span><span>!</span></h2>
            <img src="images/图吧禁图.gif" alt="">
            <p>请爱护你的电脑,不懂多问多百度,不要点击不明链接或者访问危险网站下载危险软件。</p>
            <img src="images/blue.jpeg" alt="">
        </div>
        
    </main>

    <footer>
        <p>2022年@作者:xxx 班级:xxx 学号:xxx</p>
    </footer>
</body>
</html>

首页style.css:

@keyframes appear{
    0%{
        opacity: 0;
        transform: rotateY(180deg);
    }
    50%{
        opacity: 0.5;
        transform: rotateY(90deg);
    }
    100%{
        opacity: 1;
        transform: rotateY(0);
    }
}
body {
    animation: appear 1s linear 0s;
}
main{
    width: 100%;
    height: 260%;
    overflow: hidden;
    background-image: linear-gradient(to top right,#004682,#00fefe);

}
.box1
{
    width: 100%;
    text-align: center;
    margin: 4rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.box1 .bg3{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 2rem 0 5rem;
}
.box1 .bg3 li{
    width: 6rem;
    height: 6rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: antiquewhite;
}

@keyframes imgarise{
    from{
        opacity: 0;
        transform: translate(100%,0);
    }
    to{
        opacity: 1;
        transform: translate(0,0);
    }
}
.box1 .bg3 .bg1 img{
    width: 6rem;
    height: 6rem;
    border-radius: 3rem;
    border: 5px solid white;
    
}

@keyframes cpushadow
{
    to{
        box-shadow: skyblue 0 0 0 30px;
    }
}

.box1 .bg3 .bg1 img{
    animation: cpushadow 1s linear 0s;
    animation-iteration-count: infinite;
    animation-direction:alternate-reverse;
}
.box1 p{
    font-size: 1.5rem;
    width: 25%;
    max-height: 100%;
    color: skyblue;
    margin-top: 5rem;
    margin-right: 5rem;
    animation: imgarise 2s linear 0s;
}

.box1 .bg2{
    border-top: none;
    background-color: skyblue;
    max-width: 40%;
    max-height: 100%;/*防止拉伸变形*/

}


.mid{
    width: 100%;
    height: 2rem;
    margin: 5rem auto 3rem;
    text-align: center;
    color: skyblue;
}
.box2
{
    width: 100%;
    height: 25%;
    margin: 0 auto 5rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.box2>li{
    width: 18%;
    background-color: rgba(0, 0, 0, 0);/* 透明背景*/
    display: flex;
    flex-direction: column;
}

.box2>li p{
    width: 100%;
    height: 40%;
    margin-bottom: 1rem;
    color: white;
    font-size: 120%;
    opacity: 0;
}

.box2 img{
    width: 100%;
    height: 60%;
}

@keyframes arise{
    from{
        opacity: 0;
        transform: translate(0,100%);
    }
    to{
        opacity: 1;
        transform: translate(0,0);
    }
}

.box2 li:hover .introduce{
    animation: arise 0.5s linear 0s;
    animation-fill-mode: forwards;
}

.box2 li:hover img{
    transform: scale(110%);
}
.box3{
    width: 80%;
    height: 25%;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    margin: 0 auto 3rem;
    justify-content: space-between;
}
.box3 h2{
    width: 100%;
    height: 25%;
    color: rgb(231, 36, 36);
}
.box3 h2 span:first-child{
    font-size: 2rem;
}
.box3 h2 span:last-child{
    font-size: 3rem;
}

.box3 img{
    width: 30%;
    height: 60%;
}
.box3 img:hover{
    transform: scale(110%);
}
.box3 p{
    width: 30%;
    height: 30%;
    text-align: center;
    font-size: 1.5rem;
    color: rgb(246, 190, 87);
}


@media  screen and (max-width:960px)
{
    main{
        height: 350%;
    }
    .mid{
        margin-bottom: 0;
    }
    .box1{
        flex-direction: column;
    }
    .box1 p{
        font-size: 1.2rem;
        margin: 0;
    }

    .box1>img{
        min-width: 300px;
    }
    .box2{
        width: 30%;
        height: 30%;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-between;
        gap: 3%;
        margin-bottom: 2rem;
    }
    .box2>li{
        width: 100%;
        height: 20%;
    }
    .box2>li p{
        display: none;
    }
   .box2>li img{
       width: 100%;
       height: 100%;
   }

   .box3{
       flex-direction: column;
       justify-content: center;
       align-items: center;
   }

   .box3 h2{
       height: 10%;
   }
   .box3 p{
       width: 50%;
       height: 20%;
       font-size: 1.2rem;
       display: flex;
       align-items: center;
   }

   .box3 img{
       height: 30%;
       min-width: 250px;
       max-height: 250px;
   }
}