初学html自己做网页玩玩 

 1     <body>
 2         <nav>
 3             <ul class="nav1">
 4             
 5                 <a href="#"><li>开始旅程</li></a>
 6                 <a href="#"><li>音乐旅程</li></a>
 7                 <a href="#"><li>音乐梦想</li></a>
 8                 <a href="#"><li>关于我们</li></a>
 9             </ul>
10             <ul class="nav2">
11                 <a href=""><li>登录</li></a>
12                 <a href=""><li>注册</li></a>
13             
14             </ul>
15             
16         </nav>
17         
18         <div id="box2">
19             <h2>欢迎来到音乐的世界</h2>
20             <p>音乐丰富生活，使人心旷神怡，梦想随着音乐翩翩起舞</p>
21             <p>音乐是一杯清茶,润人心脾;音乐是一片秋叶,撩人乡思;音乐是一缕阳光,暖人 灵魂。</p>
22         </div>
23         
24         <video src="img/1.mp4" type="video/mp4" muted="muted" autoplay="autoplay" loop="loop" class="video-bg">
25  </video>
26             
27         <div class="box3">
28                 <form>
29                             <input type="search" required autofocus id="search1" placeholder="打开音乐的大门~~"/ >
30                             <span></span>
31                             <a href="#"></a>
32                 </form>
33             </div >
34         
35         <div class="box6">
36             <div class="box4">
37                         
38                     |<a href="">音乐</a>|
39                     <a href="">用户服务协议</a> | 
40                     <a href="">隐私政策</a>|
41                     <a href="">账号找回</a>|
42                     <a href="">广告投放</a>|
43                     <a href="">营业执照</a>|
44                 </div>
45                 
46                 <p>2020 © 陈氏  | 京ICP备11117号-3 | 北京陈氏科技有限公司 |  京B2-111116</p>
47                 
48                 <p>
49                     <a href="#">中国互联网举报中心</a>
50                 <span>| 网络文化许可证-京网文-（2016）1112-264号 | 客户服务热线：123-456-789 | 违法和不良信息举报：111-140-2108 | 举报邮箱：jubao@chenshi.com</span>
51                 </p>
52                 
53                 <div class="box5">
54                     <img src="img/2.png" />
55                     <a href="#">京公网安备 11011111115号</a>
56                         |  地址 : 中华人民共和国 
57                 </div></div>
58     </body>

 

 css:

 1 *{margin: 0;padding: 0;}
 2 /* 导航栏*/
 3            nav{
 4                width: 100%;height: 40px;
 5                position: relative;
 6                background-color: rgba(245,245,245,0.3);
 7                overflow: auto;
 8             }
 9             ul{
10                 list-style: none;
11                 line-height: 40px;
12         }
13            ul a{color: floralwhite;}
14             .nav1 li{
15                 float: left;;
16                width: 100px;
17                }
18                .nav2 li{
19                    float: right;
20                width: 60px;}
21                
22       /*文字*/
23            #box2{
24                width: 600px;
25                margin: 0 auto;
26                margin-top: 80px;
27                margin-bottom: 20px;
28                text-align: center;
29                font:normal bold 30px "微软雅黑";
30                    } 
31            #box2 p{
32                font-size: 15px;
33            color: white;
34            font-family: "微软雅黑";
35            margin-top: 20px;
36            }
37            
38 /*视频*/
39  video{
40       position: absolute;
41       right: 0;
42       bottom: 0;
43       min-width: 100%;
44       min-height: 100%;
45       width: 95px;
46       height: auto;
47       z-index: -9999}
48       
49 /*搜索栏*/
50 .box3{
51                width: 100%;
52                height:50px ;
53            
54            }   
55            form {
56             position: relative;
57             width: 600px;
58             margin: 0 auto;
59             background: cornflowerblue;
60                 
61                 
62                 }
63            input {
64             width: 90%;
65             height: 42px;
66             padding-left: 13px;
67             font: normal bold 20px  "微软雅黑";
68            
69         }
70         .box3 form span{
71             position: absolute;
72             top: 12px; right: 0;
73             width:40px;height: 20px;
74             background: url(../img/index.png);
75             background-repeat: no-repeat;}
76             
77              .box3 form a{
78             position: absolute;top: 0;right: 0;
79             width: 58px; height: 38px;}
80             
81 /*底部信息*/
82  .box6{text-align: center;
83              position: fixed;
84              bottom: 0;
85              left: 134px;
86              color: ghostwhite;
87              font: normal bold   "微软雅黑";
88         }
89         .box6 a{
90             text-decoration: none;
91             color: ghostwhite;
92         }
93

 

posted @ 2020-03-30 14:54  陈小歪、  阅读(158)  评论(0)    收藏  举报