display: inline-block;<\/code>\n<\/p> Buat animasi teks paparan .container {\n display: inline-block;\n}<\/pre>\n Animasi Typewriter akan membuat kesan verbatim untuk teks dalam elemen <\/p> yang akan dipaparkan. Kami akan menggunakan peraturan animasi
CSS: typed-out<\/code>\n\n \n Typewriter effect<\/title>\n <style>\n body{\n background: navajowhite;\n background-size: cover;\n font-family: 'Trebuchet MS', sans-serif; \n }\n <\/style>\n <\/head>\n <body>
<h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <div id="377j5v51b" class=\"container\">\n <div id="377j5v51b" class=\"typed-out\">Web Developer<\/div>\n <\/div>\n <\/body>\n<\/html><\/pre>\n<p> Seperti yang anda lihat, semua animasi ini adalah mengubah lebar elemen dari 0% hingga 100%. <\/p>\n<p> Sekarang, kami menyertakan animasi ini dalam kelas <code>typed-out<\/code> kami dan menetapkan orientasi animasinya ke <code>forwards<\/code> untuk memastikan bahawa elemen teks tidak kembali ke <code>width: 0<\/code> selepas animasi selesai: <\/p>\n<pre class='brush:php;toolbar:false;'>.typed-out {\n overflow: hidden;\n border-right: .15em solid orange;\n font-size: 1.6rem;\n width: 0;\n}<\/pre>\n<p> elemen teks kami akan dipaparkan dari kiri ke kanan dengan cara yang lancar: <\/p>\n<p> tambah langkah untuk mencapai kesan mesin taip <\/p>\n<p> Setakat ini, teks kami telah dipaparkan, tetapi ia adalah cara yang lancar untuk tidak memaparkan verbatim teks. Ini adalah permulaan, tetapi jelasnya ia tidak kelihatan seperti kesan mesin taip. <\/p>\n<p> Agar animasi ini untuk memaparkan verbatim elemen teks atau langkah demi langkah (sama seperti mesin taip), kita perlu membahagikan animasi menaip yang terkandung dalam kelas <code>typed-out<\/code> . Di sinilah fungsi CSS <code>steps()<\/code> dimainkan: <\/p>\n<pre class='brush:php;toolbar:false;'>.container {\n display: inline-block;\n}<\/pre>\n<p> Seperti yang anda lihat, kami menggunakan fungsi CSS <code>steps()<\/code> untuk membahagikan animasi menaip ke dalam 20 langkah. <\/p>\n<p> Laraskan langkah -langkah untuk menaip lebih lama <\/p>\n<p> Untuk menyesuaikan teks yang lebih lama, anda perlu meningkatkan langkah dan tempoh animasi menaip. <\/p>\n<p> Laraskan langkah -langkah untuk menaip yang lebih pendek <\/p>\n<p> Untuk menyesuaikan teks yang lebih pendek, anda perlu mengurangkan langkah dan tempoh animasi menaip. <\/p>\n<p> Buat dan tetapkan animasi kursor berkelip <\/p>\n<p> Nampaknya, mesin taip mekanikal asal tidak mempunyai kursor yang berkelip, tetapi menambahnya untuk meniru kesan kursor berkelip dari pemproses komputer\/kata yang lebih moden telah menjadi tradisi. Animasi kursor berkelip membantu membuat teks dicetak menonjol dari elemen teks statik. <\/p>\n<p> Untuk menambah animasi kursor berkelip ke animasi mesin taip kami, kami akan mula membuat animasi berkelip: <\/p>\n<pre class='brush:php;toolbar:false;'>@keyframes typing {\n from { width: 0 }\n to { width: 100% }\n}<\/pre>\n<p> Di laman web kami, animasi ini akan mengubah warna sempadan sempadan elemen <code>typed-out<\/code> (digunakan sebagai kursor untuk kesan mesin taip) dari telus ke oren. <\/p>\n<p> Kami menyertakan animasi ini dalam peraturan kelas <code>typed-out<\/code> dan menetapkan sifat animasinya untuk <code>infinite<\/code> untuk membuat kursor hilang dan muncul semula selama -lamanya setiap 0.8 saat: <\/p>\n<pre class='brush:php;toolbar:false;'>.typed-out{\n overflow: hidden;\n border-right: .15em solid orange;\n white-space: nowrap;\n font-size: 1.6rem;\n width: 0;\n animation: typing 1s forwards;\n}<\/pre>\n<p> kod untuk menyesuaikan kesan menaip berkelip <\/p>\n<p> kita boleh membuat kursor kurus atau lebih tebal dengan menyesuaikan atribut <code>border-right: .15em solid orange;<\/code>, atau anda boleh membuat warna kursor berbeza, berikannya <code>border-radius<\/code>, menyesuaikan kekerapan kelipannya, dan sebagainya. <\/p>\n<p> unsur menggabungkan animasi teks mesin taip <\/p>\n<p> Sekarang anda tahu bagaimana membuat kesan mesin taip di CSS, sudah tiba masanya untuk menunjukkan beberapa kes penggunaan praktikal dan relevan untuk kesan mesin taip ini. <\/p>\n<p> Kesimpulan <\/p>\n<p> Dalam artikel ini, kita faham betapa mudahnya untuk membuat teks \"mesin taip\" animasi menggunakan CSS. Kesan menaip ini pasti dapat menambah keseronokan dan menyeronokkan ke halaman anda. <\/p><p> Walau bagaimanapun, ia mungkin bernilai amaran lembut pada akhirnya. Teknik ini lebih baik digunakan untuk sedikit teks bukan kritikal, hanya untuk menambah sedikit keseronokan tambahan. Tetapi berhati-hati untuk tidak terlalu bergantung pada itu, kerana terdapat beberapa batasan untuk menggunakan animasi CSS seperti ini. Pastikan untuk menguji teks mesin taip anda pada pelbagai peranti dan saiz viewport, kerana hasilnya mungkin berbeza mengikut platform. Juga pertimbangkan pengguna akhir yang bergantung kepada teknologi bantuan, idealnya, beberapa ujian kebolehgunaan boleh dilakukan untuk memastikan anda tidak menimbulkan kesulitan kepada pengguna. Kerana anda boleh melakukan sesuatu dengan CSS tulen tidak semestinya bermakna anda sepatutnya. Jika kesan mesin taip penting bagi anda dan anda mahu menggunakannya untuk kandungan yang lebih kritikal, mungkin sekurang -kurangnya mempertimbangkan penyelesaian JavaScript juga. <\/p>\n<p> Bagaimanapun, saya harap anda menikmati siaran ini dan ia membuat anda berfikir tentang perkara -perkara lain yang boleh anda lakukan dengan animasi CSS untuk menambah keseronokan dan menyeronokkan ke halaman anda. <\/p>\n<p> soalan yang sering ditanya mengenai membuat kesan mesin taip CSS <\/p>\n<p> Akhirnya, mari kita jawab beberapa soalan yang paling biasa tentang cara membuat kesan mesin taip di CSS. <\/p>\n<ul>\n<li> <strong> Apakah kesan mesin taip? <\/strong> <\/li>\n<\/ul>\n<p> \"Kesan Typewriter\" adalah teknik animasi yang membuat rentetan teks muncul perkataan dengan perkataan pada skrin seolah -olah ia ditaip dalam masa nyata oleh mesin taip. Kesan ini biasanya dibuat dengan JavaScript, tetapi ia juga boleh dilaksanakan menggunakan CSS sahaja, seperti yang ditunjukkan dalam artikel ini. <\/p>\n<ul>\n<li> <strong> Apakah animasi mesin taip? <\/strong> <\/li>\n<\/ul>\n<p> mesin taip mencetak teks satu huruf pada satu masa. Animasi Taip adalah animasi yang meniru menaip mesin taip, menyampaikan teks dengan satu huruf pada satu masa. Ia adalah kesan animasi yang popular di banyak laman web. <\/p>\n<ul>\n<li> <strong> Bagaimana membuat teks animasi menaip dalam CSS? <\/strong> <\/li>\n<\/ul>\n<p> CSS moden menyediakan pelbagai alat untuk membuat animasi, termasuk <code>animation<\/code>, <code>@keyframes<\/code>, <code>steps()<\/code>. Alat ini digunakan untuk memaparkan teks secara beransur -ansur yang pertama kali tersembunyi melalui atribut <code>overflow<\/code>. <\/p>\n<ul>\n<li> <strong> Bagaimana menggunakan CSS untuk membuat animasi mesin taip yang disesuaikan? <\/strong> <\/li>\n<\/ul>\n<p> Membuat animasi mesin taip yang disesuaikan dengan CSS melibatkan penggunaan frame dan sifat CSS untuk mengawal bagaimana teks kelihatan dan berkelakuan semasa menaip pada skrin. Anda boleh membuatnya disesuaikan dengan mendedahkan beberapa parameter animasi sebagai pembolehubah CSS (sifat tersuai) supaya anda dapat dengan mudah mengubahnya dalam lembaran styles anda. Contohnya: <st>\n<q>\n<\/q> Dalam kod CSS ini, kami mentakrifkan sifat tersuai (<\/p> dan <pre class='brush:php;toolbar:false;'><!doctype html>\n<html>\n <head>\n <title>Typewriter effect<\/title>\n <style>\n body{\n background: navajowhite;\n background-size: cover;\n font-family: 'Trebuchet MS', sans-serif; \n }\n <\/style>\n <\/head>\n <body>\n <div id="377j5v51b" class=\"container\">\n <div id="377j5v51b" class=\"typed-out\">Web Developer<\/div>\n <\/div>\n <\/body>\n<\/html><\/pre>) untuk membuat animasi disesuaikan. Anda boleh menukar nilai lalai dengan mengubahsuai sifat -sifat ini. <p>\n<code>--typewriter-text<\/code>\n<code>--typewriter-duration<\/code> <\/p> Bagaimana untuk menghentikan kursor selepas surat terakhir elemen <ul> dicetak sepenuhnya? <li> <strong>\n<code>typed-out<\/code>\n<\/strong> Untuk menghentikan kursor huruf terakhir elemen <\/li> dalam animasi mesin taip CSS, anda boleh menggunakan animasi CSS dan atribut <\/ul>: <p><pre class='brush:php;toolbar:false;'><!doctype html>\n<html>\n <head>\n <title>Typewriter effect<\/title>\n <style>\n body{\n background: navajowhite;\n background-size: cover;\n font-family: 'Trebuchet MS', sans-serif; \n }\n <\/style>\n <\/head>\n <body>\n <div id="377j5v51b" class=\"container\">\n <div id="377j5v51b" class=\"typed-out\">Web Developer<\/div>\n <\/div>\n <\/body>\n<\/html><\/pre>\n<p> Di CSS di atas, animasi mesin taip secara beransur -ansur meningkatkan lebar unsur -unsur dalam bekas, dengan berkesan menaip teks. Hartanah <code>.typewriter<\/code> ditetapkan kepada <code>animation-fill-mode<\/code> untuk memastikan bahawa animasi tetap muktamad (dimainkan sepenuhnya) selepas selesai. Dengan tetapan ini, kursor akan berkelip di elemen <code>forwards<\/code> selepas ia dicetak sepenuhnya. <code>typed-out<\/code>\n<\/p>\n<ul> <li> Apakah beberapa contoh laman web yang berkesan menggunakan kesan mesin taip? <strong> <\/strong>\n<\/li>\n<\/ul> Animasi mesin taip sering digunakan di laman web seperti laman portfolio, terutamanya pada pereka dan laman web pemaju, yang digunakan untuk menyerlahkan kemahiran utama dan menambah rasa kreatif ke halaman, dengan itu menarik perhatian pembaca. Kesan mesin taip kadang -kadang digunakan di laman web blog dan halaman log masuk serta demonstrasi produk. <p><\/p>\n<\/div><\/code><\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://m.miracleart.cn/ms/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://m.miracleart.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a>
<a href="http://m.miracleart.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a>
<a href="http://m.miracleart.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a>
<a href="http://m.miracleart.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a>
<a href="http://m.miracleart.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a>
<a href="http://m.miracleart.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a>
<a href="http://m.miracleart.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a>
<a href="http://m.miracleart.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://m.miracleart.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a>
<a href="http://m.miracleart.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ms')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="cari" onclick="searchs('ms')"><img src="/static/imghw/find.png" alt="cari"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Melayu<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:;" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://m.miracleart.cn/ms/" title="Rumah"
class="phpgenera_Details_mainL1a">Rumah</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/ms/web-designer.html"
class="phpgenera_Details_mainL1a">hujung hadapan web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/ms/css-tutorial.html"
class="phpgenera_Details_mainL1a">tutorial css</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Cara membuat kesan mesin taip CSS untuk laman web anda</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Cara membuat kesan mesin taip CSS untuk laman web anda</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://m.miracleart.cn/ms/member/1242473.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/001/242/473/646b03ec7509a724.jpg" src="/static/imghw/default1.png" alt="Jack chen">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://m.miracleart.cn/ms/member/1242473.html" class="author_name">Jack chen</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 08, 2025 am 10:20 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p> CSS tulen mencipta kesan teks mesin taip yang menarik </p>
<p> <strong> mata teras: </strong> </p>
<ul>
<li> Kesan mesin taip CSS menjadikan kandungan laman web lebih dinamik dan menarik dengan secara beransur -ansur memaparkan teks, dan boleh digunakan untuk halaman log masuk, laman web peribadi dan demonstrasi kod. </li>
Kesan mesin taip <li> boleh dibuat dengan menggunakan fungsi CSS <code>steps()</code> untuk menukar lebar elemen teks dari 0% hingga 100%, dan untuk mensimulasikan kursor "putout" teks melalui animasi. </li>
<li> Kesan menaip boleh diselaraskan dengan meningkatkan atau mengurangkan bilangan langkah dan tempoh animasi menaip untuk menampung teks yang lebih panjang atau lebih pendek. </li>
Kesan mesin taip <li> boleh digunakan bersamaan dengan animasi kursor yang berkelip untuk meningkatkan kesannya, dan kursor boleh disesuaikan dengan menyesuaikan sifat, warna, kekerapan berkedip, dan lain -lain. <code>border-right</code>
</li>
</ul> Artikel ini akan membimbing anda bagaimana untuk membuat kesan mesin taip teks yang dinamik dan lebih menarik menggunakan CSS tulen. <p>
</p> Teks simulasi kesan mesin taip dipaparkan perkataan dengan perkataan, sama seperti menaip dalam masa nyata di hadapan anda. <p>
</p> <p> <s>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173898121699865.jpg" class="lazy" alt="How to Create a CSS Typewriter Effect for Your Website "> Menambah kesan mesin taip dalam coretan teks membantu menarik pelawat laman web dan membuat mereka berminat untuk terus membaca. Kesan mesin taip boleh digunakan untuk pelbagai tujuan, seperti membuat halaman log masuk yang menarik, elemen panggilan-ke-tindakan, laman web peribadi, dan persembahan kod. </s></p>
<p> mudah untuk membuat kesan mesin taip </p>
<p> Mewujudkan kesan mesin taip adalah sangat mudah, anda hanya perlu mempunyai pengetahuan asas mengenai animasi CSS dan CSS untuk memahami tutorial ini. </p>
<p> Prinsip kerja kesan mesin taip adalah seperti berikut: </p>
<p>
</p> Animasi Typewriter secara beransur -ansur akan mengubah lebar elemen teks dari 0% hingga 100% dengan menggunakan fungsi CSS <ul>, dengan itu memaparkan elemen teks kami. <li>
<code>steps()</code> Animasi berkelip akan mensimulasikan kursor "putout" teks. </li>
<li>
</li> Buat laman web kesan mesin taip </ul>
<p> Pertama, mari buat halaman web untuk demonstrasi mesin taip. Ia akan mengandungi bekas </p> untuk teks mesin taip, dengan nama kelas <p>: <code><div>
<code>typed-out</code>
gaya gaya untuk bekas teks mesin taip <pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>
<p> Sekarang kita mempunyai susun atur laman web, mari gaya untuk </p> dengan kelas "ditaip-keluar": <p>
<code><div></code>
</p> Sila ambil perhatian bahawa untuk membuat kesan mesin taip berkesan, kami telah menambah yang berikut: <pre class='brush:php;toolbar:false;'>.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</pre>
<p>
</p> <ul> dan <li> pastikan kandungan teks tidak dipaparkan sehingga kesan menaip bermula. <code>"overflow: hidden;"</code>
<code>"width: 0;"</code> </li>, buat kursor mesin taip. <li>
<code>"border-right: .15em solid orange;"</code>
</li> Sebelum membuat kesan menaip, untuk menghentikan kursor selepas huruf terakhir elemen </ul> sepenuhnya menaip (seperti mesin taip atau pemproses perkataan), kami akan membuat bekas untuk elemen <p> dan menambah <code>typed-out</code>: <code>typed-out</code>
<code>display: inline-block;</code>
</p> Buat animasi teks paparan <pre class='brush:php;toolbar:false;'>.container {
display: inline-block;
}</pre>
<p> Animasi Typewriter akan membuat kesan verbatim untuk teks dalam elemen </p> yang akan dipaparkan. Kami akan menggunakan peraturan animasi <p> CSS: <code>typed-out</code><pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>
<p> Seperti yang anda lihat, semua animasi ini adalah mengubah lebar elemen dari 0% hingga 100%. </p>
<p> Sekarang, kami menyertakan animasi ini dalam kelas <code>typed-out</code> kami dan menetapkan orientasi animasinya ke <code>forwards</code> untuk memastikan bahawa elemen teks tidak kembali ke <code>width: 0</code> selepas animasi selesai: </p>
<pre class='brush:php;toolbar:false;'>.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</pre>
<p> elemen teks kami akan dipaparkan dari kiri ke kanan dengan cara yang lancar: </p>
<p> tambah langkah untuk mencapai kesan mesin taip </p>
<p> Setakat ini, teks kami telah dipaparkan, tetapi ia adalah cara yang lancar untuk tidak memaparkan verbatim teks. Ini adalah permulaan, tetapi jelasnya ia tidak kelihatan seperti kesan mesin taip. </p>
<p> Agar animasi ini untuk memaparkan verbatim elemen teks atau langkah demi langkah (sama seperti mesin taip), kita perlu membahagikan animasi menaip yang terkandung dalam kelas <code>typed-out</code> . Di sinilah fungsi CSS <code>steps()</code> dimainkan: </p>
<pre class='brush:php;toolbar:false;'>.container {
display: inline-block;
}</pre>
<p> Seperti yang anda lihat, kami menggunakan fungsi CSS <code>steps()</code> untuk membahagikan animasi menaip ke dalam 20 langkah. </p>
<p> Laraskan langkah -langkah untuk menaip lebih lama </p>
<p> Untuk menyesuaikan teks yang lebih lama, anda perlu meningkatkan langkah dan tempoh animasi menaip. </p>
<p> Laraskan langkah -langkah untuk menaip yang lebih pendek </p>
<p> Untuk menyesuaikan teks yang lebih pendek, anda perlu mengurangkan langkah dan tempoh animasi menaip. </p>
<p> Buat dan tetapkan animasi kursor berkelip </p>
<p> Nampaknya, mesin taip mekanikal asal tidak mempunyai kursor yang berkelip, tetapi menambahnya untuk meniru kesan kursor berkelip dari pemproses komputer/kata yang lebih moden telah menjadi tradisi. Animasi kursor berkelip membantu membuat teks dicetak menonjol dari elemen teks statik. </p>
<p> Untuk menambah animasi kursor berkelip ke animasi mesin taip kami, kami akan mula membuat animasi berkelip: </p>
<pre class='brush:php;toolbar:false;'>@keyframes typing {
from { width: 0 }
to { width: 100% }
}</pre>
<p> Di laman web kami, animasi ini akan mengubah warna sempadan sempadan elemen <code>typed-out</code> (digunakan sebagai kursor untuk kesan mesin taip) dari telus ke oren. </p>
<p> Kami menyertakan animasi ini dalam peraturan kelas <code>typed-out</code> dan menetapkan sifat animasinya untuk <code>infinite</code> untuk membuat kursor hilang dan muncul semula selama -lamanya setiap 0.8 saat: </p>
<pre class='brush:php;toolbar:false;'>.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s forwards;
}</pre>
<p> kod untuk menyesuaikan kesan menaip berkelip </p>
<p> kita boleh membuat kursor kurus atau lebih tebal dengan menyesuaikan atribut <code>border-right: .15em solid orange;</code>, atau anda boleh membuat warna kursor berbeza, berikannya <code>border-radius</code>, menyesuaikan kekerapan kelipannya, dan sebagainya. </p>
<p> unsur menggabungkan animasi teks mesin taip </p>
<p> Sekarang anda tahu bagaimana membuat kesan mesin taip di CSS, sudah tiba masanya untuk menunjukkan beberapa kes penggunaan praktikal dan relevan untuk kesan mesin taip ini. </p>
<p> Kesimpulan </p>
<p> Dalam artikel ini, kita faham betapa mudahnya untuk membuat teks "mesin taip" animasi menggunakan CSS. Kesan menaip ini pasti dapat menambah keseronokan dan menyeronokkan ke halaman anda. </p><p> Walau bagaimanapun, ia mungkin bernilai amaran lembut pada akhirnya. Teknik ini lebih baik digunakan untuk sedikit teks bukan kritikal, hanya untuk menambah sedikit keseronokan tambahan. Tetapi berhati-hati untuk tidak terlalu bergantung pada itu, kerana terdapat beberapa batasan untuk menggunakan animasi CSS seperti ini. Pastikan untuk menguji teks mesin taip anda pada pelbagai peranti dan saiz viewport, kerana hasilnya mungkin berbeza mengikut platform. Juga pertimbangkan pengguna akhir yang bergantung kepada teknologi bantuan, idealnya, beberapa ujian kebolehgunaan boleh dilakukan untuk memastikan anda tidak menimbulkan kesulitan kepada pengguna. Kerana anda boleh melakukan sesuatu dengan CSS tulen tidak semestinya bermakna anda sepatutnya. Jika kesan mesin taip penting bagi anda dan anda mahu menggunakannya untuk kandungan yang lebih kritikal, mungkin sekurang -kurangnya mempertimbangkan penyelesaian JavaScript juga. </p>
<p> Bagaimanapun, saya harap anda menikmati siaran ini dan ia membuat anda berfikir tentang perkara -perkara lain yang boleh anda lakukan dengan animasi CSS untuk menambah keseronokan dan menyeronokkan ke halaman anda. </p>
<p> soalan yang sering ditanya mengenai membuat kesan mesin taip CSS </p>
<p> Akhirnya, mari kita jawab beberapa soalan yang paling biasa tentang cara membuat kesan mesin taip di CSS. </p>
<ul>
<li> <strong> Apakah kesan mesin taip? </strong> </li>
</ul>
<p> "Kesan Typewriter" adalah teknik animasi yang membuat rentetan teks muncul perkataan dengan perkataan pada skrin seolah -olah ia ditaip dalam masa nyata oleh mesin taip. Kesan ini biasanya dibuat dengan JavaScript, tetapi ia juga boleh dilaksanakan menggunakan CSS sahaja, seperti yang ditunjukkan dalam artikel ini. </p>
<ul>
<li> <strong> Apakah animasi mesin taip? </strong> </li>
</ul>
<p> mesin taip mencetak teks satu huruf pada satu masa. Animasi Taip adalah animasi yang meniru menaip mesin taip, menyampaikan teks dengan satu huruf pada satu masa. Ia adalah kesan animasi yang popular di banyak laman web. </p>
<ul>
<li> <strong> Bagaimana membuat teks animasi menaip dalam CSS? </strong> </li>
</ul>
<p> CSS moden menyediakan pelbagai alat untuk membuat animasi, termasuk <code>animation</code>, <code>@keyframes</code>, <code>steps()</code>. Alat ini digunakan untuk memaparkan teks secara beransur -ansur yang pertama kali tersembunyi melalui atribut <code>overflow</code>. </p>
<ul>
<li> <strong> Bagaimana menggunakan CSS untuk membuat animasi mesin taip yang disesuaikan? </strong> </li>
</ul>
<p> Membuat animasi mesin taip yang disesuaikan dengan CSS melibatkan penggunaan frame dan sifat CSS untuk mengawal bagaimana teks kelihatan dan berkelakuan semasa menaip pada skrin. Anda boleh membuatnya disesuaikan dengan mendedahkan beberapa parameter animasi sebagai pembolehubah CSS (sifat tersuai) supaya anda dapat dengan mudah mengubahnya dalam lembaran styles anda. Contohnya: <st>
<q>
</q> Dalam kod CSS ini, kami mentakrifkan sifat tersuai (</p> dan <pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>) untuk membuat animasi disesuaikan. Anda boleh menukar nilai lalai dengan mengubahsuai sifat -sifat ini. <p>
<code>--typewriter-text</code>
<code>--typewriter-duration</code> </p> Bagaimana untuk menghentikan kursor selepas surat terakhir elemen <ul> dicetak sepenuhnya? <li> <strong>
<code>typed-out</code>
</strong> Untuk menghentikan kursor huruf terakhir elemen </li> dalam animasi mesin taip CSS, anda boleh menggunakan animasi CSS dan atribut </ul>: <p><pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>
<p> Di CSS di atas, animasi mesin taip secara beransur -ansur meningkatkan lebar unsur -unsur dalam bekas, dengan berkesan menaip teks. Hartanah <code>.typewriter</code> ditetapkan kepada <code>animation-fill-mode</code> untuk memastikan bahawa animasi tetap muktamad (dimainkan sepenuhnya) selepas selesai. Dengan tetapan ini, kursor akan berkelip di elemen <code>forwards</code> selepas ia dicetak sepenuhnya. <code>typed-out</code>
</p>
<ul> <li> Apakah beberapa contoh laman web yang berkesan menggunakan kesan mesin taip? <strong> </strong>
</li>
</ul> Animasi mesin taip sering digunakan di laman web seperti laman portfolio, terutamanya pada pereka dan laman web pemaju, yang digunakan untuk menyerlahkan kemahiran utama dan menambah rasa kreatif ke halaman, dengan itu menarik perhatian pembaca. Kesan mesin taip kadang -kadang digunakan di laman web blog dan halaman log masuk serta demonstrasi produk. <p></p>
</div></code></p><p>Atas ialah kandungan terperinci Cara membuat kesan mesin taip CSS untuk laman web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Kenyataan Laman Web ini</div>
<div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat AI Hot</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Gambar buka pakaian secara percuma</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Penyingkiran pakaian AI</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Editor kod yang mudah digunakan dan percuma</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Cina</h3>
</a>
<p>Versi Cina, sangat mudah digunakan</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Hantar Studio 13.0.1</h3>
</a>
<p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Alat pembangunan web visual</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Mac</h3>
</a>
<p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Topik panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8636</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/java-tutorial" title="Tutorial Java" class="phpgenera_Details_mainR4_bottom_title">Tutorial Java</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1783</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1725</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1577</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1441</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ms/faq/zt">Tunjukkan Lagi</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apa itu 'menyekat CSS'?" />
</a>
<a href="http://m.miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_title">Apa itu 'menyekat CSS'?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" />
</a>
<a href="http://m.miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_title">Luaran vs CSS Dalaman: Apakah pendekatan terbaik?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Adakah CSS saya mesti berada di bawah kes?" />
</a>
<a href="http://m.miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_title">Adakah CSS saya mesti berada di bawah kes?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span>
<p class="Articlelist_txts_p">Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Kepekaan kes CSS: Memahami apa yang penting" />
</a>
<a href="http://m.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" class="phphistorical_Version2_mids_title">Kepekaan kes CSS: Memahami apa yang penting</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah AutoPrefixer dan bagaimana ia berfungsi?" />
</a>
<a href="http://m.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_title">Apakah AutoPrefixer dan bagaimana ia berfungsi?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter CSS?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah kaunter CSS?" />
</a>
<a href="http://m.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter CSS?" class="phphistorical_Version2_mids_title">Apakah kaunter CSS?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: Bilakah kes perkara (dan kapan tidak)?" />
</a>
<a href="http://m.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" class="phphistorical_Version2_mids_title">CSS: Bilakah kes perkara (dan kapan tidak)?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ms/faq/1796821622.html" title="Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026469053848.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan" />
</a>
<a href="http://m.miracleart.cn/ms/faq/1796821622.html" title="Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan" class="phphistorical_Version2_mids_title">Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:38 AM</span>
<p class="Articlelist_txts_p">Cssselectorsandpropertynamesarecase-insensitive, whilevaluescanbecase-sensitivedependingoncontext.1) selectorslike'div'and'div'areequivalent.2) propertiesuchas'background-color'and'and'aretaretreatheatthlegase.3)</p>
</div>
</div>
<a href="http://m.miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://m.miracleart.cn/ms/about/us.html">Tentang kita</a>
<a href="http://m.miracleart.cn/ms/about/disclaimer.html">Penafian</a>
<a href="http://m.miracleart.cn/ms/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://m.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="oms2c" class="pl_css_ganrao" style="display: none;"><li id="oms2c"><button id="oms2c"><samp id="oms2c"></samp></button></li><xmp id="oms2c"><strike id="oms2c"><menu id="oms2c"></menu></strike></xmp><rt id="oms2c"></rt><source id="oms2c"><code id="oms2c"><noframes id="oms2c"></noframes></code></source><center id="oms2c"></center><rt id="oms2c"></rt><option id="oms2c"></option><acronym id="oms2c"></acronym><li id="oms2c"></li><option id="oms2c"></option><object id="oms2c"></object><input id="oms2c"></input><button id="oms2c"></button><source id="oms2c"></source><strong id="oms2c"></strong><em id="oms2c"></em><strong id="oms2c"></strong><kbd id="oms2c"></kbd><fieldset id="oms2c"><menu id="oms2c"><tbody id="oms2c"></tbody></menu></fieldset><object id="oms2c"></object><tbody id="oms2c"><em id="oms2c"><del id="oms2c"></del></em></tbody><th id="oms2c"></th><cite id="oms2c"></cite><strike id="oms2c"><menu id="oms2c"><tbody id="oms2c"></tbody></menu></strike><table id="oms2c"></table><tfoot id="oms2c"></tfoot><delect id="oms2c"></delect><abbr id="oms2c"></abbr><source id="oms2c"><strong id="oms2c"><optgroup id="oms2c"></optgroup></strong></source><kbd id="oms2c"><pre id="oms2c"><wbr id="oms2c"></wbr></pre></kbd><cite id="oms2c"><abbr id="oms2c"><kbd id="oms2c"></kbd></abbr></cite><center id="oms2c"></center><center id="oms2c"></center><cite id="oms2c"></cite><input id="oms2c"><tbody id="oms2c"><pre id="oms2c"></pre></tbody></input><option id="oms2c"><delect id="oms2c"><tr id="oms2c"></tr></delect></option><th id="oms2c"></th><s id="oms2c"></s><abbr id="oms2c"></abbr><tfoot id="oms2c"></tfoot><delect id="oms2c"></delect><wbr id="oms2c"><bdo id="oms2c"><abbr id="oms2c"></abbr></bdo></wbr><button id="oms2c"></button><center id="oms2c"></center><source id="oms2c"></source><table id="oms2c"></table><cite id="oms2c"></cite><sup id="oms2c"></sup><delect id="oms2c"><tbody id="oms2c"><wbr id="oms2c"></wbr></tbody></delect><object id="oms2c"></object></div>
</html>