web期末自选2 天气之子网站

最新推荐文章于 2024-01-19 14:00:00 发布

你的负卿是我

最新推荐文章于 2024-01-19 14:00:00 发布

阅读量1.1k

点赞数 5

分类专栏： web前端文章标签： javascript jquery css css3 html5

本文链接：https://blog.csdn.net/weixin_43909373/article/details/108133151

版权

web前端专栏收录该内容

17 篇文章 10 订阅

订阅专栏

web期末自选2 天气之子网站

登陆界面

在这里插入图片描述

<!DOCTYPE html>
<html>
	<frameset cols="0%,100%">
	<frame src="music.html"/>
    <frame src="login.html" />
</frameset>

</html>

主页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMV</title>
    <style type="text/css">
        *{
            width: 800px;
            height: 560px;
            margin:0 auto;
        }
        body{
            background: url('images/222bj.jpg') center top no-repeat;
        }
        #main{
            display: block;
        }
        #main a{
            color: white;
            font-size: 20px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id=main>
    <video src="flash/111.mp4" controls="controls" autoplay="autoplay" >
        your browsider does not support the video tag
    </video>
    <a href="222.html">【回城】</a>
    
    </div>
</body>
</html>

分页人物介绍

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>introduce</title>
    <style type="text/css">
    *{margin:0 auto; 
        padding:0 auto;
    }
    body{
        background: url("images/222bj.jpg") center top no-repeat;
    }
    a{
            color: white;
            font-size: 20px;
            text-decoration: none;
        }
    #p1{
        margin-top: 30px;
        margin-left: 250px;
        background:rgba(0, 0, 0, 0.5) ;
        width: 500px;
        height: 200px;
    }
    #p1 #pic1{
        float: left;
        padding-top:40px;
    }
    #p1 #pic1 h1{
        font-size:25px;
        white-space: pre;
        color: white;
        
    }
    #p1 #word1{
        color:white;
        font-size: 12px;
        white-space: pre;
    }
    #p2{
        margin-top: -200px;
        margin-left:900px;
        background:rgba(0, 0, 0, 0.5) ;
        width: 500px;
        height: 200px;
    }
    #p2 #pic2{
        float: left;
        padding-top:40px;
    }
    #p2 #pic2 h1{
        font-size:25px;
        white-space: pre;
        color: white;
        
    }
    #p2 #word2{
        color:white;
        font-size: 12px;
        white-space: pre;
    }
    #p3{
        margin-top: 50px;
        margin-left: 100px;
        background:rgba(0, 0, 0, 0.5) ;
        width: 500px;
        height: 200px;
    }
    #p3 #pic3{
        float: left;
        padding-top:40px;
    }
    #p3 #pic3 h1{
        font-size:25px;
        white-space: pre;
        color: white;
        
    }
    #p3 #word3{
        color:white;
        font-size: 12px;
        white-space: pre;
    }
    #p4{
        margin-top: -200px;
        margin-left: 700px;
        background:rgba(0, 0, 0, 0.5) ;
        width: 500px;
        height: 200px;
    }
    #p4 #pic4{
        float: left;
        padding-top:40px;
    }
    #p4 #pic4 h1{
        font-size:25px;
        white-space: pre;
        color: white;
        
    }
    #p4 #word4{
        color:white;
        font-size: 12px;
        white-space: pre;
    }
    #p5{
        margin-top: 50px;
        margin-left: 100px;
        background:rgba(0, 0, 0, 0.5) ;
        width: 360px;
        height: 200px;
    }
    #p5 #pic5{
        float: left;
        padding-top:40px;
    }
    #p5 #pic5 h1{
        font-size:25px;
        white-space: pre;
        color: white;
        
    }
    #p5 #word5{
        color:white;
        font-size: 12px;
        white-space: pre;
    }
    #p6{
        margin-top: -220px;
        margin-left: 650px;
        background:rgba(0, 0, 0, 0.5) ;
        width: 800px;
        height: 240px;
    }
    #p6 #pic6{
        float: left;
        padding-top:40px;
    }
    #p6 #pic6 h1{
        font-size:25px;
        white-space: pre;
        color: white;
        
    }
    #p6 #word6{
        color:white;
        font-size: 12px;
        white-space: pre;
    }

    </style>
</head>
<body>
    <a href="222.html">【回城】</a>
    <div id="container">
        <div id="p1">
            <div id="pic1">
             <img src="images/p1.jpg" alt="">
             <h1>    天野阳菜</h1>
             </div>
             <div id="word1">
                 <h2><br>   配音：森七菜（日语）；杨鸣（普通话）<br><br>  阳菜似乎可以控制天气，当她祈祷时雨就停<br>  了，随着她合拢的双手，雨水就会被吸回天<br>  空。在城市的一角， 帆高与阳菜相遇了。
                </h2>
             </div> 
        </div>
        <div id="p2">
            <div id="pic2">
             <img src="images/p2.jpg" alt="">
             <h1>    森岛帆高</h1>
             </div>
             <div id="word2">
                 <h2>   配音：醍醐虎汰朗(日语）；高晗（普通话）<br><br>  一个为了追逐光芒而离开偏远岛屿家乡的高<br>  中生。他离开了岛上的家，来到东京，找到<br>  一份在超自然现象杂志出版社的工作。但自<br>  从他参加新工作以来，天气一直很糟，每天<br>  都下雨。
                </h2>
             </div> 
        </div>
        <div id="p3">
            <div id="pic3">
             <img src="images/p3.jpg" alt="">
             <h1>    天野凪</h1>
             </div>
             <div id="word3">
                 <h2> 配音：吉柳咲良（日语）；吴刚圳（普通话）<br><br>  阳菜的弟弟，小学四年级学生。因让森岛帆<br>  高认清对自己姐姐天野阳菜的爱慕，故被帆<br>  高尊称为“前辈”。虽然才是小学生，但是言<br>  行举止很成熟，很受女孩子欢迎。
                </h2>
             </div> 
        </div>
        <div id="p4">
            <div id="pic4">
             <img src="images/p4.jpg" alt="">
             <h1>    须贺夏美</h1>
             </div>
             <div id="word4">
                 <h2>    配音：本田翼(日语）；牟珈论（普通话)<br><br>       一边在须贺事务所工作、一边在外面<br>       奔走采访的女大学生。<br>       须贺圭介的侄女
                </h2>
             </div> 
        </div>
        <div id="p5">
            <div id="pic5">
             <img src="images/p5.jpg" alt="">
             <h1>    须贺圭介</h1>
             </div>
             <div id="word5">
                 <h2>    配音：小栗旬（日语）<br>    孟令军（普通话）<br><br>  作家。<br>  雇佣了帆高，二人相遇<br>  于开往东京的船上。
                </h2>
             </div> 
        </div>

        <div id="p6">
            <div id="pic6">
            <img src="images/p6.jpg" alt="">
             <h1>    剧情简介</h1>
             </div>
             <div id="word6">
                 <h2>   “想尝试前往，那道光芒之中”。<br>    高中一年级的夏天，从离岛离家出走，来到东京的帆高。但是他的生活立马变得<br>    穷困，在度过孤独的每一天之后终于找到的工作，是为古怪的超自然杂志撰稿。<br>    如同预示着他接下来的命运一般，连日不断地下雨。此时，在人潮熙熙攘攘的都<br>    市一角，帆高遇到了一位少女。由于某些缘故，少女·阳菜和弟弟两人一起坚强生<br>    活。而她，拥有不可思议的能力。<br>    “呐，现在开始就要放晴了哦”。雨逐渐停止，街道笼罩在美丽的光芒中。那是仅<br>    仅在心中祈祷，就能让天空放晴的力量。
                </h2>
             </div> 
        </div>
        
    </div>
    

    
</body>
</html>
<head>

AWV页面

在这里插入图片描述

部分css

*{
    margin:0 auto;
    padding: 0 auto;
}

#container{
    width: 300px;
    height: 300px;
    margin:200px auto;
}

#box{
    width:300px;
    height:300px;
    position: relative;
    transform-style: preserve-3d;
    /*transform: rotateX(45deg) rotateY(45deg);*/
    animation: ro 4s linear infinite;
}

.box-page{
    width: 300px;
    height: 300px; 
    position: absolute;
}

.top{
    /* background-color:red; */
    transform: translateZ(150px);
}

.bottom{
    /* background-color:green; */
    transform: translateZ(-150px) rotateX(180deg);
}

.left{
    /* background-color: orange; */
    transform: translateX(-150px) rotateY(-90deg);
}

.right{
    /* background-color: pink; */
    transform: translateX(150px) rotateY(90deg) ;
}

.before{
    /* background-color: blue; */
    transform: translateY(150px) rotateX(-90deg);
}

.after{
    /* background-color: yellow; */
    transform: translateY(-150px) rotateX(90deg);
}

@keyframes ro {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

@keyframes al {
    0% {
        transform: translateZ(0px) scale(1) rotateZ(0deg);
    }
    25% {
        transform: translateZ(300px) scale(0) rotateZ(720deg);
    }
    50% {
        transform: translateZ(300px) scale(1) rotateZ(720deg);
    }
    100% {
        transform: translateZ(0px) scale(1) rotateZ(0deg);
    }
}

.box-page :nth-child(1) {
    animation: al 4.5s ease-in;
}

.box-page :nth-child(2) {
    animation: even 4.5s ease-in 0.5s;
}

body{
    background: url('../images/bizhi.jpg');
}
h1{
    font-size: 30px;
    color: white;
    text-align: center;
}

#login-box{
    width:30%;
    height:280px;
    margin: 0 auto;
    margin-top: 15%;
    text-align: center;
    background: #274384;
    background: rgba(0, 0, 0, 0.5);
    padding:  20px 50px;
}

#login-box .form{
    margin-top: 50px;
}

#login-box .form .item{
    margin-top: 15px;
}

#login-box .form .item input{
    width:180px;
    font-size: 18px;
    border:0;
    border-bottom: 2px solid black;
    padding: 5px 10px;
    background: white;
    color: black;
}


#login-box  button {
    margin-top: 15px;
    width: 150px;
    height: 30px;
}


#login-box  button a{
    color: black;
    text-decoration: none;
}```


```css
body {
  background-color: #f1febe;
  margin: 0 auto;
  color: #000;
  font-size: 14px;
}

#container {
  margin: 0 auto;
  width: 900px;
}

#top{
  line-height: 30px;
  height: 40px;
  background-color: black;
}

#top a {
  color: white;
  text-decoration: none;
  font-size: 30px;
  font-family:"楷体" ;
  white-space: pre;
}

#top li {
  list-style-type: none;
  float: left;
  width: 900px;
  height: 30px;
  line-height: 30px;
  margin-left: 30px;
  position: relative;
  left: -15px;
}

#header {
  width: 900px;
  height: 246px;
  background-color: #fff;
}

#nav {
  margin-top: 5px;
  width: 900px;
  height: 30px;
  background-color: black;
}

#nav ul {
  margin: 0;
}


#nav li {
  list-style-type: none;
  float: left;
  width: auto;
  height: 30px;
  line-height: 30px;
  margin-left: 30px;
  position: relative;
  left: -30px;
}

#nav a {
  text-decoration: none;
  color: yellow;
}

#nav a:hover {
  color: yellow;
  text-decoration: underline;
}



#main {
  width: 900px;
  height: 800px;
  margin-top: 5px;
  background-color: #2f3438;
}

#main span {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  width: 900px;
  text-align: center;
}

#main-left {
  float: left;
  width: 500px;
  height: 325px;
}

#main-left video {
  margin-left: 5px;
  width: 450px;
  height: 280px;
}

#main-right {
  float: left;
  width: 400px;
  height: 325px;
}

#name1 a{
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  color: white;
  float: right;
  width: 380px;
  height: 40px;
  line-height: 40px;
  background-color:#2f3438;
  background-repeat: no-repeat;
}

#content {
  float: left;
  width: 365px;
  height: 285px;
  padding-left: 35px;
  line-height: 26px;
}

#content span {
  display: inline;
  font-weight: bold;
}

#introduct {
  padding-right: 15px;
  width: 350px;
  text-align: right;
}

#introduct a {
  color: blue;
  font-weight: normal;
  text-decoration: none;
}

#footer {
  background-color: #e2697a;
  margin-top: 5px;
}

#footer span {
  text-align: center;
  display: inline-block;
  width: 900px;
  height: 25px;
  line-height: 25px;
}

#footer a {
  color: white;
  font-size: 16px;
  line-height: 25px;
  text-decoration: none;
  white-space: pre;
}

你的负卿是我

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
web期末自选2 天气之子网站

web期末自选2 天气之子网站登陆界面<!DOCTYPE html><html> <frameset cols="0%,100%"> <frame src="music.html"/> <frame src="login.html" /></frameset></html>主页<!DOCTYPE html><html lang="en"><head&
复制链接

扫一扫