CSS 定位链接的图片以及将多张图片放在一行中的最佳方式

Question

我是 CSS 和 html 的新手，我想知道您是否可以帮助我。我正在尝试制作一个页面，人们可以在其中访问我的网站并在他们想要的任何平台上购物。我已经成功地在 html 中创建了页面，但是我无法获得四个图像（正方形），如果你想这样称呼它...以页面为中心。

这是HTML

    <!DOCTYPE html>


<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content= "width = device-width. initial-scale= 1"

    <!-- Links to other files -->

    <!-- Default Location -->

<base href= "http//home/makenna/Documents/Amazon Docs/Kittiesnmore Web Files"/>

<!-- Links to CSS Stylesheets -->
<link rel="CSS Stylesheet" type "text/css"href="sellpagestylesheet1.css"> <!-- This is the main style sheet -->


<title> Shop with us on your Favorite E-retailer's Website </title>

<body>

<div>

<h3> Shop with us on your favorite shopping platform! </h3>

</div>



< id= "all pics">
<a href= "http://kittiesnmore.com/index.php/shop/">
<img src="https://imgur.com/DTEzmL3.jpg" alt= "Shop on our Site" style= "width:500px; height:500px; border:5x; bordercolor:4C4646; align:center; bordercolor:00008B;" id= "kittiesnmoreLogo" > 
</a>



<a href= "https://www.amazon.com/s?marketplaceID=ATVPDKIKX0DER&me=A3O390GOKHZKJR&merchant=A3O390GOKHZKJR&redirect=true">
<img src="https://imgur.com/Icu5jwn.jpg"  alt="Shop our Amazon Inventory" style=" height=500px; width: 500px; height: 500 px; border: 5px;" id= "amazonLogo">
</a>




<p id="secondRow">
<a href= "http://www.ebay.com/sch/makennher-0/m.html?item=152544640003&rt=nc&_trksid=p2047675.l2562">
<img src="https://imgur.com/hNBGJwg.jpg" alt= "Shop our Ebay Inventory" style="width:500 px; height:500px; border: 5px;" id= "ebayLogo"> 
</a>




<a href= "https://kittiesnmore.myshopify.com/">
<img src="https://imgur.com/o1zeKZF.jpg" alt="Shop on our Shopify Store" style= "height:500px; width:500px; border:5px;" id="shopifyLogo">
</a>
</p>

这里是CSS

<head>


<style>

#firstRow.kittiesnmoreLogo{

    *{font-family: "Arial Black" Gadget, sans-serif;}
    .website{ padding 10px 10px 10px 10px
    }

我想知道定位我为执行上述操作而创建的图像的最佳方式，我应该对包含它们的方式进行的任何改进，或者是否存在非常严重的错误。

此外，如果我的代码在该网站上的格式不正确，我深表歉意，我对如何制作代码块不是很熟悉 >.<

Answer 1

你用什么软件打码，你的代码语法错误太多。首先纠正所有的问题，然后尝试使用这个，

#menu {
    max-width: 700px;
    text-align: center;
    margin: auto;
}
#menu img {
    width: 150px;
}

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>

CSS 定位链接的图片以及将多张图片放在一行中的最佳方式

CSS targeting Images that are linked and best ways to center multiple images on one line

css

image

targeting