导航栏+仿写

最新推荐文章于 2024-09-14 18:52:56 发布
4oiu'
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量161
点赞数 1
文章标签： javascript css 前端
本文链接：https://blog.csdn.net/2402_85149266/article/details/139394770
版权
导航栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
  <style>
    .game{
        width: 600px; 
        height: 35px;
        margin-top: 100px;
        background-color:	rgb(13, 74, 88);	
    }

    ul{
        margin-top: 0px;
        padding-inline-start: 0%;
    }

    .game>ul>li{
        float: left;
        list-style: none; 
        text-align: center; 
        height: 35px;
        line-height: 35px;
        width: 100px;
         font-size: 20px; 
         font-family: 楷体;
    }
    
    .name{
        color:white;
        text-decoration: none;}
    
     ul>li:hover{
        background-color:	pink;	
    }
    
    div{
        border-radius: 20px;
        box-shadow: 10px 10px 10px	grey;	
    }

    span{
        text-shadow: 5px 5px 5px grey;	
    }

</style>
</head>
<body>
    <div class="game">
        <ul>
            <li class="name"><span>游戏1</span></li>
            <li class="name"><span>游戏2</span></li>
            <li class="name"><span>游戏3</span></li>
            <li class="name"><span>游戏4</span></li>
            <li class="name"><span>游戏5</span></li>
            <li class="name"><span>游戏6</span></li>
        </ul>
    </div>
</body>
</html>


页面1
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
    <style>
        body { 
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            font-size: 1;
            font-family: "宋体";
            background-color: white;
        }
 
        a {     
            color: #00c;
            text-decoration: none;
        }
        a:hover{
            color:red;
            text-decoration: underline;
        }
 
   
        #topline {  
            text-align: right;
            font-size:20px;
            margin:10px 10px;
        }
 
     
        #logo {  
            margin-top: 10px;
            text-align: center;
        }
 
        #apps {  
            margin-top: 20px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
        }
 
        #search {
            margin-top: 20px;
            text-align: center;
        }
        #search #enter{  
            width:600px;
            height:30px;
            font-size: 20px;
            font-weight: 400;
            vertical-align: middle;
            border: 1px solid black;
            border-radius: 10px 10px 10px 10px;
        }
        #search #submit{ 
            width:100px;
            height:37px;
            font-size: 20px;
            font-weight: 500; 
            vertical-align: middle;
            cursor: pointer;
            color: white;
            background-color:#3836E0;
            border: 1px solid black;
            border-radius: 10px 10px 10px 10px;
        }
 
       
        #hotnews #title {margin-top: 50px;}
        #hotnews #title a{
            font-size: 20px;
            font-family: Arial Bold;
            font-weight: 900;
            color:black;
            margin-left: 485px;
        }
        #hotnews #hotlist{
            display: flex;
            justify-content: center;
        }
        #hotnews #hotlist ul {
            padding-top: 5px;
            width: 280px;
            display: inline-block;
        }
        #hotnews #hotlist li{
            height: 36px;
            line-height: 36px;
            font-size: 20px;
            text-align: left;
        }
        #hotnews #hotlist a{
            height: 36px;
            line-height: 36px;
            font-size: 20px;
            padding-left: 20px;
        }
    
       
        #bottomline{
            margin-top: 240px;
            position: absolute;
            left: 50%;    
        }
    </style>
</head>
<body>
    <div id="topline">
        <a href="https://www.baidu.com/gaoji/advanced.html">设置</a>
        |
        <a href="https://passport.baidu.com/">登录</a>
    </div>
    <div id="logo">
        <a href="https://www.baidu.com/" target="_blank"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="点此进入百度官网" width="370" height="180"></a>
    </div>
    <div id="apps">
        <a href="http://news.baidu.com/" target="_blank">新闻</a>
        <a href="https://map.baidu.com/" target="_blank">地图</a>
        <a href="http://image.baidu.com/" target="_blank">图片</a>
        <a href="https://haokan.baidu.com/" target="_blank">视频</a>
        <a href="http://tieba.baidu.com/" target="_blank">贴吧</a>
        <a href="https://wenku.baidu.com/" target="_blank">文库</a>
        <a href="https://baike.baidu.com/" target="_blank">百科</a>
        <a href="https://www.baidu.com/more/" target="_blank">更多>></a>
    </div>
    <div id="search">
        <input id="enter" type="text" maxlength="25" value="最多输入20个字"/>
        <input id="submit" type="submit" value="百度一下"/>
    </div>
    <div id="hotnews">
        <div id="title">
            <a href="https://top.baidu.com/" target="_blank">百度热搜></a>
        </div>
        <div id="hotlist">
            <div id="top3">
                <ul>
                    <li id="one">1<a href="" target="_blank">北京申奥成功</a></li>
                    <li id="two">2<a href="" target="_blank">吴亦凡被判入狱</a></li>
                    <li id="three">3<a href="" target="_blank">中大即将迎来100年建校</a></li>
                </ul>
            </div>
            <div id="else">
                <ul> 
                    <li id>4<a href="" target="_blank">骑士抢七大战胜勇士</a></li>
                    <li id>5<a href="" target="_blank">姆巴佩世界杯决赛帽子戏法</a></li>
                    <li id>6<a href="" target="_blank">火影忍者完结</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="bottomline">
        <a href="https://home.baidu.com/" target="_blank">关于百度</a>
         | 
        <a href="https://e.baidu.com/" target="_blank">企业推广</a>
         | 
        <a href="https://www.baidu.com/duty/" target="_blank">使用前必读</a>
         | 
        <a href="https://help.baidu.com/" target="_blank">帮助中心</a>
         | 
        <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">京公网安备11000002000001号</a>
    </div>
</body>
</html>


页面2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1</title>
    <style>
    * {/*全局设置*/
        margin: 0; /*外边距*/
        padding: 0;/*内边距*/
    }
     
    body {
        font-size: 20px;/*文本大小*/
    }
     
    .header{/*顶部设置*/
        height:70px;
        width: 100%;
        background: #eff4fa;
    }
     
    .header img{/*顶部图片设置*/
        height: 50px;
        width:210px;
        margin-left:20px;
        margin-top: 10px;
    }
     
    .header nav{
        font-size:1px;
        color:darkgray;
        margin-top:-35px;
        margin-right: 50px;
        text-align: right;
    }
     
    .header nav a{
        color:blue;
        text-decoration: none;
    }
     
    .header nav a:hover{/*鼠标悬停在a时*/
        text-decoration: underline;/*显示下划线*/
    }
    
    .central{/*中部设置*/
        background-color:white;
        height: 600px;
        width: 1000px;
        margin:auto;
        margin-top:100px; /*边框顶部*/
    }
     
    .central .word{
        float:left;    /*左浮动*/
        margin-left:50px;
        margin-top: 30px;
    }
     
    .central .word h1{
        font-size:25px;
        color:blue;
        margin-bottom:15px;
    }
     
    .central .word p{
        font-size:15px;
        line-height: 25px;/*设置行间距*/
    }
     
    .central img{
        float:left; 
        width: 310px;
        margin-top: 20px;
        margin-right:60px;
    }
     
    .central .logon{/*设置登录边框*/
        float:left;
        margin-top:15px;
        width:320px;
        height:350px;
        border-style: solid;/*设置边框为实线*/
        border-radius: 5px;
        border-width:1px; 
        border-color:gray;
    }
     
    .central .logon .firstpart{/*设置内横线分栏*/
        border-bottom-width: 1px;
        border-bottom-style:solid;
        border-bottom-color:gray;
        height:50px;
        line-height: 50px;
    }
     
    .central .logon ul li{/*设置列表*/
        list-style-type: none;/*对列表元素进行初始化*/
        font-size: 15px;
        display: block;
        height:25px;
        color:gray;
    }
     
    .central .logon ul .wx{/*微信登录*/
        float: left;
        margin-left:50px;
        cursor: pointer;/*鼠标指针变成手的形状*/
    }
     
    .central .logon ul .qq{/*QQ登录*/
        float: right;
        margin-right:50px;
        cursor: pointer;/*鼠标指针变成手的形状*/
        
    }
     
    .central .logon input[type=account]{/*账号输入框*/
        display: inline-block;
        height:18px;
        width:250px;
        padding: 10px;/*设置内边距*/
        margin-top: 30px ;
        margin-left: 25px;
    }
     
    .central .logon input[type=password]{/*密码输入框*/
        display: inline-block;
        height:18px;
        width:250px;
        padding: 10px;/*设置内边距*/
        margin-top: 15px ;
        margin-left: 25px;
    }
     
    .central .logon .checkbox[type=checkbox]{/*选中按钮*/
        float:left;
        height:15px;
        width:15px;
        margin-top:20px;
        margin-left:20px;
        border-width: 1px;
        border-style:solid;
        border-color:blue;
        background:white;
    }
    .central .logon p{/*设置按钮旁字体“ 下次自动登录 ”*/
        margin-top:18px;
        margin-left:3px;
        float:left;
        font-size:5px;
    }
     
    .central .logon .button[type=button]{/*设置登录按钮*/
        height:45px;
        width:260px;
        margin-top: 10px;
        margin-left: -3px;
        background-color: blue;
        text-align: center;
        font-size:10px;
        color:white;
        border-width: 1px;
        border-style:solid;
        border-color:blue;
        cursor: pointer;
    }
     
    .central .logon img{
        height: 25px;
        width: 30px;
        margin-left: 100px;
        margin-right: 0px;
        margin-top:10px;
        float:center;
    }
     
    .central .logon .codeword {
        margin-top:15px;
        margin-bottom:5px;
        margin-left:3px;
        float:center;
        color: blue;
        font-size:5px;
    }
     
    .central .logon .codeword a{
        text-decoration: none;
    }
     
    .central .logon .codeword a:hover{/*鼠标悬停在a时*/
        text-decoration: underline;/*显示下划线*/
    }
     
    .central .logon .FogretPassword{/*忘了密码?*/
        float:left;
        color:blue;
        font-size:3px;
        margin-left:15px;
        margin-top:20px;
    }
     
    .central .logon .NewAccount{/*注册新账号*/
        float:right;
        color:blue;
        font-size:3px;
        margin-right:15px;
        margin-top:20px;
    }
     
    .central .logon a{/*链接*/
        text-decoration: none;
    }
     
    .central .logon a:hover{/*鼠标悬停在a时*/
        text-decoration: underline;/*显示下划线*/
    }
     
    .footer{/* 底部设置*/
        background: #eff4fa;
        bottom: 0;/*设置此部分据屏幕下边距距离为0*/
        height:40px;
        width: 100%; /* 也可将此处换为“right:0; ”*/
        text-align: center;
        position: fixed;/*相对于视图窗口定位 */
    }
     
    .footer nav {
        font-size:1px;
        color:darkgray;
        margin-top:8px;
        text-align: center;
    }
     
    .footer nav a{
        color:blue;
        text-decoration: none;
    }
     
    .footer nav a:hover{/*鼠标悬停在a时*/
        text-decoration: underline;/*显示下划线*/
    }
    </style>
</head>
 
<body>
    <div class="header">
        <a href=""><img src="./左上图1.jpg"></a>
        <nav> 
            <a href="">基本版</a> |  
            <a href="">English</a> | 
            <a href="">手机版</a> | 
            <a href="">企业邮箱</a>
        </nav>
    </div>
        
    <div class="central">
        <div class="word"><!--中部左文字-->
            <h1>QQ邮箱,常联系！</h1>
            <p>2500年前,人们飞鸽传书</p>
            <p>185年前，莫尔斯发明了电报</p>
            <p>52年前,第一封电子邮件发出</p>
            <p>今天,QQ邮箱联系你、我、他</p>
        </div>
 
        <img src="./中间图.jpg"  /><!--中部中图片-->
        
        <div class="logon"><!--中部右登录框-->
            <div class="firstpart">
                <ul>
                    <li class="wx">微信登录</li>
                    <li class="qq">QQ登录</li>
                </ul>    
            </div>
            <input type="account" placeholder="支持QQ号/邮箱/手机号登录"/> 
            <input type="password" placeholder="QQ密码"/>
            <input type="checkbox" class="checkbox" /> <!--设置“下次自动登录左边按钮”-->
            <p>下次自动登录</p>
            <input type="button" class="button" value="登&nbsp;录" />
            <a href=""><img src="./二维码图.jpg" /></a>
            <div class="codeword">
                <a href="">扫码快捷登录</a>
            </div>
            <a href="" class="FogretPassword">忘了密码？</a>
            <a href="" class="NewAccount">注册新账号</a>
        </div>
    </div>
 
        
    <div class="footer">
        <nav>
            <a href="">关于腾讯</a> | 
            <a href="">服务条款</a> |
            <a href="">隐私政策</a> |
            <a href="">客服中心</a> |
            <a href="">联系我们</a> | 
            <a href="">帮助中心</a> | 
            ©1998 - 2021 Tencent Inc. All Rights Reserved.
        </nav>
    </div>
 
</body>
 
</html>

页面3
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
*{ 
    padding: 0;
    margin: 0;
} 

.div,span{
    color:white;
}

.box{
    color: #fff;
    width: 100%;
    height: 1000px; 
    background-image: url(./img/back.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.head{
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 60px;
    border-bottom: 1px solid white(0,0,100);
}

.head .headLeft{
    width: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.head .headLeft  span{
    cursor: pointer;
}

.head .headLeft span:hover{
    color: #09f;
}

.head .headLeft .logoBox{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
.head .headLeft .logoBox .logo{
    width: 24px;
    height: 24px;
}


.head .headRight{
    width: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.head .headRight span{
    cursor: pointer;
}
.head .headRight span:hover{
    color: #09f;
}


.main{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 622px;
}
.main p{
    font-weight: 600;
    font-size: 28px;
}
.main span{
    color: #09f;
    font-size: 14px;
}


.footer{
    width: 1000px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 100px;
}
.footer .item{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.footer .item img{
    width: 32px;
    height: 32px;
    margin-right: 8px;
}
.footer .item span{
    font-weight: 400;
    font-size: 24px;
}

.footer .columnLine{
    width: 1.7px;
    height: 29px;
    background-color: #fff;
}


.box2{
    color: #fff;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.leftBox2{
    display: flex;
    flex-direction: column;
    margin-right: 180px;
}
.leftBox2 .xin{
    width: 219.22px;
    height: 104.39px;
    margin-bottom: 30px
}
.leftBox2 .yuYue{
    width: 164.41px;
    height: 52.19px; 
}

.rightVideo{
    width: 627px;
    height: 353px;
    border-radius: 10px;
}
    </style>
</head>
<body>
  <div class="box">
        <div class="head">
            <div class="headLeft">
                <span class="logoBox">
                    <img class="logo" src="./img/logo.png" />
                    <span>QQ</span>
                </span>
                <span>首页</span>
                <span>下载</span>
            </div>
            <div class="headRight">
                <span>QQ会员</span>
                <span>QQ安全</span>
                <span>登陆</span>
            </div>
        </div>
        <div class="main">
            <p>看看QQ有什么新鲜事</p>
            <span>查看详情 </span>
        </div>
        <div class="footer">
            
            <div class="item">
                <img src="./img/apple.png" />
                <span>IOS</span>
            </div>
            <div class="columnLine"></div>
            
            <div class="item">
                <img src="./img/android.png" />
                <span>Android</span>
            </div>
            <div class="columnLine"></div>
            
            <div class="item">
                <img src="./img/window.png" />
                <span>Windows</span>
            </div>
            <div class="columnLine"></div>
           
            <div class="item">
                <img src="./img/linux.png" />
                <span>Linux</span>
            </div>
            <div class="columnLine"></div>
            
            <div class="item">
                <img src="./img/apple.png" />
                <span>masOS</span>
            </div>
        </div>
    </div>


    <div class="box2">
        
        <div class="leftBox2">
            <img class="xin" src="./img/box2Xin.png" alt="">
            <img class="yuYue" src="./img/box2YuYue.png" alt="">
        </div>
        
        <video controls class="rightVideo">
            <source src="./img/qqVideo.mp4" type="video/mp4" />
        </video>
    </div>
</body>
</html>