项目作业：来指点迷津

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>position-static</title>
    <link rel="stylesheet" href="./reset.css"> 
<style type="text/css">
   .header{
    width: 100%
    height:100px;
    background-color: #07cbc9;
    color:white;
    overflow:hidden;

   }
   .header .a{
    float:left;
    font-size: 20px;
    margin-left:50px;
    margin-top:30px;
   }
   .header .b{
    float:right;
    font-size: 10px
    font-weight:bold;
    margin-bottom:15px;
    margin-right:50px;
   }
   .header .b ul li{
    float:left;
    list-style:none;
    padding:20px;
    text-align:center;
    
    
   }
   
   .banner .bbanner .cbanner{
    margin:auto auto;
    margin-top:300px;
    left:0;
    
    
   
   }
   .banner .abanner img{
       position:absolute;
       width:100%;
       height:600px;
   }
</style>
</head>
<body>
   <div class="header">
     <div class="a">Career Builder</div>
     <div class="b">
       <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>GALLERY</li>
        <li>FACULTY</li>
        <li>EVENTS</li>
        <li>CONTACT</li>
       </ul>
     </div>
   </div>
   <div class="banner">
     <div class="abanner">
       <img src="D:\UsersData\0200036\桌面\images\banner3.jpg">
       <div class="bbanner">
        <table  class="cbanner">
         <tr>
           <td> <input type="text" placeholder="your Name"></td>
         </tr>
         <tr>
           <td> <input type="text" placeholder="your Phone"></td>
         </tr>
         <tr>
           <td> <input type="text" placeholder="your Email"></td>
         </tr>
         <tr>
           <td> <input type="text" placeholder="Write Your Comment Here"></td>
         </tr>
         <tr style="border:0"><td><button>SEND MESSAGE</button>
           
           </td></tr>
       </table>
     </div>
     </div>
   </div>
</body>    
</html>

怎么让表单居中在图片中间，。可以引用本机图片吗？怎么引用

慕九州7737153 2018-07-05

源自：网页布局案例 2-6 编程练习

收起

2回答

好帮手慕阿莹回答被采纳获得+3积分 2018-07-05 15:54:56

1、可以引用本机照片：例如的的我的图片存放位置：C:\Users\Administrator\Desktop\images

图片的引用地址为：

你也可以使用相对这个html文件的路径。比如：

引用地址如下：

2、可以把图片设置为

position:relative;

width:100%;

表单设置为：

position:absolute;

left:50%;

top:0px;

margin-left: -90px; （90px既表单长度的一般。）

修改后的代码如下所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>position-static</title>
    <link rel="stylesheet" href="./reset.css"> 
<style type="text/css">
   .header{
    width: 100%
    height:100px;
    background-color: #07cbc9;
    color:white;
    overflow:hidden;
 
   }
   .header .a{
    float:left;
    font-size: 20px;
    margin-left:50px;
    margin-top:30px;
   }
   .header .b{
    float:right;
    font-size: 10px
    font-weight:bold;
    margin-bottom:15px;
    margin-right:50px;
   }
   .header .b ul li{
    float:left;
    list-style:none;
    padding:20px;
    text-align:center;
     
     
   }
    
   .banner .bbanner .cbanner{
    margin:auto auto;
    margin-top:300px;
    left:0;
     position:absolute;
     left:50%;
	 top:0px;
    margin-left: -89px;
   }
   .banner .abanner img{
       position:relative;
       width:100%;
       height:600px;
   }
</style>
</head>
<body>
   <div class="header">
     <div class="a">Career Builder</div>
     <div class="b">
       <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>GALLERY</li>
        <li>FACULTY</li>
        <li>EVENTS</li>
        <li>CONTACT</li>
       </ul>
     </div>
   </div>
   <div class="banner">
     <div class="abanner">
       <img src="./images/banner3.jpg">
       <div class="bbanner">
        <table  class="cbanner">
         <tr>
           <td> <input type="text" placeholder="your Name"></td>
         </tr>
         <tr>
           <td> <input type="text" placeholder="your Phone"></td>
         </tr>
         <tr>
           <td> <input type="text" placeholder="your Email"></td>
         </tr>
         <tr>
           <td> <input type="text" placeholder="Write Your Comment Here"></td>
         </tr>
         <tr style="border:0"><td><button>SEND MESSAGE</button>
            
           </td></tr>
       </table>
     </div>
     </div>
   </div>
</body>    
</html>

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

慕九州7737153 提问者 #1

再教怎么改这图片里的变格大小，我试过我的方法，没让它变大

2018-07-05 16:19:40
慕九州7737153 提问者 #2

非常感谢！

2018-07-06 08:40:07

好帮手慕阿莹 2018-07-05 16:32:21

我们可以给td加上class名称，例如：

<table  class="cbanner">
         <tr>
           <td class="ip1"> <input type="text" placeholder="your Name"></td>
         </tr>
         <tr>
           <td class="ip1"> <input type="text" placeholder="your Phone"></td>
         </tr>
         <tr>
           <td class="ip1"> <input type="text" placeholder="your Email"></td>
         </tr>
         <tr>
           <td class="ip2"> <input type="text" placeholder="Write Your Comment Here"></td>
         </tr>
         <tr style="border:0"><td><button>SEND MESSAGE</button>
            
           </td></tr>
       </table>

并给它们设置宽高

 .banner .bbanner .cbanner .ip1 input{
width:300px;
height:30px;
bolder:2px;
   }
   .banner .bbanner .cbanner .ip2 input{
width:500px;
height:70px;
bolder:2px;
   }

收起回答