close
تبلیغات در اینترنت
آموزش طراحی پنجره کد , آموزش ساخت codepanel,codepanel, code panel,آموز
صفحه اصلی پرشین استک

{ پرشین استک }

به دنیای برنامه نویسی خوش آمدید
|


پرشین استک تنها یک سایت نیست بلکه یک پروژه همگانی می باشد


تعداد مطالب :
142


تعداد توسعه دهندگان :
11


تاریخ امروز :
جمعه 29 تیر 1397

به کانال تلگرام ما بپیوندید


×

لیست سوالات من

افزودن

چگونه یک بخش کد (Code Panel) برای وبسایت یا وبلاگ خود بسازیم ؟

می خواهم یک بخشی مخصوص کد طراحی کنم که کد ها را از سایر متون موجود در صفحه جدا کند . چگونه می توانم این کار را با CSS و HTML انجام دهم ؟

 

پاسخ :

برای انجام این کار باید مراحل زیر را طی کنید :

مرحله ی اول ) کد های CSS زیر را بین دو تگ <style> و <style/> موجود در بخش head صفحه قرار دهید :

 

.codebox {
    width: 100%;
    background: #bdbdbd;
    padding: 15px;
    font-family: 'codingfont';
    text-align: left;
    direction: ltr;
    color: #fff;
    border-left: 10px solid #70de99;
    display: block;
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.5em;
    word-break: break-all;
    word-wrap: normal;
    overflow: hidden;
    vertical-align: baseline;
    transition-duration: 0.5s;
    box-shadow: 0px 3px 5px gray;
}

 

کد های بالا به ظاهرسازی پنجره در حالت عادی مربوط می شوند . حالا باید کد های CSS دیگری را اضافه کنیم که اگر نشانه گر ماوس بر روی پنجره قرار گرفت ، حالت انیمیشن داشته باشد :

 

.codebox:hover {
  background: #a4a4a4;
  transition-duration: 0.5s;
  box-shadow: none;
}

 

مرحله ی دوم ) حالا نوبت به استفاده از پنجره رسیده . پس می توانید کد های خود را بین دو تگ <code> و <code/> قرار دهید :

 

<pre class="codepanel" >

<code>

       محل قرار گیری کد های شما

<code/>

<pre/>

مرحله ی سوم ) می توانید با توجه به سلیقه ی خود از یک فونت مناسب برای کد استفاده کنید . کد های زیر مربوط به اعلان یک فونت در بخش head و مابین دو تگ <style> و <style/> می شود :


         @font-face {
  font-family: 'codingfont';
  src: url('http://rozup.ir/view/2268102/Inconsolata.eot') format('eot'),  /* IE6–8 */
       url('http://rozup.ir/view/2268104/Inconsolata.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('http://rozup.ir/view/2268103/Inconsolata.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
   

24

17 / 05 / 1396

PERSIAN STACK


چرا گاهی اوقات API موقعیت مکانی سرویس گوگل پلی ، موقعیت مکانی اشتباهی را برمی گرداند ؟

ادامه مطلب

613

چگونه نرم افزار ضبط صدای اندرویدی بسازیم ؟

ادامه مطلب

549

چرا TextView کلمات را با حروف می شکند ؟

ادامه مطلب

497

دانلود تمامی API های اندروید

ادامه مطلب

433

قسمت شانزدهم - جدول ها در HTML

ادامه مطلب

419

چرا وبسایت تجارت الکترونیک Magento 2 در Webview اندروید کار نمی کند ؟

ادامه مطلب

363

دانلود پروژه نمایش جستجوی کتاب برای اندروید

ادامه مطلب

347

چگونه Google API برای سطح API 25 را پیدا کنیم ؟

ادامه مطلب

343

دانلود سورس کد بازی اندرویدی Klooni 1010! + فایل APK

ادامه مطلب

259

آیا راهی برای یافتن تغیرات ماه در نمای تقویم اندروید (calendar view) وجود دارد ؟

ادامه مطلب

243

در تکمیل خودکار اندروید ، دلیل dispatchProvideAutofillStructure() not laid out چیست ؟

ادامه مطلب

231

چرا زمانی که با استفاده از cordova در اندروید 7.0 ، اس ام اس ارسال می کنیم ، با اثتثنای (Exception) امنیتی مواج

ادامه مطلب

227

آموزش ساخت و شخصی سازی Navigation Drawer در اندروید استودیو

ادامه مطلب

211

دانلود تمامی نسخه های gradle برای اندروید

ادامه مطلب

195

دانلود سورس کد اپلیکیشن هواشناسی برای اندروید + فایل APK

ادامه مطلب

179

چگونه ارور com.bumptech.glide.Registry$NoModelLoaderAvailableException: Failed to find any ModelLoaders را در اندروید رفع کنیم ؟

ادامه مطلب

171

دانلود اسکریپت جاوای PS-CH# - ایجاد ورودی متنی پیشرفته

ادامه مطلب

121

دانلود کتابخانه Retrofit برای اندروید + پروژه

ادامه مطلب

117

دانلود سورس کد تمامی نسخه های تلگرام + فایل های نصبی

ادامه مطلب

113

دانلود کتابخانه GSON برای اندروید + پروژه

ادامه مطلب

111

دانلود اسکریپت جاوای PS-CH# - ایجاد ورودی متنی پیشرفته

ادامه مطلب

یکشنبه 05 آذر 1396

قسمت هفدهم - لیست ها در HTML

ادامه مطلب

یکشنبه 21 آبان 1396

چگونه می توان با استفاده از CSS ، رنگ placeholder را تغییر داد ؟

ادامه مطلب

یکشنبه 21 آبان 1396

قسمت شانزدهم - جدول ها در HTML

ادامه مطلب

شنبه 20 آبان 1396

دانلود تمامی نسخه های gradle برای اندروید

ادامه مطلب

شنبه 20 آبان 1396

قسمت پانزدهم - عکس ها در HTML

ادامه مطلب

جمعه 19 آبان 1396

قسمت چهاردهم - لینک ها در HTML

ادامه مطلب

یکشنبه 14 آبان 1396

آموزش ساخت و شخصی سازی Navigation Drawer در اندروید استودیو

ادامه مطلب

یکشنبه 14 آبان 1396

قسمت سیزدهم - CSS در HTML

ادامه مطلب

شنبه 13 آبان 1396

قسمت بیست و پنجم (قسمت آخر) - آموزش ساخت بازی حدس

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و چهارم - آموزش نحوه ی پردازش فایل ها در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و سوم - برنامه تکمیلی جاوا (6)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و دوم - معرفی آرایه ها در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و یکم - برنامه تکمیلی جاوا (5)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیستم - معرفی مفهوم وراثت در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت نوزدهم - برنامه تکمیلی جاوا (4)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت هجدهم - معرفی عبارات کنترلی در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت هفدهم - برنامه تکمیلی جاوا (2-3)

ادامه مطلب

چهارشنبه 10 آبان 1396

چگونه در برنامه نویسی اندروید ، یک ListView با متن و عکس بسازیم ؟

ادامه مطلب

سه شنبه 09 آبان 1396

چگونه در برنامه نویسی اندروید از فونت شخصی خود استفاده کنیم ؟

ادامه مطلب

سه شنبه 09 آبان 1396

قسمت هفدهم - لیست ها در HTML

ادامه مطلب

چگونه می توان با استفاده از CSS ، رنگ placeholder را تغییر داد ؟

ادامه مطلب

قسمت سیزدهم - CSS در HTML

ادامه مطلب

جلسه ی هشتم - استایل در HTML

ادامه مطلب

چرا زمانی که با استفاده از cordova در اندروید 7.0 ، اس ام اس ارسال می کنیم ، با اثتثنای (Exception) امنیتی مواج

ادامه مطلب

آیا راهی برای یافتن تغیرات ماه در نمای تقویم اندروید (calendar view) وجود دارد ؟

ادامه مطلب

چگونه می توان برای وبسایت / وبلاگ ، منویی ساخت که روی تمام دستگاه ها قابل نمایش باشد ؟

ادامه مطلب

چگونه می توان نوار Toast برای وبسایت / وبلاگ ساخت ، طوری که بتوان از آن جهت نمایش هشدار استفاده کرد ؟

ادامه مطلب

چگونه می توان با استفاده از HTML و CSS یک Tooltip شخصی سازی شده ساخت ؟

ادامه مطلب

چگونه یک برای سایت یا وبلاگ خود یک نوار مهارت (Skill Bar) انیمیشن دار بسازیم ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود یک فیلتر لیست یا Filter List بسازیم ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود یک گالری عکس یا Lightbox بسازیم ؟

ادامه مطلب

چگونه می توانم فرم های رزبلاگ را شخصی سازی کنم ؟

ادامه مطلب

چگونه یک مدل ایمیج (Modal Image) برای وبسایت یا وبلاگ خود طراحی کنیم ؟

ادامه مطلب

چگونه یک مدل باکس برای وبسایت یا وبلاگ خود بسازیم ؟

ادامه مطلب

چگونه با html و css یک دکمه سه بعدی و انیمیشن دار بسازیم ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود ، اسلاید شو بسازیم ؟

ادامه مطلب

× برای نظر گذاشتن یا پاسخ دادن به سوالات باید در سایت عضو باشید !

برای حمایت از ما روی بنر های زیر کلیک کنید .

برای سفارش تبلیغات به ما ایمیل بزنید .

ارتباط با ما