ادامه مراحل ساخت پروژه
- در صفحه موردنظر ما یک منو اصلی با زمینه زرد رنگ در سمت راست div وجود دارد.
برای ساخت این منوی ساده ما از لیست ها استفاده کردیم. برای تنظیمات ظاهری از جمله رنگ زرد یک کلاس به نام nav داخل style ایجاد کردیم، رنگ پس زمینه زرد رنگ، عدم استفاده از بولت، وسط چین بودن اسامی منو، استفاده از خواص بلاک، بدون داشتن حاشیه در سمت چپ، استفاده از لبه های گرد با شعاع 5 پیکسل در گوشه های پایین چپ و پایین راست
همچنین در کلاس nav برای اجزای لیست (li) از خاصیت inline-block به منظور نمایش اجزای لیست به صورت افقی استفاده کردیم.
<html>
<head>
<title>Project</title>
<style>
.div1{
background-color: rgb(0,0,125);
display: block;
margin-left: auto;
margin-right: auto;
height:100%;
}
/*NEW COMMAND*/
.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;
}
///////
</style>
</head>
<body>
<div class=“div1”>
/*NEW COMMAND*/
<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>
///////
</div>
<div>
</div>
<div>
</div>
</body>
</html>
- وسط div و پایین تر از منو یک تصویر قرار دارد، برای اینکه نحوه استفاده از کدهای css داخل تگ های html را نشان دهیم در این بخش تنظیمات تصویر را داخل تگ img تعریف کردیم. در تگ زیر ابتدا اندازه عرضی تصویر 50% اندازه کل صفحه در نظر گرفته شده است و از بلاک برای نمایش دادن تصویر استفاده کردیم، با استفاده از مقدار auto برای margin-left و margin-right فاصله تصویر از حاشیه های چپ و راست به صورت اتوماتیک تنظیم شده و تصویر وسط صفحه قرار گرفته است و درنهایت با استفاده از دستور border-radius لبه های تصویر گرد شدند.
<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; } </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>
/*NEW COMMAND*/ <img src=“myimage.jpg” style=“width:50%; display: block; margin-left: auto; margin-right: auto; border-radius:5px”>
///////// </div> <div>
</div> <div>
</div> </body> </html>