一个简单的web前端网站(不涉及后端)

最新推荐文章于 2023-10-06 22:54:19 发布

网安小白(web渗透阶段)

最新推荐文章于 2023-10-06 22:54:19 发布

阅读量225

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_62100902/article/details/131366540

版权

一效果图展示

ps:中间是一个轮播，右上角的注册登录没有做

二简单的说一下内容吧

整个页面就是由html+css+js简单组成的，一些div，轮播，显示与隐藏等等比较基础的东西

index.php

body.css

header.css

三源码分享

index.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>觉维设计</title>
    <link rel="stylesheet" href="css/header.css" type="text/css">
    <link rel="stylesheet" href="css/body.css" type="text/css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .lunbo{
            width:720px;
            height:360px;
            margin: 0 auto;
            position: relative;
        }
        .lunbo:hover{
            cursor: pointer;
        }
        .lunbo li{
            list-style:none;
            float: left;
            position: absolute;
            z-index: 10;
        }
        .lunbo>span{
            display: block;
            width: 40px;
            height: 56px;
            font-size: 25px;
            font-weight: 600;
            font-family: 幼圆;
            color: #f1f1f1;
            position: absolute;
            z-index: 12;
            line-height: 56px;
            text-align: center;
            top:40%;
            transition: all 1s;
        }
        .lunbo>span:hover{
            background-color: #00c3b6;
        }
        .lunbo>.left{
            left: 0;
        }
        .lunbo>.right{
            right: 0;
        }
        .lunbo p{
            position: absolute;
            height: 30px;
            bottom: 10px;
            z-index: 12;
            width: 100%;
            text-align: center;
        }
        .lunbo p span{
            display: inline-block;
            width:7px;
            height: 7px;
            border-radius: 7px;
            background-color: #f1f1f1;
            line-height: 7px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div class="header">
    <div class="logo">
         <img src="img/logo.png">
    </div>
    <div class="content">
         <ul>
            <li><a href="#">文章</a></li>
            <li><a href="#">欣赏</a></li>
            <li><a href="#">素材</a></li>
            <li><a href="#">活动</a></li>
            <li><a href="#">唯然</a></li>
            <!--父级设置相对定位：relative-->
            <li class="more">
                <a href="#">更多</a>
                    <!--子集设置绝对定位：absolute-->
                    <ul>
                        <li><a href="#">关于觉维</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
            </li>
         </ul>
    </div>
    <div class="right">
         <a href="#">登录</a>
         <a href="#">注册</a>
      </div>
    </div>
    <div class="pic">
            <span>热爱生活 享受乐趣</span>
            <span>Love life enjoy the fun.</span>
    </div>
    <div class="body">
        <div class="notice">
            <div>
                <a href="#"> [03-22]用户中心正式上线</a>
                <a href="#"> [12-11]新增个人主页展示，越看越有爱</a>
                <a href="#"> [12-04]觉唯官网新版升级上线</a>
                <a href="#"> [09-01]新增QQ一键登录</a>
                <a href="#"> [11-29]觉唯博客主题发布1.3版本</a>
            </div>
        </div>
        <div  class="lunbo">
            <ul id="list">
                <li><img src="img/素材1.jpg"></li>
                <li><img src="img/素材2.jpg"></li>
                <li><img src="img/素材3.jpg"></li>
                <li><img src="img/素材4.jpg"></li>
                <li><img src="img/素材5.jpg"></li>
            </ul>
            <span class="left"><</span>
            <span class="right">></span>
            <p id="list-dot">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </p>
        </div>
        <div class="cool">
            <div class="list">
                <ul>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品2.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-03-01</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                    <li>
                        <div>
                            <div class="img">
                                <img src="img/作品1.jpg">
                                <div class="header">
                                    <span>交互设计</span>
                                    <span>6037</span>
                                </div>
                            </div>
                            <a href="#">翻页动画书写小人书趣味连环画 手翻书互动</a>
                        </div>
                        <p><span>2021-05-21</span></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        //找对象
        var list=document.getElementById("list");
        var listdot=document.getElementById("list-dot");
        var lunbo=document.getElementsByClassName("lunbo")[0];
        var left=document.getElementsByClassName("left")[0];
        var right=document.getElementsByClassName("right")[0];
        //清空对象
        list.innerHTML="";
        listdot.innerHTML="";
        //准备数组
        var imgs=["素材1.jpg","素材2.jpg","素材3.jpg","素材4.jpg","素材5.jpg"];
        //动态生成
        for(var i in imgs){
            //循环一次生成一个点加图片
            //先生成li
            var li=document.createElement("li");
            var img=document.createElement("img");
            img.src = "./img/"+imgs[i];
            //将图片放进li
            li.appendChild(img);
            //生成点
            var dot=document.createElement("span");
            //将li追加到list
            list.appendChild(li);
            //将点追加到listdot
            listdot.appendChild(dot);
        }
        //先初始化一个下标
        var imgindex=0;
        //先找到所有的li
        li=list.getElementsByTagName("li");
        //定时器
        var timer;
        //启动的函数
        function start(){
            timer=setInterval(function (){
                //然后将所有的z-index还原
                for(var i=0;i<li.length;i++){
                    li[i].style.zIndex=9;
                }
                //然后通过下标去找到应该要显示的li
                li[imgindex].style.zIndex=10;
                imgindex++;
                if(imgindex==li.length){
                    imgindex=0;
                }
            },1000);
        }
        //先启动一次
        start();
        //鼠标悬停，停止；鼠标移开，移动
        lunbo.οnmοuseοver=function (){
            clearTimeout(timer);
        }
        lunbo.οnmοuseοut=function (){
            start();
        }
        //左右切换
        //本质是imgIndex的变化
        right.οnclick=function(){
            imgindex++;
            if(imgindex==li.length){
                imgindex=0;
            }
            //然后将所有的z-index还原
            for(var i=0;i<li.length;i++){
                li[i].style.zIndex=9;
            }
            //然后通过下标去找到应该要显示的li
            li[imgindex].style.zIndex=10;
        };
        left.οnclick=function(){
            imgindex--;
            if(imgindex==0){
                imgindex=li.length;
            }
            //然后将所有的z-index还原
            for(var i=0;i<li.length;i++){
                li[i].style.zIndex=9;
            }
            //然后通过下标去找到应该要显示的li
            li[imgindex].style.zIndex=10;
        };
    </script>
</body>
</html>

body.css:

.body{
    width:100%;
    background-color: white;
    height:1000px;
    /*设置定位*/
    position:relative;
    /*利用层级关系,对有position属性的才有用*/
    z-index:50;
    margin-top:250px;
}
/*公告部分*/
.body .notice{
    width:100%;
    height:60px;
    background-color:#f1f1f1;
}
.body .notice div{
    width:1260px;
    height:60px;
    margin:0 auto;
    line-height:60px;
}
.body .notice div a{
    font-size:14px;
    text-decoration:none;
    margin-right:30px;
    color:gray;
}
.body .notice div a:hover{
    text-decoration:underline;
    color:#00c3b6;
}
/*中间列表部分*/
.body .cool{
    width:100%;
    height:900px;
    background-color: #f1f1f1;
}
.body .cool .list{
    width:1260px;
    height:910px;
    margin:0 auto;
}
/*中间的列表*/
.body .cool .list ul{
    list-style: none;
}
.body .cool .list ul li{
    width:300px;
    height:259px;
    margin-top:30px;
    background-color: white;
    overflow: hidden;
    float:left
}
.body .cool .list ul li div{
    width:280px;
    height:214px;
    border:1px solid lightgray;
    margin:0 auto;
    cursor: pointer;
}
.body .cool .list ul li>div .img{
    width:280px;
    height:180px;
    position: relative;
}
.body .cool .list ul li>div .img .header {
    width:280px;
    height:34px;
    line-height: 34px;
    background-color: black;
    position: absolute;
    top:-34px;
    transition: all 0.5s;
}
.body .cool .list ul li>div .img:hover img{
    top:20px;
}
.body .cool .list ul li>div .img img{
    position: absolute;
    top:0;
    transition: 0.5s;
}
.body .cool .list ul li>div .img:hover .header{
    top:0;
}
.body .cool .list ul li>div .img .header span{
    color: white;
    font-size: 13px;
    margin-left: 10px;
}
.body .cool .list ul li>div .img .header span:last-child{
    float:right;
    margin-right: 10px;
}
.body .cool .list ul li>div>a{
    display:inline-block;
    height:32px;
    line-height: 32px;
    font-size: 12px;
    text-decoration: none;
    color:gray;
    margin-left: 10px;
}
.body .cool .list ul li>div:hover a{
    color:aqua;
}
.body .cool .list ul li>p{
    height:32px;
    line-height: 32px;
    font-size: 13px;
    padding-left:15px;
}

header.css:

/*页面初始化*/
*{
    margin:0;
    padding:0;
}
/*头部*/
.header{
    height:62px;
    width:100%;
    background:black;
    /*利用定位*/
    position:fixed;
    top:0;
    /*利用层级关系*/
    z-index: 99;
}
/*三个都得浮动才能一起浮动*/
.header .logo{
    float:left;
    width:300px;
    padding-left: 100px;
}
.header .logo img{
    height:62px;
    width:230px;
}
.header .content{
    width:800px;
    height:62px;
    margin:0 auto;
}
.header .content>ul>li{
    list-style:none;
    float:left;
    width:48px;
    height:62px;
    text-align:center;
    line-height:62px;
    margin-left:50px;
}
.header .content>ul>li>a{
    text-decoration:none;
    color:white;
    /*延迟变化 transition*/
    transition:all 1s;
}
.header .content>ul>li:hover>a{
    color:gray;
}
/*父级设置相对定位*/
.header .content>ul .more{
    position:relative;
}
/*子级设置绝对定位*/
.header .content>ul .more ul{
    position:absolute;
    left:-15px;
    display:none;
}
.header .content>ul .more:hover ul{
    display:block;
}
.header .content>ul .more ul li{
    list-style:none;
    width:80px;
    height:62px;
    line-height:62px;
    background-color:black;
    /*外边距为负：margin-left:-30px;*/
    transition:all 1s;
}
.header .content>ul .more ul li a{
    text-decoration:none;
    color:white;
    font-size:10px;
}
.header .content>ul .more ul li:hover{
    background-color:gray;
    cursor:pointer;
}
.header .content>ul .more ul li:hover a{
    color:deepskyblue;
}
.header .content{
    float:left;
}
.header .right{
    float:right;
    width:115px;
    height:62px;
}
.header .right a{
    text-decoration:none;
    height:62px;
    width:54px;
    line-height:62px;
    text-align:center;
    color:white;
    background-color:rgba(255,255,255,0.5);
    font-size:14px;
    transition:all 1s;
}
.header .right a:hover{
    color:gray;
}
/*边框圆角*/
.header .right a:first-child{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.header .right a:last-child{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
.pic{
    width:100%;
    height:250px;
    background-image:url("../img/背景1.jpg");
    /*背景大小自适应*/
    background-size:cover;
    /*解决盒子模型溢出*/
    overflow:hidden;
    /*利用定位 固定fixed*/
    position:fixed;
    top:0;
    /*利用层级关系*/
    z-index: 1;
}
.pic span{
    display:block;
    color:white;
    text-align:center;
}
.pic span:first-child{
    width:200px;
    height:30px;
    font-size:20px;
    font-weight: 600;
    text-align:center;
    margin: 0 auto;
    margin-top:90px;
}
.pic span:last-child{
    width:150px;
    height:15px;
    font-size:10px;
    text-align:center;
    margin: 0 auto;
    background-color:rgba(255,255,255,0.5);
}s
四 over(有关后端的会在之后发出)

网安小白(web渗透阶段)

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
一个简单的web前端网站(不涉及后端)

翻页动画书写小人书趣味连环画手翻书互动</a><a href="#">翻页动画书写小人书趣味连环画手翻书互动</a><a href="#">翻页动画书写小人书趣味连环画手翻书互动</a><a href="#">翻页动画书写小人书趣味连环画手翻书互动</a><a href="#">翻页动画书写小人书趣味连环画手翻书互动
复制链接

扫一扫