Question

我对编码很新，所以我知道它远非完美！我只是想帮助让这个页面在手机上看起来不错。最有可能的是，文字和图片会叠加;我不知道如何处理页眉和页脚。

<body>
<h1 div id= "header"> </h1>
<div id="logos"> <img id="logo" src= "https://msu.edu/~donald88/portfolio/logo02.png" </div>
<ul id="navigation"> 
<li> <a href= "http://kelsiedonaldson.com."> About</a></li>
<li> <a href= "http://kelsiedonaldson.com/portfolio.html"> Portfolio</a></li>
 <li> <a href= "http://kelsiedonaldson.com/resume.html"> Résumé</a></li>
 <li> <a href= "http://kelsiedonaldson.com/contact.html"> Contact</a></li>
</ul>
<h2> Project Spotlight </h2>
<h3> Refugee Development Center Newsletters </h3>
</br> </br>
<div id= "main">
<div class="project-image"><img src= "https://msu.edu/~donald88/portfolio/rdcnewslettertwo.png" alt="RDC newsletter" /></div>
<div id="spotlight-text"> <p class="project-text"> This is a project I did in a class during my freshman year of college. A member of the RDC staff came to my class to 
give a general overview of what she wanted, and then we divided into teams to design two newsletters for this awesome organization. My team
consisted of three members, and we all worked together to write and design the newsletters. I specifically wrote the story pictured on the 
left in the summer 2016 newsletter about the GLOBE camp program. I also helped collaborate on the design of both newsletters as far as color choice,
text formatting, and article length. I then edited my other team members' articles and helped assemble everything as a PDF that could be printed
or looked at online. Finally, my team gave a presentation to the rest of my class and the RDC staff member about our newsletter and the choices
we made while creating it. The client only had positive things to say about our design! </p>
<p class="project-text"> Completed: April, 2016 <br/>
 Category: Web/Print </p>
</div>
<div class="back-button"> <a href= "http://kelsiedonaldson.com/portfolio.html"> Back to portfolio </a> </div>
<div class="portfolio-button"> <a href= "http://kelsiedonaldson.com/rdc_newsletters.pdf" target="_blank"> See full project </a> </div>
</div>
</p>
 <div style="clear: both"></div>
<div style="clear: both"></div>

<footer class="footer">
  <div class="container">
    <div id="ftr-wrap">
        <div class="ftr-links">
        <div class= "table">
            <ul>
               <li><a href="https://twitter.com/Kelsdonaldson22"> <div class="icons"><img src= "http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png"></div></a></li>     
               <li><a href="https://www.facebook.com/kelsie.donaldson"><div class="icons"><img src= "https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png"></div></a></li>     
               <li><a href="https://www.instagram.com/kelsiedonaldson/"><div class="icons"><img src= "http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png"></div></a></li>
            <li><a href="https://www.linkedin.com/in/kelsie-donaldson-965033115?trk=hp-identity-name"><div class="icons"><img src= "https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/linkedin-512.png"</a></div></li>
            </div>
           </ul>
        </div>
        <div class="copyright-amazon">
            <p class="copyright">&copy; Copyright Kelsie Donaldson 2016</p>
             <p class="amazon"><a href="https://www.instagram.com/kelsiedonaldson/"><img 
        </div>     
    </div>
  </div>
</footer>

CSS：

Body {
background-image: url("http://www.publicdomainpictures.net/pictures/140000/velka/grey-white-background.jpg");
width: 100%;
}

html {
position: relative;
min-height: 100%;
}

#header {
height: 120px;
width: 100%;
min-width: 1200px; 
background-color: #b196db;
text-align: center;
font-family: 'Yesteryear', cursive;
margin: 0px;
padding-top: 20px;
padding-bottom: 20px;
line-height: 120px;
font-size: 100px;
position: relative;
}
#logo {
height: 110px;
max-width: 880px;
padding: 30px;
padding-top: 10px;
padding-bottom: 28px;
margin-top: -10em;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
}


#navigation li {
display: inline;
list-style-type: none;
padding: 50px;
float: center;
text-decoration: none; }

   #navigation {
text-align: center;
min-width: 1160px;
height: 30px;
background-color: #35b7ab;
margin-top: 0px;
top: 140px;
padding-top: 15px;
font-family: Lucida bright;
font-size: 20px;
color: white
}
 a {
    text-decoration: none;
    color: white;
}
 a:hover{
color: #867289; }

    h2 {
font-size: 50px;
color: #66096c;
font-family: 'Philosopher', sans-serif;
text-align: center; }

   html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }

  body {
padding:0;
margin: 0;
}

.footer {
position: absolute;
margin-bottom: -30;
margin-top: 10px;
bottom:0;
width:100%;
min-width: 1200px;
background-color: #b196db;

}

.footer p {
color: #fff;
font-size:1em;
display: inline-block;
position: relative;
bottom: 10px;
float: right; 
}


.container {
max-width: 1674px;  /* adjust to allow for padding as needed */
padding:0 50px; }


    #ftr-wrap {
display:table;
table-layout:fixed;
width:100%;
margin:0 auto; }

  #ftr-wrap > div:nth-child(1) {text-align:left;}
#ftr-wrap > div:nth-child(2) {text-align:center;}
#ftr-wrap > div:nth-child(3) {text-align:right;}

.ftr-links ul {
  padding: 0;
 display: inline-block;
 position: relative;
 margin: auto;
 width: 100%; }


.table {
position: relative;
display: table;
margin: 0 auto;
display: inline-block;
list-style: none;
margin-left: 45%;
bottom: -50; }

.ftr-links ul li {
 display: inline-block;
  padding-right: 15px;
 font-size:.75em; }

.ftr-links ul li a {
display: inline-block;
color: #fff;
margin: 0; }

.icons > img {
display: inline;
height: 40px;
width: 40px;
padding-bottom: 20px; }

   #main{
height:800px;
width:100%; 
}

#main {
height:500px;
width:100%;
}

 .project-image{
width:40%;
color: #66096c;
height:100%;
float:left;
margin-left: 7em; 
padding-right: 3em;
}

 div#spotlight-text {
width:40%;
height:100%;
float:left;
font-family: Lucida Bright;
font-size: 20px;
color: #66096c; 
margin-right: 2%;
}
    h3 {
font-size: 30px;
color: #867289;
text-align: center;
font-family: Lucida Bright;

Answer 1

我了解到，当您的网页缩小到移动设备时，您希望自己的网页看起来更好，但如果您想完成此操作，我强烈建议您查看Media Queries

他们可以帮助您完成您所寻找的目标。此外，请不要忘记在使用媒体查询时将其放在HTML文档中头标记的结尾处。

$link = "https://www.paypal.com/webapps/xoonboarding/api/onboard/guest";

$data = [
    'data' => [
        'user' => [
            'first_name' => 'xx',
            'last_name' => 'xx',
            'email' => 'xx',
            'countryOfResidence' => 'GB',
            'country' => 'LK',
            'nationality' => 'lk',
        ],
        'billing_address' => [
            'line1' => 'xx',
            'city' => 'xx',
            'postal_code' => 'xx',
            'country' => 'lk',
        ],
        'shipping_address' => [
            'first_name' => 'xx',
            'last_name' => 'xx',
            'line1' => 'xx',
            'city' => 'xx',
            'postal_code' => 'xx',
            'country' => 'lk',
        ],
        'phone' => [
            'type' => 'Mobile',
            'number' => 'xx',
            'countryCode' => '94',
        ],
        'marketing_optin' => true,
        'shipping_address_validation' => false,
        'poma_flow' => false,
        'prox_flow' => false,
        'testParams' => [],
        'content_identifier' => "LK:en:2.0.287:signupTerms.signupC",
        'card' => [
            'type' => 'xx',
            'number' => 'xx',
            'security_code' => 'xx',
            'expiry_month' => 'xx',
            'expiry_year' => 'xx',
        ],
        'skipInitiateAuth' => true
    ],
    'meta' => [
        'token' => 'xx',
        'calc' => 'xx',
        'csci' => 'xx',
        'locale' => [
            'country' => 'LK',
            'language' => 'en',
        ],
        'state' => 'ui_checkout_guest',
        'app_name' => 'xoonboardingnodeweb',
    ]
];

$json = json_encode($data, true);
                                                                                                                                                                                                                                                                    
$ch = curl_init($link);                                                                      
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                     
curl_setopt($ch, CURLOPT_POSTFIELDS, $json);                                                                
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                      
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json', 'Content-Length: ' . strlen($json)]);                                                                    
                                                                                                                                                                                                           
$result = curl_exec($ch);

创建响应式网页需要哪些调整？

1 个答案: