HTML - 辰逸1 - 博客园

今天完成了三个界面的设置，但最后一个界面没有达到预想的效果（文字没有浮于图片上而是浮在图片下面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style type="text/css">
        *  {margin:0;padding:0;}
           body{color:blue;}
          .content{
              background-color:yellow;
            
            left:0;
             width:100%;
             height:400px;
             margin-top:0px;
            overflow:hidden;
         }
         .main{
            text-align:center;
             max-width:600px;
             height:400px;
             padding:100px 0px;
             background:yellow;
            margin:0 auto;
         }
         .main h1{
             background-color:pink;
             font-family:"黑体";/*设置字体*/
             font-size:70px;/*设置字体大小*/
             font-weight:2px;
        }
         form{
             padding:20px 0;
         }
         form input{
             border:1px solid white;
             display:block;
             margin:0px auto 10px auto;/*上 右  下 左*/
             padding:10px;
             width:220px;
             border-radius:30px;/*H5设置圆角边框*/
             font-size:18px;
             font-weight:300;
             text-align:center;
         }
         form input:hover{
             background-color:#87CEFA;
        }
         form button{
             background-color:white;
             border-radius:10px;
             border:0;
             height:30px;
             width:50px;
             padding:5px 10px;
        }
         form button:hover{
             background-color:brown;
         }
     </style>

</head>
<body>
<div class="content">    
     <div class="main">
         <h1>信息学院</h1>
         <form>
             <input type="text" name="useid" placeholder="请输入账号"/>
             <input type="password" name="pw" placeholder="请输入密码">
            <button type="submit">登&nbsp;&nbsp;录</button>
            <button type="submit">注&nbsp;&nbsp;册</button>
         </form>
     </div>
 </div>    
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <style type="text/css">
  body { 
      margin:0px;padding:0px;
        background-image:url("C:\Users\35458\Desktop\Sublime Text\image\h_bg.jpg");
   }
     .nav li a { padding:8px 15px;}
     .nav li a:link{color:black;}
  .nav li a:hover { color:#ff7300;font-size:20px  ;  }
   #logo {
     width:980px;
     height:150px;
     border:5px solid #666;   
      margin:30px auto; //水平居中
   }
li{
    float:left;
background-color:white;
    width:84px;
    color:black;
   font:10px 黑体加粗;
   float:left;
   line-height:24px;
   margin:10px;
}

    </style>
</head>
<body>
      <div id="logo"><img src="C:\Users\35458\Desktop\Sublime Text\image\h_bg.jpg"alt="logo"/> 
          <div class="nav">

          <ul>
    <li><a href=“#”>首页</a></li>
    <li><a href=“#”>家用电器</a></li>
    <li><a href=“#”>手机数码</a></li>
    <li><a href=“#”>日用百货</a></li>
    <li><a href=“#”>书籍</a></li>
    <li><a href=“#”>帮助中心</a></li>
    <li><a href=“#”>免费开店</a></li>
    <li><a href=“#”>全球咨询</a></li>
</ul></div>
   </div>
</body>
</html>

希望在明天能将这一问题解决了。

posted on 2022-03-07 19:43 辰逸1 阅读(30) 评论(0) 编辑收藏举报