View Full Version : طراحی بلوک سایت با استفاده از CSS
abbas3zaar
پنج شنبه 03 فروردین 1391, 02:02 صبح
چگونه میتونیم با CSS یک بلوک برای موضوعات به شکل زیر بسازیم؟
84526
EMERTAT
جمعه 04 فروردین 1391, 09:00 صبح
این یه div هست که style های زیر رو به اون نسبت دادن
با width و height به اون طول و عرض ثایت دادن
با position: absolute اون از جریان کلی صفحه خارج کردن
با top و left موقعیت اون نسبت به صفحه تعیین کردن
فک کنم اون موضوع اصلی که شما می خواستید
حالا اگه در مورد اون عکس بالایی و چطور به اون گوشه های گرد دادن سوال داری
بیشتر توضیح بدم
ولی در حالت کلی کدش اینه
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
div{
width: 250px;
height: 300px;
background-color: #FF3366;
position: absolute;
top: 10px;
left: 800px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
موفق باشی
سوال داشتی برام پیغام بزار
خوشحال می شم بتونم کمکی کنم
abbas3zaar
جمعه 04 فروردین 1391, 22:54 عصر
ممنون.
اون قسمت بالاش که موضوعات نوشته و رنگش هم آبی هست عکسه یا css ؟
چطور div رو دورش رو گرد کنیم؟
اگه داخل div یک عکش بزاریم عکس رو هم دورش رو گرد میکنه؟
من با VS 2010 کار میکنم یک Table ساختم چطوری دورش رو گرد کنم؟ عکس زیر رو نگاه کن
http://up.vbiran.ir/images/4uracsp5vy6c85p15hqq_thumb.jpg (http://up.vbiran.ir/viewer.php?file=4uracsp5vy6c85p15hqq.jpg)
EMERTAT
جمعه 04 فروردین 1391, 23:10 عصر
اون قسمت بالا عکس هست
برای ایجاد گوشه گرد css دارای کد هست ولی IE ساپورت نمی کنه
می تونید با یه نرم افزار گرافیکی یه دایره ایجاد کنید و به چهار قسمت تقسیم کنید
حالا 2 تا div یکی بالا و یکی پایین table بزارین
داخل div ها یه تگ img بزارید و برابر یکی از عکس ها بزارید
و عکس دوم رو هم با css و background-image عکس دوم می زارید
اگه نتونستید بگید کد بزارم
hamid_shrk
شنبه 05 فروردین 1391, 00:21 صبح
برای دورگرد کردن میتونید از css3 بجای استفاده از عکس استفاده کنید.
سعی کنید فرمتون رو هم بدون جدول و با div بسازید.
برای ایجاد گوشه گرد css دارای کد هست ولی IE ساپورت نمی کنه
با PIE.htc میشه css3 رو هم با IE وفق داد.یا برعکس :D
سرچ کنید.
با جی کوئری هم میشه دورگرد کرد.
vBulletin® v4.2.5, Copyright ©2000-1404, Jelsoft Enterprises Ltd.