首页 > > 网页制作 > css >

新建一个页面

2018-06-24 01:56:54来源：未知阅读 ()

今天我刚好要做一个单页面来展示某些东西。

就一起来看看吧，初学者写的不好请自闭双眼。

先上代码吧，大家看看有什么需要修改的地方。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>####</title>
  9     <style>
 10         html,
 11         body {
 12             margin: 0;
 13             padding: 0;
 14             height: 100%;
 15             background-image: url(image/######.jpg);
 16             background-size: cover;
 17 
 18         }
 19 
 20         * {
 21             font-family: "Microsoft YaHei";
 22             color: #fff;
 23         }
 24 
 25         .bg {
 26             height: 100%;
 27             background-color: rgba(0, 0, 0, 0.795);
 28             position: relative;
 29 
 30         }
 31 
 32         .tongzhi {
 33             height: 65%;
 34             width: 25%;
 35             border-width: 20px;
 36             border-radius: 5px;
 37             box-shadow: 0px 0px 20px rgb(121, 119, 119);
 38             background-color: rgba(29, 28, 28, 0.8);
 39             position: absolute;
 40             left: 900px;
 41             margin-top: 9%;
 42             float: left;
 43             z-index: 999999;
 44         }
 45 
 46         .title {
 47             width: 100%;
 48             height: 50px;
 49             background-color: #07070f;
 50             border-radius: 5px 5px 0px 0px;
 51             line-height: 50px;
 52             text-align: center;
 53             font-size: 25px;
 54         }
 55 
 56         .wen {
 57             width: 98%;
 58             height: 100%;
 59             margin-left: 3%;
 60         }
 61 
 62         .tupian {
 63             height: 80%;
 64             width: 70%;
 65             /* background-color: #fff; */
 66             position: absolute;
 67             left: 50px;
 68             margin-top: 5%;
 69             background-image: url(image/####.png);
 70             background-size: cover;
 71         }
 72 
 73         .input {
 74             height: 10%;
 75             width: 25%;
 76             position: absolute;
 77             left: 920px;
 78             margin-top: 37%;
 79             border-color: #fff;
 80             cursor: pointer;
 81             z-index: 9999999;
 82         }
 83     </style>
 84 </head>
 85 
 86 <body>
 87     <div class="bg">
 88         <div class="tongzhi">
 89             <div class="title">#####</div>
 90             <div class="wen">
 91                 <p>################################</p>
 92             </div>
 93         </div>
 94 
 95         <div class="tupian"></div>
 96         <a href="#">
 97             <div class="input" id="inputid">
 98                 <img src="image/#.png" />
 99             </div>
100         </a>
101     </div>
102 </body>
103 
104 </html>