که به طور خودکار با دقت صد در صد اجازه می دهد هر شی/لایه را با مرکز تصویر یا لبه های آن تراز کنید. همچنین می توانید با توجه به یک ناحیه در تصویر تراز کنید. همه اینها بسیار ساده است و در این مقاله مورد بحث قرار خواهد گرفت.
به عنوان یک قاعده، مبتدیان این عمل را با چشم انجام می دهند، که اصلا ضروری نیست. ابزاری را انتخاب کنید در حال حرکتو به آن توجه کنید. تعدادی تنظیمات وجود دارد که این وظیفه را بر عهده دارند ( به اسکرین شات نگاه کنید):
سه دکمه اول مسئول تراز عمودی (از چپ به راست) هستند: بالا، مرکز، پایین.
سه دکمه بعدی وظیفه تراز افقی (از چپ به راست) را بر عهده دارند: چپ، مرکز، راست.
بنابراین، برای قرار دادن شی دقیقاً در مرکز، باید مرکز را به صورت عمودی و افقی انتخاب کنید.
مهمترین قانون هم ترازی: اول از همه، باید به فتوشاپ منطقه ای را که برنامه باید به دنبال لبه ها یا وسط آن باشد، بگویید. تا زمانی که این کار را انجام ندهید، دکمه های تراز غیر فعال خواهند بود، به این معنی که نمی توان روی آنها کلیک کرد.
این راز چگونگی ساخت یک شی در وسط کل تصویر یا تکه تکه آن است.
بنابراین، دنباله اقدامات به شرح زیر است:
فرض کنید می خواهید این تصویر را در مرکز قرار دهید:
انتخاب 1- نسبت به کل بوم.
مرحله 1
منطقه ای را که برنامه باید تصویر را با آن تراز کند به فتوشاپ نشان می دهیم. این کار با ایجاد انجام می شود.
لایه پس زمینه را در پالت لایه ها انتخاب کنید و Ctrl + A را روی صفحه کلید فشار دهید ( انتخاب همه). در نتیجه، شما باید یک قاب انتخابی را ببینید "مورچه های راهپیمایی"اطراف لایه پس زمینه (به عنوان یک قاعده، لایه پس زمینه به اندازه بوم است).
توجه داشته باشید
می توانید لایه پس زمینه را به روش دیگری انتخاب کنید - کلید را نگه دارید ctrlو روی لایه پس زمینه کلیک چپ کنید. این روش زمانی کار می کند که قفل این لایه باز باشد (این مورد با نماد قفل نشان داده می شود).
گام 2
اکنون باید ابزاری را انتخاب کنید در حال حرکت. وقتی یک قاب انتخابی داریم، دکمه های تراز فعال می شوند، یعنی می توان از آنها استفاده کرد.
لایه ای را با تصویری که می خواهید تراز کنید انتخاب کنید و اکنون بر روی دکمه ها مطابق با جایی که می خواهید این عکس را قرار دهید کلیک کنید. به عنوان مثال، بیایید دقیقا در مرکز قرار دهیم. سپس باید روی این دکمه ها کلیک کنیم:
مثالی دیگر. فرض کنید می خواهید تصویر را در مرکز، اما در سمت چپ قرار دهید. سپس دکمه های زیر را در نوار گزینه ها انتخاب کنید:
گزینه 2- در یک قطعه از تصویر
فرض کنید قطعه ای روی تصویر وجود دارد که باید تعدادی عکس را کاملاً یکنواخت در داخل آن قرار دهید. در مثالم یک مربع شیشه ای اضافه کردم. بگذارید عکس دیگری داخل آن باشد ( به هر حال، شما می توانید یاد بگیرید که چگونه چنین مربع شیشه ای را خودتان بسازید).
مرحله 1
اول از همه، بر اساس قیاس با گزینه اول، لازم است این قطعه را انتخاب کنید. چطور این کار را بکنیم؟
- اگر این قطعه روی یک لایه جداگانه است (مثل مربع من که جداگانه درج کردم) باید کلیک کنید ctrlو در صورت قفل نبودن لایه، روی تصویر کوچک کلیک کنید).
- اگر این قطعه در خود تصویر است، باید ابزارهای انتخاب را انتخاب کنید مناطق مستطیلی و بیضی شکلو از آنها برای کشیدن یک ناحیه انتخابی صاف در اطراف قطعه استفاده کنید. نحوه استفاده از این ابزارها. در حال حرکتو نگه داشتن کلیدتغییر مکان، فلش های جهت را روی صفحه کلید خود فشار دهید. تصویر با افزایش 10 پیکسل حرکت می کند.
اگر این کلید را پایین نگه ندارید، بلکه فقط از فلش های صفحه کلید استفاده کنید، تصویر با افزایش 1 پیکسل حرکت می کند.
متوجه خطایی در متن شد - آن را انتخاب کنید و Ctrl + Enter را فشار دهید. متشکرم!
ویژگی ها: سفارشی سازی: استفاده: اسکرین شات: از کجا می توان ELinks را دانلود کرد، تلاشی برای ایجاد یک مرورگر وب مبتنی بر متن مدرن است. این پروژه بر اساس کد مرورگر Links شروع شد. هدف او در ابتدا این بود که چند ویژگی کم و بیش گمشده/ضعیف را در لینک ها پیاده سازی کند. "E" در "ELinks" از کجا آمده است - "Experimental" / "Experimental". پس از موفقیت تلاش های انجام شده، "E" به عنوان "توسعه" / "توسعه" یا "افزایش یافته" / "بهبود" درک شد. وقتی مرورگر Links به درجه خاصی از بلوغ رسید و از برخی جهات از پیشرفته‌ترین مرورگر وب، Lynx پیشی گرفت، توسعه بیشتر آن در یک دوراهی قرار گرفت: حرکت به سمت نمایش گرافیک و فراتر از متن خالص، یا پیشبرد وب‌گردی با استفاده از یک رابط کاربری مبتنی بر متن فراتر از محدودیت هایی که در ابتدا به آن رسیده بود. اولین جهت در نسخه Links با قابلیت نمایش محتوای گرافیکی صفحات وب - Links2 پیاده سازی شد. دومی مرورگر وب ELinks است. Lynx یک نرم افزار بسیار پیچیده در نوع خود بود و هنوز هم هست. نویسندگان آن مفهوم بسیار متفکرانه و محکمی از مرور وب در حالت متن را با انتزاعات و قراردادهای خاص طراحی و اجرا کردند که به غلبه بر بسیاری از محدودیت ها و معایب وب گردی با استفاده از یک رابط متنی کمک کرد و دنیایی بسیار متفاوت از بخش گرافیکی که به سرعت در حال گسترش بود ایجاد کرد. از اینترنت اما HTML و کامپیوترها بیشتر توسعه یافتند، زبان های برنامه نویسی شروع به گسترش کردند، کل دنیای ارائه، یافتن و مصرف اطلاعات به جلو حرکت کرد، تغییر کرد. فرصت های جدیدی پدید آمده است. بسیاری از این ویژگی ها در لینک ها پیاده سازی شدند، اما تغییرات زیر در ارائه بصری اطلاعات در اسناد وب - از HTML بیشتر به CSS بیشتر - راه های جدیدی را باز کرد. حتی در حالت متنی و این همان چیزی است که ELinks سعی در پیاده سازی آن دارد: پشتیبانی از نمایش رنگ در شبیه سازهای ترمینال که از این ویژگی پشتیبانی می کنند، کمی موقعیت یابی با CSS و حتی نوعی پشتیبانی از جاوا اسکریپت / ECMAScript. جنبه فنی فناوری‌های شبکه (مانند پشتیبانی از SSL) و پشتیبانی از کدگذاری‌های متنی مختلف قبلاً در مرورگر Links کاملاً محکم بود، اما در ELinks برخی از ویژگی‌ها بهبود یافته و برخی دیگر توسعه‌یافته‌تر شده‌اند. ELinks یک گام رو به جلو در مفهوم مرورگر وب کنسول است که ELinks را به پیشرفته ترین نمونه پیاده سازی آن تبدیل می کند. اگرچه سیاهگوش هنوز به خوبی خود را حفظ کرده است. مفهوم او از مرور وب در حالت متنی، حتی به عنوان ساده‌سازی، رویکردی خاص برای ارائه و مدیریت اطلاعات، و تلاش نکردن برای شباهت به محیط مرورگرهای گرافیکی، بسیار خوب عمل می‌کند. پیاده سازی اسناد وب روز به روز پیچیده تر می شود و (با تمام محدودیت های اجتناب ناپذیر مرور صفحات وب در حالت متنی) مسیر خاصی را برای مدیریت آنها دنبال می کند، این راهی برای رقابت با تلاش برای شبیه سازی ساده و گرافیکی کامل است. مرورگرهای وب دسکتاپ برجسته این مشابه معضل مرورگرهای دستگاه های تلفن همراه با نمایشگرهای کوچک است: سعی کنید از رایانه هایی با نمایشگرهای بزرگ تقلید کنید، یا اسناد وب نمایش داده شده را به تناسب ویژگی های محیط تغییر دهید. مرورگرهای متنی بیشتر در رایانه‌هایی با نمایشگرهای کم و بیش بزرگ استفاده می‌شوند، بنابراین محدودیت‌های اندازه کمتر و وسوسه‌های بیشتری وجود دارد: Lynx - کم‌کلید بمانید، ELinks - فراتر بروید. ویژگی های مرورگر وب مبتنی بر متن. نسخه هایی برای لینوکس، سایر سیستم های *nix، Windows، DOS، OS/2، BeOS و برخی دیگر. HTML (شامل جداول و فریم ها). CSS و جاوا اسکریپت بسیار محدود (بیشتر بیاموزید). پشتیبانی از 16، 88 یا 256 پالت رنگ در شبیه سازها/کنسول ترمینال که از این ویژگی پشتیبانی می کنند. پشتیبانی از برگه ها، دانلود پس زمینه با اعلان پایان دانلود. پشتیبانی از ماوس ویرایش فیلدهای متنی فرم های صفحه وب در یک ویرایشگر متن خارجی. کلیدهای فوری برای URL. پشتیبانی از اسکریپت ها در Perl، Lua، Guile، Ruby.
imapsync. انتقال نامه
انتقال نامه از یک سرور IMAP به سرور دیگر با استفاده از imapsync [ 1 ] / Linux، خط فرمان: imapsync --host1 imap.this.com --user1 [ایمیل محافظت شده]--passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.another.com --user2 [ایمیل محافظت شده]-passfile2 /home/user/imap/passwordfile2 -ssl2 -skipsize -allowsizemismatch - یک سایت example.com و یک صندوق پستی وجود دارد [ایمیل محافظت شده]روی سرور یک شرکت هاستینگ سرور IMAP: imap.this.com. سرور IMAP از SSL پشتیبانی می کند. - سایت example.com در حال انتقال به میزبان دیگری است. بر این اساس، صندوق پستی [ایمیل محافظت شده]با تمام محتویاتش و با حفظ ساختار پوشه. سرور IMAP یک ارائه دهنده میزبانی دیگر: imap.another.com. سرور IMAP از SSL پشتیبانی می کند. 1. یک صندوق پستی ایجاد کنید [ایمیل محافظت شده]و رمز عبور آن در سرور شرکت میزبانی که انتقال در آن انجام می شود. 2. دو فایل متنی در پوشه /home/user/imap/ ایجاد کنید: passwordfile1 با رمز عبور صندوق پستی در سرور IMAP اول و passwordfile2 با رمز عبور صندوق پستی در سرور IMAP دوم. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. imapsync را نصب کنید. .another.com. SSL برای رمزگذاری داده ها در حین انتقال استفاده می شود و رمزهای عبور در فایل هایی ذخیره می شوند که با تنظیم مجوزهای chmod 600 محافظت می شوند. انتقال نامه بین دو سرویس ایمیل ممکن است به استفاده از گزینه های imapsync اضافی نیاز داشته باشد [2]. برای مثال، هنگام انتقال محتویات یک صندوق پستی Gmail.com به صندوق پست دیگر، باید "--port1" و "--port2" را مشخص کنید: imapsync -host1 imap.gmail.com -port1 993 -user1 [ایمیل محافظت شده]--passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.gmail.com --port2 993 --user2 [ایمیل محافظت شده]--passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch [ 1 ] یک مورد ساده و رایج: محتویات یک صندوق پست الکترونیکی به دیگری منتقل می شود - خالی، در سرور دیگری قرار دارد. اما ممکن است شرایط پیچیده تری وجود داشته باشد: Gmail به Google Apps انتقال ایمیل و انتقال به Google Apps با imapsync. [ 2 ] گزینه های دیگر: انتقال نامه از یک سرور به سرور دیگر با imapsync و imapsync(1) - صفحه man Linux.
تصویر پس زمینه HTML
درس 10 CSS. تراز کردن تصویر در مرکز
تصویر HTML، درج یک تصویر در کد صفحه
تگ HTML مسئول نمایش تصویر است
- تصویر HTMLمی تواند هر تصویری با فرمت PNG، JPEG و GIF باشد.
- کد HTML تصویربا برچسب تعریف شده است.
- تصویر HTMLمی تواند پس زمینه یک صفحه وب باشد.
- تصویر HTMLرا می توان به عنوان یک لینک تعریف کرد.
- درج یک تصویر در کد HTML یک صفحه
- فاصله بین تصویر و متن به صورت افقی و عمودی
- تعریف تصویر پس زمینه در HTML
- تصویر HTML - پیوند و کدی که آن را تعریف می کند
- یک تصویر HTML را در مرکز صفحه یا بلوک قرار دهید
در پوشه یا هر جایی که فایل را دارید، تصویر را با پسوند قرار دهید، بگویید، نام آن را هر چه دوست دارید، مثلاً، بگذارید.
درج یک تصویر در کد HTML یک صفحه:
تگ جفت نشده است. به نحوه بسته شدن آن دقت کنید.
صفات و ارزش ها
- - ضروری است، منبع تصویر را نشان می دهد.
- - یک متن جایگزین تعریف می کند، یک نظر که یک ربات جستجوگر هنگام تجزیه و تحلیل محتوای یک صفحه وب می خواند. همچنین باید علامت گذاری شود.
- - عرض تصویر را بر حسب پیکسل مشخص می کند.
- - ارتفاع تصویر را بر حسب پیکسل مشخص می کند.
ابعاد واقعی را مشخص کنید - تا کیفیت تصویر اصلی را حفظ کنید.
سه فرمت تصویر برای توسعه وب قابل استفاده است: PNG (png.)، JPEG (.jpg) و GIF (gif.). Adobe Photoshop یک ابزار تخصصی برای ایجاد گرافیک برای وب سایت ها است. می توان از آن برای تبدیل یک فرمت تصویر به فرمت دیگر استفاده کرد.
تصویر HTML | تورفتگی به صورت افقی و عمودی
یا فاصله افقی و عمودی بینتصویر و متن
مشاهده نتیجه در پنجره جدید: تصویر پس زمینه HTML
ویژگی ها در آموزش های CSS پوشش داده شده اند.
درج تصویرو ترتیب آن → → اینجا را ببینید.
تصویر HTML - پیوند
کد مثال:
مشاهده نتیجه در پنجره جدید: تصویر HTML در مرکز صفحه
در اینجا باید به چه نکاتی توجه کرد؟ → در مرحله اول، این واقعیت که ابعاد نشان داده شده است - این امر بارگذاری تصویر را سرعت می بخشد. ثانیاً، ویژگی ها املا می شوند، که انجام آن نیز بسیار مطلوب است، حتی اگر متن جایگزینی وجود نداشته باشد. در مورد اول، مرکز تعریف شد HTMLپارامتر، و در دوم - با استفاده از گنجاندن خطی شیت های سبک آبشاری.
تاریخ انتشار: مهر ۱۳۸۸ | به روز رسانی: آگوست 2014
درس 9 
تصویر HTMLدرس 11
چگونه مرکز یک تصویر را با مرکز یک div تراز کنیم؟
برای مدت طولانی روش های مختلفی برای وسط تصاویر با استفاده از CSS وجود داشته است. اجرای این روش ها به شدت تحت تأثیر اینترنت اکسپلورر 5 قرار گرفت. اما امروزه افراد کمی به این نسخه از مرورگر علاقه مند هستند، بنابراین می توانید از شر کدهای غیر ضروری خلاص شوید.
پیش از این، IE5 و IE5.5 قوانین خود را دیکته می کردند - برای تراز کردن یک عنصر صفحه در مرکز، باید از ویژگی CSS استفاده کنید. و برای وسط، به عنوان مثال، یک عکس، باید آن را در یک بلوک اضافی قرار دهید:
برای این بلوک اضافی، ویژگی CSS مربوطه تخصیص داده می شود:
همه اینها ضروری بود زیرا اینترنت اکسپلورر نسخه پنجم از ویژگی تورفتگی های خارجی که قبلاً وجود داشت و توسط مرورگرهای دیگر پشتیبانی می شد پشتیبانی نمی کند، که به طور خودکار همان فاصله را به چپ و راست عنصر تراز شده در پرواز اختصاص می دهد. روش فوق هنوز در حال استفاده است.
اما IE5 و IE5.5 در گذشته هستند، بنابراین کد HTML را می توان ساده تر و ظریف تر کرد:
عدم وجود بلوک های اضافی غیر ضروری به لطف CSS مناسب به دست می آید:
این ویژگی ویژگی یک عنصر بلوک را به تصویر اختصاص می دهد که نیاز به استفاده از تصویر یا اطراف آن را از بین می برد. سپس، اعلان لایه‌های بالا و پایین را صفر می‌کند و لایه‌های چپ و راست را روی یک مقدار معادل خودکار تنظیم می‌کند که تصویر را با مرکز تراز می‌کند.
آیا نیاز به اختصاص دادن لایه های مختلف بالا و پایین دارید؟ مشکلی نیست اختصارات را فراموش نکنید:
متأسفانه، برخلاف موارد تراز کردن تصاویر در لبه‌های چپ و راست (و)، هیچ راهی برای پیچیدن متن در اطراف یک تصویر در مرکز با استفاده از روش‌های استاندارد وجود ندارد. البته اگر خیلی مهم باشد قابل انجام است.
همچنین، اگر تصویر نیز یک پیوند باشد، بدون توجه به عرض تصویر، ناحیه پیوند تا کل عرض بلوک گسترش می یابد. در برخی موارد، این یک نقطه ضعف است.
روش تراز بندی فوق برای سایت هایی که از تصاویر داخل متن (اخبار، مقاله) استفاده می کنند مناسب است. البته برای گالری های عکس، راه های پیچیده تری برای تراز کردن تصاویر وجود دارد.
| اینترنت اکسپلورر | کروم | اپرا | سافاری | فایرفاکس | اندروید | iOS |
| 6.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
وظیفه
عکس را با عنوان در مرکز افقی صفحه وب تراز کنید.
تصمیم گیری
تصاویر متنی اغلب در مرکز صفحه وب، با متن قبل و بعد از تصویر قرار می گیرند. چنین ترتیبی از عناصر به شما امکان می دهد یک متن بزرگ را به بلوک های معنایی بشکنید و توجه را به نقاشی ها جلب کنید.
بیایید ابتدا به مرکز تصویر نگاه کنیم. برای این کار، ویژگی text-align style را با مرکز مقدار به انتخابگر P اضافه کنید. در همان زمان، برچسب باید داخل یک پاراگراف (برچسب
). برای اینکه تمام پاراگراف های صفحه در مرکز قرار نگیرند، کلاس fig خودمان را معرفی می کنیم و تمام اعمال را با آن انجام می دهیم. مثال 1 نحوه انجام این کار را نشان می دهد.
مثال 1: استفاده از text-align
HTML5CSS 2.1IECrOpSaFx
نتیجه این مثال در شکل نشان داده شده است. یکی
برنج. 1. تصویر در مرکز صفحه وب تراز شده است
شما همچنین می توانید یک توضیح به عکس اضافه کنید. متن باید بلافاصله بعد از تصویر قرار گیرد و به طور مشابه در مرکز قرار گیرد. همه چیز در اینجا ساده است، دوباره از کلاس خود استفاده خواهیم کرد، اما قبلاً آن را روی برچسب اعمال می کنیم
مثال 2. شرح
HTML5CSS 2.1IECrOpSaFx
نتیجه این مثال در شکل نشان داده شده است. 2.
چگونه یک عکس را با مرکز یک صفحه وب تراز کنیم؟
2. امضای زیر شکل
تگ برای بلوک عکس استفاده می شود
CSS تصویر مرکزی
پنجره ها: اینترنت اکسپلورر 6.0 و بالاتر، فایرفاکس 1.0 و بالاتر، گوگل کروم، اپرا 5.0 و بالاتر [ 1 ]، سافاری 3.1 و بالاتر، SeaMonkey 1.0 و بالاتر [ 2 ].
لینوکس: Firefox 1.0+، Google Chrome / Chromium، Opera 5.0+، SeaMonkey 1.0+ [ 3 ]، NetSurf 2.6+، Hv3.
مرکز افقی تصویر با استفاده از CSS. مثال:
HTML/XHTML. کد:
<بخشکلاس = " مثال«>
<imgsrc=» image.jpg» alt=» تصویر» / >
</ بخش>
.مثال(موقعیت: نسبی؛ سمت چپ: 0 پیکسل؛ بالا: 0 پیکسل؛ ارتفاع: خودکار؛ عرض: 100%؛ شناور: سمت چپ؛ بالشتک: 10 پیکسل؛ حاشیه: 1 پیکسل #ccc جامد؛ پس‌زمینه: #fafafa؛)
.مثالimg(نمایش: بلوک؛ حاشیه: 0 خودکار؛)
ویژگی های CSS ظرف (در این مورد مثال) می تواند بسیار متفاوت باشد، تراز مرکزی تصویر با استفاده از سبک هایی ایجاد می شود که مستقیماً با تصویر مرتبط هستند: .مثالimg(نمایش: بلوک؛ حاشیه: 0 خودکار؛).
زیرمجموعه های متفاوت و مضمون
CSS تصویر مرکزی
مرکز افقی تصویر با استفاده از CSS. مثال: HTML / XHTML.
تراز کردن یک تصویر در مرکز HTML و CSS
کد:
[ 1 ] و همچنین در Opera 4.0+، اگر از مختصر CSS استفاده نمی شود. یعنی اگر کد CSS به شکل .example img باشد (نمایش: بلوک؛ حاشیه-چپ: خودکار؛ حاشیه-راست: خودکار؛). [ 2 ] همچنین در Netscape 6.01+، Mozilla 0.6+. [ 3 ] همچنین در Netscape 6.01+، Mozilla 0.6+.
پیوندهای الکترونیکی استفاده
پرش به صفحات: ELlinks - مرورگر وب مبتنی بر متن یا کنسول. توضیحات: ویژگی ها، تصاویر، از کجا دانلود کنید. پیوندهای الکترونیکی راه اندازی - نحوه راه اندازی ELlinks. راه اندازی ELinks به شما امکان می دهد تقریباً هر کاری را که می توانید از طریق استفاده از منوهای آن انجام دهید. بنابراین آنچه در ادامه می‌آید فقط در مورد نحوه راه‌اندازی و اجرای ELinks و نحوه انجام چند کار دیگر به عنوان مثال است. 1) نحوه اجرای ELinks - ELinks را می توان در یک محیط رابط کاربری گرافیکی (X Windows، MS Windows و غیره) یا با یک رابط خط فرمان اجرا کرد. در حالت اول، ابتدا باید یک شبیه ساز / کنسول ترمینال راه اندازی شود: xterm، rxvt، کنسول Win32 و موارد دیگر: ELinks (Linux) - برای شروع ELinks، دستور را وارد کنید: elinks - برای شروع ELinks، باز کردن یک سند وب از اینترنت : elinks آدرس سند وب - وب - برای راه اندازی ELinks برای دسترسی به هارد دیسک برای مرور پوشه های محلی: elinks file:/// یا: elinks / - برای راه اندازی ELinks باز کردن یک پوشه محلی: elinks file:///home/user1/ یا : elinks /home/user1/ - برای اجرای ELinks که یک فایل محلی را باز می کند: elinks file:///home/user1/document1.htm یا: elinks /home/user1/document1.htm ELinks (ویندوز) - برای اجرای ELinks، دستور را وارد کنید: elinks - برای راه‌اندازی ELinks که یک سند وب را از اینترنت باز می‌کند: elinks آدرس وب سند وب - برای راه‌اندازی ELinks با دسترسی به هارد دیسک برای مرور پوشه‌های محلی: elinks file:/// - برای اجرای ELinks باز کردن پوشه محلی: elinks file://c/home/user1/ - چه برای اجرای ELinks برای باز کردن یک فایل محلی: elinks file://c/home/user1/document1.htm 2) برای دسترسی به منوی ELinks: Esc را روی صفحه کلید فشار دهید 3) برای باز کردن یک سند وب در یک ELinks از قبل در حال اجرا: g را فشار دهید روی صفحه کلید یا Esc —> فایل —> به URL بروید —> [ آدرس وب را وارد کنید ] —> وارد کنید 4) به عقب برگردید: کلید پیکان چپ روی صفحه کلید یا Esc —> فایل —> بازگشت به عقب 5) باز کردن پیوند در پس زمینه جدید تب : Shift — t یا Esc —> پیوند —> باز کردن در برگه جدید در پس‌زمینه 6) به تب بعدی بروید: Shift —> یا Esc —> مشاهده —> تب بعدی 7) بستن برگه: c را در صفحه کلید یا Esc فشار دهید —> مشاهده —> زبانه بستن 8) هنگامی که ELinks در شبیه ساز ترمینال اجرا می شود، URI را به برنامه خارجی منتقل کنید.
تاریخ: 2010-09-07
در یک سند html، تصاویر به صورت افقی، عمودی و وسط تراز می شوند.
تراز افقی تصویر
برای کنترل تصویر به صورت افقی از ویژگی استفاده کنید تراز = "".
تراز کردن تصاویر در مرکز در HTML
در معنای آن نشان دهید ترک کرداگر می خواهید تصویر را در سمت چپ صفحه تراز کنید یا مقدار درست- در سمت راست به طور پیش فرض، تصویر همیشه در سمت چپ صفحه تراز می شود:
تراز عمودی تصویر
با همین صفت تراز = ""شما می توانید موقعیت تصویر و به صورت عمودی را کنترل کنید. برای انجام این کار، در ارزش آن باید بنویسید بالابرای تراز بالا، وسط- در وسط و پایین- در امتداد مرز پایین:
توجه: ثبت images/photo.jpgبه این معنی است که تصویر در یک دایرکتوری نیست، بلکه در پوشه تصاویر است.
تراز کردن تصویر در مرکز صفحه
علاوه بر این، تصویر را می توان در مرکز قرار داد. برای انجام این کار، تگ تصویر را در یک تگ جفت قرار دهید
1.1 مقدمه ای بر html
1.2 ساختار سند html
2.1 پاراگراف در html
2.2 عنوان در html
2.3 نقل قول ها و نظرات در html
2.4 فضای خالی و تگ های شکستن در html
3.1 لیست شماره گذاری شده html
3.2 لیست گلوله شده
3.3 لیست های تو در تو
4.1 انتخاب متن html
4.2 تایپ و اندازه فونت
4.3 تغییر رنگ متن در html
4.4 حاشیه و پس زمینه صفحه
5.1 درج تصویر در سایت
من دوست دارم وظایف طرح بندی جالبی را حل کنم و با در نظر گرفتن تجربه من در این زمینه، کمی بیش از 5 سال است، چنین کارهایی اغلب به چشم نمی خورد.من اخیراً با چندین مشکل مانند این روبرو شدم:
1. قرار دادن تصویر در مرکز صفحه و کوچک کردن آن در صورت تغییر اندازه مرورگر.
در اصل، هر دو کار اول و دوم را می توان با استفاده از یک جاوا اسکریپت کوچک حل کرد، اما من می خواستم آن را هوشمندانه از طریق html + css انجام دهم.کار دیگر با این واقعیت آسان تر شد که سایتی که در آن استفاده می شود مدرن بود و پشتیبانی به ie9 +، FF، Chrome، Safari، Opera محدود بود.
2. مرکزیت مطلق تصویر بدون توجه به اندازه پنجره مرورگر.
اما با این من مجبور شدم سرهم بندی کنم. ایده اولیه این بود:
.wrapper( سرریز: پنهان؛ موقعیت: ثابت؛ بالا: 0؛ سمت راست: 0؛ پایین: 0؛ سمت چپ: 0؛ ) ;) آیتم img( حاشیه: -50% 0 0 -50%؛ )
این ایده بر اساس منطق زیر بود:
- واحد بیرونی، .لفاف، به تمام عرض و ارتفاع آزاد کشیده شده است.
- واحد داخلی، آیتم، عرض و ارتفاع تصویر را می گیرد که در داخل قرار دارد، زیرا بلوک درون خطی است. و با گوشه سمت چپ بالا به مرکز بلوک والد تنظیم می شود.
- حذف تصویر در حاشیه منهای، که فقط باید آن را دقیقاً در مرکز تراز می کرد .لفاف
من با به خاطر سپردن تبدیل، یا بهتر است بگوییم، تابع ترجمه آن تصمیم گرفتم، که، همانطور که بود، نمایش شی را تغییر می دهد، اما از جایی که در آن بود، خارج می شود. و معلوم شد که با جایگزینی حاشیه تصویر با transform: translate(-50%, -50%); مشکل بلافاصله حل می شود و این چیزی است که در پایان اتفاق افتاد:
*( بالشتک: 0؛ حاشیه: 0؛ تراز عمودی: بالا؛ ) html، بدنه(عرض: 100%؛ ارتفاع: 100%؛ ) .wrapper( سرریز: پنهان؛ موقعیت: ثابت؛ بالا: 0؛ سمت راست: 0 ؛ پایین: 0؛ سمت چپ: 0؛ ) .item( موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ نمایش: بلوک درون خطی؛ ) .item img( -webkit-transform: translate(-50%, - 50%)؛ -moz-transform: translate(-50%, -50%)؛ transform: translate(-50%, -50%)؛ )
PS: من مطمئن نیستم که آیا اینها تنها گزینه هستند یا نه. فکر نمی کنم این گزینه ها برای همه مناسب باشد.
اما من مطمئناً می دانم که اگر آنها در مورد من مطرح شوند، آنگاه افرادی هستند که ممکن است در انجام وظایف خود بسیار کمک کننده باشند. علاوه بر این، اگر کمی به کد اضافه کنید، می‌توانید عصا را برای IE قدیمی‌تر اضافه کنید، من آن را اضافه نکردم زیرا نمی‌خواستم کد تمیز را به خاطر مرورگرهای بسیار قدیمی خراب کنم.
ZY2: انتقاد و توصیه بسیار استقبال می شود. ممنون که تا آخر خواندید.
برچسب‌ها: html، css، css3، تصویر، تصویر، تصویر، تراز، تراز عمودی
وظیفه
عکس را با عنوان در مرکز افقی صفحه وب تراز کنید.
تصمیم گیری
تصاویر متنی اغلب در مرکز صفحه وب، با متن قبل و بعد از تصویر قرار می گیرند. چنین ترتیبی از عناصر به شما امکان می دهد یک متن بزرگ را به بلوک های معنایی بشکنید و توجه را به نقاشی ها جلب کنید.
بیایید ابتدا به مرکز تصویر نگاه کنیم. برای انجام این کار، ویژگی text-align style را با مرکز مقدار به انتخابگر P اضافه کنید. در همان زمان، برچسب باید داخل یک پاراگراف (برچسب
). برای اینکه تمام پاراگراف های صفحه در مرکز قرار نگیرند، بیایید کلاس fig خود را معرفی کنیم و همه اقدامات را با آن انجام خواهیم داد. مثال 1 نحوه انجام این کار را نشان می دهد.
مثال 1: استفاده از text-align
HTML5 CSS 2.1 IE Cr Op Sa Fx
متن قبل از تصویر
متن پشت تصویر
نتیجه این مثال در شکل نشان داده شده است. یکی
برنج. 1. تصویر در مرکز صفحه وب تراز شده است
شما همچنین می توانید یک توضیح به عکس اضافه کنید. متن باید بلافاصله بعد از تصویر قرار گیرد و به طور مشابه در مرکز قرار گیرد. همه چیز در اینجا ساده است، دوباره از کلاس خود استفاده خواهیم کرد، اما قبلاً آن را روی برچسب اعمال می کنیم
مثال 2. شرح
HTML5 CSS 2.1 IE Cr Op Sa Fx
نتیجه این مثال در شکل نشان داده شده است. 2.
برنج. 2. امضای زیر شکل
تگ برای بلوک عکس استفاده می شود
