سعید حسینی 2409 ارسال شده در مرداد 91 گزارش بازنشر ارسال شده در مرداد 91 سلامدر این آموزش با کد CSS برای لینک های خاصی که مد نظر دارید میتوانید آیکن اختصاص بدهید:در این مثال عکس ها با پسوند png در پوشه demo-images قرار میگیرند.آدرس های خاص اینترنتی مثل “//:http://”, “https://” , “mailto:” , "ftp"کد HTML:<div class="example1"><ul><li><a href="http://www.google.com">Visit a website</a></li><li><a href="https://www.google.com">Visit a secure website</a></li><li><a href="mailto:email@email.com">Send an email</a></li><li><a href="ftp://www.google.com">Connect to an FTP server</a></li><li><a href="magnet:…">Download from a magnet link</a></li></ul></div>کد CSS:div.example1 ul {list-style-type: none;}div.example1 ul li a[href^="http://"] {padding-left: 20px;background-image: url(demo-images/file.png);background-repeat: no-repeat;}div.examples1 ul li a[href^="https://"] {background-image: url(demo-images/lock.png);}div.example1 a[href^="mailto:"] {background-image: url(demo-images/mail.png);}div.example1 a[href^="ftp://"] {background-image: url(demo-images/folder_ftp.png);}div.example1 a[href^="magnet"] {background-image: url(demo-images/magnet.png);}در فایل های خاص مثل pdf”, “.docx” , “.mp3″ “کد HTML:<div class="example2"><ul><li><a href="http://www.css3.info/demos/files/1.pdf">A link to a PDF document</a></li><li><a href="http://www.css3.info/demos/files/1.docx">A link to a Word document</a></li><li><a href="http://www.css3.info/demos/files/1.xlsx">A link to an Excel document</a></li><li><a href="http://www.css3.info/demos/files/1.mp3">A link to an MP3 file</a></li><li><a href="http://www.css3.info">A normal web link</a></li></ul></div>کد CSS:div.example2 ul {list-style-type: none;}div.example2 ul li a {padding-left: 20px;background-image: url(demo-images/file.png);background-repeat: no-repeat;}div.example2 ul li a[href$=".pdf"] {background-image: url(demo-images/pdf.png);}div.example2 ul li a[href$=".docx"] {background-image: url(demo-images/page_white_word.png);}div.example2 ul li a[href$=".xlsx"] {background-image: url(demo-images/page_white_excel.png);}div.example2 ul li a[href$=".mp3"] {background-image: url(demo-images/audio.png);}دامنه های خاص اینترنتی مانند google.com و yahoo.comکد HTML:<div class="example3"><ul><li><a href="http://www.google.com">A link to Google</a></li><li><a href="http://www.twitter.com/css3">A link to a Twitter profile</a></li><li><a href="https://www.facebook.com/css3.info">A link to a Facebook page</a></li><li><a href="http://www.yahoo.com">A link to Yahoo</a></li><li><a href="http://www.bing.com">Any other link</a></li></ul></div>کد CSS:div.example3 ul {list-style-type: none;}div.example3 ul li a {padding-left: 20px;background-image: url(demo-images/file.png);background-repeat: no-repeat;}div.example3 ul li a[href*="google.com"] {background-image: url(demo-images/google.png);}div.example3 ul li a[href*="twitter.com"] {background-image: url(demo-images/twitter.png);}div.example3 ul li a[href*="facebook.com"] {background-image: url(demo-images/facebook.png);}div.example3 ul li a[href*="yahoo.com"] {background-image: url(demo-images/yahoo.png);}موفق و پیروز باشید. 8 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .