ادامه مراحل ساخت پروژه
- در قسمت محتوای اصلی سایت مدنظرمان مطابق با عکس زیر یکسری تصویر پس زمینه به منظور زیباسازی وجود دارد، یک نوار تحت عنوان جدیدترین مطالب آموزشی درج شده و درنهایت یک ردیف از لیست مطالب آموزشی جدید وجود دارد.
ابتدا تصویری که در ابتدای صفحه قرار دارد را به عنوان پس زمینه انتخاب میکنیم. کافیست تصویر موردنظر را بعد از تگ پایانی div مربوط به هدر قرار دهیم بخاطر خاصیت بلاکی تگ div و تگ img به صورت خودکار تصویر پایین هدر قرار می گیرد فقط باید عرض تصویر را 100% قرار دهید تا تصویر تمام عرض صفحه را پر کند.
بعد از عکس نوبت قرار دادن عنوان “جدیدترین مطالب آموزشی” می رسد در این حالت نیز از تگ h3 باید استفاده کنیم و از آن جایی که تگ های گروه h از جمله تگ های بلاکی محسوب می شوند بنابراین به صورت خودکار محتوای آن در سطر جدیدی قرار می گیرد. درنهایت برای تعیین رنگ پس زمینه تیتر موردنظر و همچنین وسط چین شدن متن آن یکسری تنظیمات منسوب به h3 در بخش style قرار می دهیم.
<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;
}
/*NEW COMMAND*/
h3 {text-align: center;
background-color: #15678942;}
//////
</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%;”>
<- NEW COMMAND ->
<h3>latest tutorial</h3>
///////
<div>
</div>
</body>
</html>
برای ادامه کار می خواهیم لیست مطالب آموزشی را قرار دهیم برای این کار ترجیح می دهیم پس زمینه از حالت سفید یکدست خارج شود به همین دلیل از زمینه رنگی با حالت گرادینت استفاده می کنیم.
برای این کار یک div به عنوان سومین div ایجاد می کنیم و به منظور ایجاد پس زمینه گرادینت طوسی سفید از دستور background-image استفاده کردیم که ورودی آن اولا نحوه نمایش رنگ (به صورت خطی در نظر گرفتیم) و دوما رنگ های طوسی و سفید است. درنهایت با استفاده از مقدار block برای display و مقدار auto برای margin-left و margin-right نحوه نمایش 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;}
/*NEW COMMAND*/
.div3{
background-image: linear-gradient(rgba(255,0,0,0), rgba(220,220,220,1),rgba(255,0,0,0));
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>
<- NEW COMMAND ->
<div class=“div3” style=“height:100%;”>
/////
</div>
</body>
</html>