ໃຊ້ blockquote ແນວໃດ? ເອັບເຟັກ HTML blockquote demo demo

WordPressໃນການແກ້ໄຂບົດຄວາມ, ມີປຸ່ມ "block quote" ທົ່ວໄປ▼

ໃຊ້ blockquote ແນວໃດ? ເອັບເຟັກ HTML blockquote demo demo

ເມື່ອນໍາໃຊ້, ມັນຈະເພີ່ມ aເຄື່ອງໝາຍທີ່ຈະເອີ້ນບາງຄຳຖະແຫຼງທີ່ອ້າງອີງ ຫຼືຈຸດເດັ່ນ.

blockquote ໝາຍ ຄວາມວ່າແນວໃດ?

ຕໍ່ໄປນີ້ແມ່ນChen Weiliangຮູບແບບການອ້າງອີງສຳລັບບລັອກ:

ໂຄດຄໍາສັ່ງ blockquote XHTML ແມ່ນອົງປະກອບທີ່ເປັນປະໂຫຍດຫຼາຍ (ຖ້າບາງອັນບໍ່ໄດ້ໃຊ້).ໃນຄວາມຫມາຍ, blockquote ຄວນຖືກນໍາໃຊ້ທຸກຄັ້ງທີ່ທ່ານກໍາລັງອ້າງອີງຂໍ້ຄວາມທີ່ຍາວກວ່າຈາກແຫຼ່ງອື່ນ (ລໍາໂພງອື່ນ, ເວັບໄຊທ໌ອື່ນ, ແລະອື່ນໆ).ນີ້​ແມ່ນ​ວິ​ທີ​ການ​ຈໍາ​ກັດ​ຂໍ້​ຄວາມ​ແລະ​ສະ​ແດງ​ມັນ​ກັບ​ແຫຼ່ງ​ອື່ນໆ​.
ແບບສະໄຕລ໌, ທ່ານສາມາດເຮັດສິ່ງທັງຫມົດນີ້ກັບຫ້ອງຮຽນພິເສດກ່ຽວກັບ tags ວັກ ... ແຕ່ມັນບໍ່ມີປະໂຫຍດຫຍັງເລີຍ, ດຽວນີ້, ມັນບໍ? Blockquotes ມີບາງຮູບແບບຕາມຄ່າເລີ່ມຕົ້ນ.
ຕົວທ່ອງເວັບສ່ວນໃຫຍ່ indent ຂໍ້ຄວາມໃນ tags blockquote, ເຊິ່ງຊ່ວຍໃຫ້ຜູ້ໃຊ້ລະບຸຂໍ້ຄວາມໃນບາງທາງ.ແຕ່ຜູ້ທີ່ເວົ້າວ່າພວກເຮົາຈໍາເປັນຕ້ອງຢຸດຢູ່ທີ່ນັ້ນ?ນີ້ແມ່ນວິທີການຈັດຮູບແບບ blockquotes ຂອງທ່ານດ້ວຍ CSS.

ທົດສອບ test-css.html ແລະເພີ່ມສ່ວນ css ເຂົ້າໄປໃນ html body:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test CSS blockquote</title>
</head>
<blockquote>
  <p>The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?<br>
  Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who's to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.</p>
</blockquote>
</body>
</html>

ໃຊ້ blockquote ແນວໃດ?

ມັນພົບເຫັນວ່າບາງຫົວຂໍ້ WordPress ບໍ່ໄດ້ເພີ່ມຮູບແບບການອ້າງອີງໃນໄຟລ໌ style.css.

ສຳເນົາ ແລະວາງຮູບແບບມຸມມົນຂອງພື້ນຫຼັງສີຟ້າຕໍ່ໄປນີ້ໃສ່ໃນໄຟລ໌ style.css ຂອງຮູບແບບສີສັນ▼

blockquote, q {
    font: bold 21px/1.5 Consolas,"Courier New","KaiTi","KaiTi_GB2312","FangSong_GB2312",SimHei,arial,Monaco,monospace;
    color: #000;
    margin: 1em;
    margin-left: 2em;
    margin-right: 2em;
    padding: 3px;
    max-width: 95%;
    quotes: "\201C""\201D""\2018""\2019";
    background: #C3F3F7;
    border-radius: 20px;
}

ຮູບແບບການອ້າງອິງກໍານົດຂໍ້ຄວາມຕົວຫນັງສື (ຂະຫນາດ, ສີ), ສີພື້ນຫລັງ, ຊ່ອງຫວ່າງ, ຂອບ, ແລະອື່ນໆ ...

ຮູບແບບຊາຍແດນ

ຮູບແບບນີ້ແມ່ນຂ້ອນຂ້າງງ່າຍດາຍ, ນັ້ນແມ່ນ, ກໍານົດຂອບເຂດຊ້າຍແລະກໍານົດຄວາມຫນາ.ສີຄວບຄຸມສີຕົວອັກສອນ, ແລະສີພື້ນຫຼັງຄວບຄຸມສີພື້ນຫຼັງ (ຫຼືກຸ່ມພື້ນຫຼັງໂດຍກົງ).

ຂອບຄວບຄຸມໄລຍະຫ່າງຂອງອົງປະກອບຂອງປ່ອງຢ້ຽມ, ດ້ານຊ້າຍຂອງຊາຍແດນຄວບຄຸມຮູບແບບຊາຍແດນຊ້າຍ, ແລະ padding (ໂດຍສະເພາະດ້ານຊ້າຍຂອງ padding ຊ້າຍ) ຄວບຄຸມໄລຍະຫ່າງຈາກຂໍ້ຄວາມໄປຫາ (ຊ້າຍ) ຂອບ.

ຮູບແບບນີ້ແມ່ນງ່າຍດາຍຄືກັບ blog ງ່າຍໆ.

ສຳເນົາ ແລະວາງຮູບແບບພື້ນຫຼັງສີເຫຼືອງຕໍ່ໄປນີ້ໃສ່ໄຟລ໌ style.css ຂອງຮູບແບບສີສັນ▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • ຂ້າງເທິງນີ້ແມ່ນ 2 ແບບ blockquote.
  • ການເພີ່ມຫຼາຍຮູບແບບທີ່ຄືກັນຈະຖືກຂຽນທັບ.
  • ດັ່ງນັ້ນ, ກະລຸນາເລືອກອັນໃດອັນໜຶ່ງ ແລະເພີ່ມມັນໃສ່ໄຟລ໌ style.css ຂອງຫົວຂໍ້.

ຫວັງ Chen Weiliang Blog ( https://www.chenweiliang.com/ ) shared "ວິທີການໃຊ້ blockquote? HTML ໃນຜົນກະທົບຂອງປ້າຍໂຄສະນາ blockquote, ເພື່ອຊ່ວຍເຈົ້າ.

ຍິນດີຕ້ອນຮັບແບ່ງປັນການເຊື່ອມຕໍ່ຂອງບົດຄວາມນີ້:https://www.chenweiliang.com/cwl-2123.html

ຍິນດີຕ້ອນຮັບສູ່ຊ່ອງ Telegram ຂອງບລັອກຂອງ Chen Weiliang ເພື່ອຮັບອັບເດດຫຼ້າສຸດ!

🔔 ເປັນຜູ້ທຳອິດທີ່ໄດ້ຮັບ "ຄູ່ມືການໃຊ້ເຄື່ອງມືການຕະຫຼາດເນື້ອຫາ ChatGPT AI" ທີ່ມີຄຸນຄ່າໃນລາຍການທາງເທິງ! 🌟
📚ຄູ່ມືນີ້ມີຄຸນຄ່າອັນມະຫາສານ, 🌟ນີ້ເປັນໂອກາດທີ່ຫາຍາກ, ຢ່າພາດມັນ! ⏰⌛💨
Share and like ຖ້າມັກ!
ການ​ແບ່ງ​ປັນ​ແລະ​ການ​ຖືກ​ໃຈ​ຂອງ​ທ່ານ​ແມ່ນ​ການ​ຊຸກ​ຍູ້​ຢ່າງ​ຕໍ່​ເນື່ອງ​ຂອງ​ພວກ​ເຮົາ​!

 

评论评论

ທີ່ຢູ່ອີເມວຂອງທ່ານຈະບໍ່ຖືກເຜີຍແຜ່. ທົ່ງນາທີ່ກໍານົດໄວ້ແມ່ນຖືກນໍາໃຊ້ * ປ້າຍ ກຳ ກັບ

ເລື່ອນໄປເທິງສຸດ