自己写的页面记录一下成长吧

最新推荐文章于 2024-07-19 23:42:48 发布

a1255468

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量68

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/a1255468/article/details/124157469

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <link type="text/css" href="index.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"  type="text/css" >
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css" type="text/css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css"  >
</head>
<body>
<div id="header">
    <p ><em><img src="picture/图片.jpeg" width="140px" height="50px">飞特总后台</em></p>
    <li id="header-one">
        <a href="#"><span><a href="#"><i class= "fa fa-weixin system"></i></span></a>会飞的猴子</li>
    <li class="header-two"> <span ><a href="#"><i class="  fa fa-archive system"></i>菲特管理后台</a></span></li>
    <li class="header-three"><span ><a href="#"><i class="fa fa-flag system"></i>修改密码</a></span></li>
    <li class="header-four"><span ><a href="#"><i class="fa fa-send system"></i>退出系统</a></span></li>

</div>
<div id="aside-section">
    <div id="aside-ul">
        <ul class="aside-li">
            <a href="#"  target="myiframe">第一章</a>
            <ul>
                <li class="aside-li-ul">
                    <a href="part/part1.html" alt="互联" target="myiframe">互联</a>
                </li>
                <li class="aside-li-ul">
                    <a href="part/part3.html" alt="邮箱" target="myiframe">邮箱</a>
                </li >
                <li class="aside-li-ul" >
                    <a href="part/part4.html"  alt="书单" target="myiframe">书单</a>
                </li>
                <li class="aside-li-ul">
                    <a href="part/摇晃的桃子.html"   alt="shake" target="myiframe">shake</a>
                </li>
            </ul>


            <a href="#"  target="myiframe">第二章</a>
            <ul>
                <li class="aside-li-ul">
                    <a href="part/图形变换.html" alt="图变" target="myiframe">图变</a>
                </li>

            </ul>
            <li> <a href="part/part4.html"  target="myiframe" style="text-decoration:none">第三章</a> </li>
            <li><a href="#">第四章</a></li>
            <li><a href="#">第五章</a></li>
            <li><a href="#">第六章</a></li>
        </ul>
    </div>
</div>
<section id="in-all" >
    <iframe   name ="myiframe"   id="in-my"  >
        <p></p>
    </iframe>
</section>
</div>
<div id="footer">
    <marquee text-algin="center"> @copy by Mr wang 版权所有请勿抄袭    </marquee>
</div>
</body>
</html>

css:

li {
    display: inline;
    list-style:none;
    margin-top: 10px;
}

p{font-size:20px;}

#header{
    width:100%;
    height:50px;
    background-color:gray;
    box-shadow:#41a8ff 0px 5px 5px;
}
#header-one{
    margin-top: -50px;
    float: right;
    margin-right: 500px;
    font-size:20px;
    border-color:#2bad79;

}
.header-two{
    margin-top: -50px;
    float: right;
    margin-right: 300px;
    font-size:20px;
}
.header-three{
    margin-top: -50px;
    float: right;
    margin-right: 150px;
    font-size:20px;
}
.header-four{
    margin-top: -50px;
    float: right;
    margin-right: 0px;
    font-size:20px;
}
#aside-section{
    border-top:solid 2px rgb(0,151,136);
    border-right:solid 2px rgb(0,151,136);
    border-right:black;
    width:10%;
    height:800px;
    overflow-x:scroll;
    overflow-y:scroll;
    font-size:larger;
    background-color:black;

}
#aside-ul a:hover{
    color:green;
    background-collor:#2bad79;
}

#aside-ul{
    text-algin:left;

}
#aside-ul a {

    display: block;
    text-align: center;
    margin-left: -30px;
    text-align: center;
    padding-top: 20px;
    positin: absolute;
}
.aside-li{

    position: absolute;

    color:green;
    margin-left:30px;
    padding-top:20px;
}
.aside-li:hover .aside-li-ul{
    display:block;}
.aside-li-ul{display:none;
    text-align:center;


    background:rgba(180,60,30,0.3);
    display: none;!important;}

#in-all{
    float:right;
    position:relative;
    margin-top:-800px;
    margin-left:-10%;
    width:90%;
    height:800px;
}
#in-my{
    width:100%;
    overflow-x:scroll;
    height:800px;

}


.system{-webkit-animal-duration:1.5s;}
.system{-webkit-animation-iteration-count:infinite;
    -webkit-animation-name: shake;
    -webkit-animation-timing-function: ease-in-out;}
@-webkit-keyframes shake{
    0% {
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: 50% 0; /*摇晃的角度*/
    }
    25% {
        -webkit-transform: rotate(10deg);
        -webkit-transform-origin: 50% 0; /*摇晃的角度*/
    }
    50% {
        -webkit-transform: rotate(180deg);
        -webkit-transform-origin: 50% 0; /*摇晃的角度*/
    }
    75% {
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: 50% 0; /*摇晃的角度*/
    }

    100% {
        -webkit-transform: rotate(-180deg);
        -webkit-transform-origin: 50% 0; /*摇晃的角度*/
    }
}(还有许多自己写的子页面还没有上传，有机会再传吧）

a1255468

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己写的页面记录一下成长吧

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML</title> <link type="text/css" href="index.css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.c.
复制链接

扫一扫