ヘッダー、左、右、フッターの 4 つの部門があります。ヘッダーを左ヘッダーと右ヘッダーの 2 つのセクションに再度分割したいと思います。右のヘッダーでは、画像を同じセクションに保持したいので、ホームなど、私たちについての他のオプションについて言及したいと思います。一方、左部門にはテキストが必要です。
HTML と CSS を使用してどのように作成できますか? 以下は、HTML と CSS のスニペットです。
<html>
<head>
<title>Search Engine Title Goes Here</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="container"> </div>
<div id="header">
<div id="header-left-container">
<h1>heading1,<br> heading2 and <br>heading3</h1>
</div>
<div id=header-right-container>
<img border="0" src="tra.jpg" alt="drug"align="right" width="750" height="150">
</div>
</div>
<div id="sidebar"> Left </div>
<div id="content"> <p></p></div>
<div id="footer"> </div>
</body>
</html>
CSS コード:
body {background: #ffffff; margin: 0; padding: 0;}
a {color: #2b2bf6;}
#container
{width: 900px;
margin: 0;
padding: 0;
background: #dddddd;}
#header
{width:1000;
height: 150px;
margin: 0;
padding: 0;
border: 0;
background: #FFFFA3;}
#sidebar
{width: 200px;
height: 400px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #f0e811;}
#content
{width: auto;
height: 400px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #8be0ef;}
#footer
{width: auto;
height: 70px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #000000;
clear:both;}
Web制作初心者ですので、よろしくお願いします。