CSSターゲティングリンクされた画像と、複数の画像を1つの行に配置する最適な方法

私はCSSとhtmlを初めて使用しています。私は、人々が自分のウェブサイトに行って、好きなプラットフォームで買い物できるページを作ろうとしています。私はhtmlでページを作成することができましたが、それをページの中心に置いておきたい場合は、4つのイメージ（正方形）を取得できませんでした。ここでCSSターゲティングリンクされた画像と、複数の画像を1つの行に配置する最適な方法

は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 
    }

をSiであります私はそれらを含めたやり方にしなければならない、あるいはひどく間違ったことがあるならば。

また、私のコードがこのWebサイトで正しくフォーマットされていないと、私は謝罪します。私は実際にコードブロックを作成する方法に精通していません。 <

出典

2017-05-18 Makenna Sophia Herl

、これを使用してみてください終了タグはありません。投稿する前にHTMLバリデーターを使用しているので、ある程度作業用コードがありますか？ – Syfer

コード化に使用するソフトウェアは、構文エラーが多すぎます。それらをオフにすべての最初の正しい、そして、あなたのHTMLは場所 ` その段落タグやdivのであれば、それであれば`わからないで壊れている

#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>

出典

2017-05-18 05:19:09 codesayan

ちょっと、私は編集者としてnotepad ++を使ってきました。その他の提案はありますか？ –

オプションがあります。大括弧、Dreamweaver、崇高なテキストを使用できます。 – codesayan

CSSターゲティングリンクされた画像と、複数の画像を1つの行に配置する最適な方法

答えて

関連する問題