edit footer in html page using css

Я новичок в HTML, CSS, и у меня возникают проблемы с редактированием нижнего колонтитула на моей странице html. Я пытаюсь изменить размер значка facebook и twitter слишком большого размера (оба одинакового размера), они имеют их рядом друг с другом в нижнем центре html-страницы вместе с значком авторского права.edit footer in html page using css

HTML:

<!doctype html> 
    <html lang="en"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="homepageuni.css"> 
    <meta charset="utf-8"> 
    <meta name="homepage" content="a homepage for the survey website"> 
    <title> Kingston University Survey Homepage</title> 
    <body> 
     <img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/> 
     <div id = "buttons"> 
      <button onclick="window.location='http://www.google.com'" type="button home-button">Home</button> 
      <button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button> 
      <a href="http://www.w3schools.com/html/">LogIn</a> 
     </div> 
     <br/><br/><br/><br/><br/><br/> 
     <img src="homepagepic.jpg" alt="homepagepic" id="middlepic" /> 
     <br/> 
     <div id="footer"> 
      &copy; 
      <img src="facebookpic.png" alt="facebookpic" /> 
      <img src="twitterpic.jpg" alt="twitterpic"/> 
     </div> 
    </body> 
</html>

CSS:

#middlepic { 
    display: block; 
    margin: 0 auto; 
} 

#uni { 
    display: block; 
    width: 250px; 
    height: 200px; 
} 

#footer { 
    width: 100%; 
    height:100px; 
    display: inline-block; 
    text-align: center; 
} 

button { 
    height: 30px; 
    width: 200px; 
    background-color: #ccc; 
    border-radius: 10px; 
    float:left; 
} 

a { 
    text-decoration: none; 
    color: #000; 
}

источник

2014-12-29 Hollywood

просто добавить правило CSS, как сильфона

#footer img { 
    width: 25px; 
    height: 25px 
}

, если вы хотите изменить размер просто изменить ширину и высоту

источник

2014-12-29 21:51:14

Я бы добавил класс для каждого изображения и установить их размер таким образом.

HTML

<div id="footer"> 
    &copy; 
    <img class="social-badge" src="facebookpic.png" alt="facebook logo"> 
    <img class="social-badge" src="twitterpic.jpg" alt="twitter logo"> 
</div>

CSS

.social-badge { 
    width: 200px; 
}

источник

2014-12-29 21:53:32 hungerstar

попробовать это.

#footer { 
 
    text-align: center; 
 
} 
 

 
.logos{ 
 
    width: 25px; 
 
height: 25px; 
 
}

<img src="kingstonunilogo.jpg" id="uni" alt="uni logo" /> 
 

 
<div id="buttons"> 
 
    <button onclick="window.location='http://www.google.com'" type="button home-button">Home</button> 
 
    <button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button> 
 

 
    <a href="http://www.w3schools.com/html/">LogIn</a> 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 

 
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" /> 
 
<br/> 
 
<div id="footer"> 
 
    &copy; 
 
    <img class="logos" src="facebookpic.png" alt="facebookpic" /> 
 
    <img class="logos" src="twitterpic.jpg" alt="twitterpic" /> 
 
</div>

источник

2014-12-29 21:54:53 lv0gun9

Просто добавьте класс в IMG тэг добавить стиль с CSS, как это.

CSS:

.socialimg { width: 10px; }

HTML:

<img class="socialimg" src="facebookpic.png" alt="facebookpic"> 
<img class="socialimg" src="twitterpic.jpg" alt="twitterpic">

источник

2014-12-29 21:56:46

* ID * s должен быть использован только один раз на каждой странице. Вместо этого используйте * класс *. – hungerstar

Спасибо за исправление. –

спасибо большое – Hollywood

edit footer in html page using css

ответ

Смежные вопросы