ادامه مراحل ساخت پروژه
- حالا می توانیم داخل div ساخته شده لیست مطالب آموزشی جدید را قرار دهیم برای اینکه در یک ردیف دو، سه و یا بیشتر المان قرار دهیم بهتر است از جدول استفاده کنیم تا بنوانیم المان ها را مدیریت کنیم و آن ها را منظم در صفحه قرار دهیم.
با استفاده از مقدار none برای border خطوط جدول را حذف می کنیم و درنهایت عرض و ارتفاع جدول را مشخص می کنیم.
داخل جدول یک سطر می سازیم و داخل سطر ایجاد شده دو ستون قرار می دهیم و درنهایت داخل ستون های ایجاد شده تصویر مدنظرمان و عناوین مربوط به تصاویر را قرار می دهیم.
<html>
<head>
<title>Project</title>
<style>
.div1{
background-color: rgb(0,0,125);
display: block;
margin-left: auto;
margin-right: auto;
height:100%;
}
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
display: block;
margin-left: auto;
margin-right: 0;
border-radius: 0px 0px 5px 5px;
}
.nav li {display: inline-block;
font-size: 20px;
padding: 20px;
}
h3 {text-align: center;
background-color: #15678942;}
/*NEW COMMAND*/
table, td, th {
border: none;
}
table {
width:100%;
height:50%;
}
///////
</style>
</head>
<body>
<div class=“div1”>
<ul class=“nav” style=“width:25%;”>
<li><a href=“#contact”>Contact Us</a></li>
<li><a href=“#about”>About Us</a></li>
<li><a href=“#clients”>Home</a></li>
</ul>
<img src=“myimage.jpg” style=“width:50%; display: block; margin-left: auto; margin-right: auto; border-radius:5px”>
</div>
<img src=“icons.jpg” style=“width:100%;”><h3>latest tutorial</h3>
<div>
<- NEW COMMAND ->
<table>
<tr>
<td style=“background-color:white; border-radius: 15px;”>
<img src=“lesson1.jpg” style=“width:50%; border-radius: 10px;”>
<br><p style=“text-align: center;”><b>HTML</b></p>
</td>
<td style=“background-color:white; border-radius: 15px;”>
<img src=“lesson2.jpg” style=“width:50%; border-radius: 10px;”>
<br><p style=“text-align: center;”><b>CSS</b></p>
</td>
</tr>
</table>
//////
</div>
</body>
</html>
در نهایت یک div برای فوتر ایجاد می کنیم و مطالب مدنظرمان را داخل آن می نویسیم.
<html>
<head>
<title>Project</title>
<style>
.div1{
background-color: rgb(0,0,125);
display: block;
margin-left: auto;
margin-right: auto;
height:100%;
}
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
display: block;
margin-left: auto;
margin-right: 0;
border-radius: 0px 0px 5px 5px;
}
.nav li {display: inline-block;
font-size: 20px;
padding: 20px;
}
h3 {text-align: center;
background-color: #15678942;}
table, td, th {
border: none;
}
table {
width:100%;
height:50%;
}
/*NEW COMMAND*/
.div4{
background-color: black;
display: block;
margin-left: auto;
margin-right: auto;
}
///////
</style>
</head>
<body>
<div class=“div1”>
<ul class=“nav” style=“width:25%;”>
<li><a href=“#contact”>Contact Us</a></li>
<li><a href=“#about”>About Us</a></li>
<li><a href=“#clients”>Home</a></li>
</ul>
<img src=“myimage.jpg” style=“width:50%; display: block; margin-left: auto; margin-right: auto; border-radius:5px”>
</div>
<img src=“icons.jpg” style=“width:100%;”><h3>latest tutorial</h3>
<div>
<table>
<tr>
<td style=“background-color:white; border-radius: 15px;”>
<img src=“lesson1.jpg” style=“width:50%; border-radius: 10px;”>
<br><p style=“text-align: center;”><b>HTML</b></p>
</td>
<td style=“background-color:white; border-radius: 15px;”>
<img src=“lesson2.jpg” style=“width:50%; border-radius: 10px;”>
<br><p style=“text-align: center;”><b>CSS</b></p>
</td>
</tr>
</table>
</div>
<- NEW COMMAND ->
<div class=“div4”>
<br><br>
<p style=“color:white; text-align: center;”>follow us on</p><br><br>
</div>
</body>
</html>
//////
</body>
</html>
تمرین
برای تمرین بیشتر توصیه می کنیم صفحات about us و contact us را نیز با تم مشابه بسازید و در منوی ساخته شده لینک صفحات ساخته شده را قرار دهید.