อยากเริ่มเขียนเว็บด้วย React แบบคนอื่นบ้าง แต่ไม่รู้จะเริ่มต้นยังไงดี ? 😖
.
ไม่ต้องกังวลไป...เพราะวันนี้แอดสรุปมาให้แล้วจ้า กับสิ่งที่ต้องรู้ก่อนจะเริ่มต้นใช้ Library ที่ช่วยในการเขียนเว็บแอปพลิเคชันอย่าง React
.
มีอะไรต้องรู้บ้าง ? หากพร้อมแล้วไปดูกันเลย ~
.
🌟 พื้นฐาน HTML CSS JavaScript
.
ก่อนอื่นเราต้องมาสำรวจตัวเองก่อนว่าเราเข้าใจพื้นฐานพวกนี้แล้วหรือยัง ถ้ายังไม่เข้าใจ ควรจะไปศึกษาให้เข้าใจอย่างถ่องแท้ก่อนนะ ส่วนพื้นฐานที่แอดพูดถึงก็มีดังนี้
.
🔸 HTML เช่น HTML Element, Form, Table, และ Div เป็นต้น
🔸 CSS เช่น Styling, CSS Selectors และ Box Model
🔸 JavaScript เช่น variables, Conditional Statements, Loops, Data Types, และ DOM เป็นต้น
.
✨ NPM
.
รู้จักการใช้งาน NPM ซึ่งเป็นเครื่องมือที่ช่วยในการติดตั้ง อัปเดต กำหนดค่าต่าง ๆ และรันคำสั่งบางอย่างผ่าน Terminal เพื่อใช้งานคำสั่ง และ Library บนโปรเจกต์ React ของเรานั่นเอง
.
อ่านวิธีการใช้งานเพิ่มเติมได้ที่นี่ 👇
Link : https://www.npmjs.com/
.
✨ React Concept
.
เมื่อเราเรียนรู้พื้นฐานและฝึกฝนจนเชี่ยวชาญแล้ว ขั้นตอนต่อมาเราก็จะต้องเรียนรู้และทำความเข้าใจโครงสร้างและการทำงานของ React เช่น
.
🔹 Create React App - เป็นการตั้งค่าสภาพแวดล้อมและเครื่องมือต่าง ๆ ให้เหมาะสมกับการพัฒนาโปรเจกต์บน React เพื่อให้เราสามารถใช้คุณสมบัติของ JavaScript ได้อย่างเต็มประสิทธิภาพนั่นเอง !
.
อ่านวิธีการติดตั้งแบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/create-a-new-react-app.html
.
🔹 JSX - เป็นส่วนเสริมของ JavaScript ที่ทำให้เราสามารถจัดการกับ UI ใน React ได้อย่างง่ายดาย ซึ่งจะมี Syntax คล้าย ๆ กับ HTML
.
สามารถอ่านเรื่อง JSX แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/introducing-jsx.html
.
🔹 Virtual DOM - เป็นตัวที่ช่วยจัดการ Object และ Element ต่าง ๆ บน React เปรียบเสมือนพิมพ์เขียวของ DOM ถ้าหากมีการแก้ไขหรือเปลี่ยนแปลง Object บน React มันก็จะไม่กระทบกับ DOM ทั้งหมด เพราะมันจะเปลี่ยนแปลงเฉพาะ Object ที่มีการอัปเดตเท่านั้น ทำให้การแสดงผลมีความรวดเร็วมากขึ้นนั่นเอง
.
สามารถอ่านเรื่อง Virtual DOM แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/faq-internals.html
.
🔹 Props & State - Props (Properties) เปรียบเสมือนแท็กใน HTML เช่น src, href, หรือ class แต่ความพิเศษของมันก็คือทำให้ React Component สามารถส่งค่าต่าง ๆ ระหว่างกันได้ ส่วน State จะแตกต่างกับ Props เพราะมันจะเป็นการเก็บค่าเพื่อใช้ใน Component นั้น ๆ เท่านั้น
.
สามารถอ่านเรื่อง Props & State แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/faq-state.html
.
🔹 Conditional Rendering - เป็นการแสดงผล Element ต่าง ๆ บน UI แบบมีเงื่อนไขนั่นเอง โดยใช้ตัวดำเนินการใน JavaScript เช่น if...else เป็นต้น
.
สามารถอ่านเรื่อง Conditional Rendering แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/conditional-rendering.html
.
🔹 React Hook - เป็น Functions เจ๋ง ๆ ใน React ซึ่งเป็นฟีเจอร์ใหม่ที่มีใน React v16.7.0-alpha -ข้อดีของมันก็คือทำให้เราสามารถเรียกใช้ State ต่าง ๆ ใน React แบบไม่ต้องเขียน Class ให้เมื่อยมือ! เป็นการเพิ่มคุณสมบัติของ Component ไม่ว่าจะ Test หรือ Refactor ก็ทำได้ง่าย ๆ
.
สามารถอ่านเรื่อง React Hook แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/hooks-intro.html
.
✨ API
.
เรียนรู้โครงสร้าง และวิธีการดึงข้อมูลจาก API โดยต้องเข้าใจการใช้งานฟังก์ชันใน JavaScript เพื่อช่วยในการดึงข้อมูลและนำมาใช้ภายในโปรเจกต์ หรืออาจจะใช้เครื่องมืออย่าง Axios ซึ่งเป็นอีกหนึ่ง Library ยอดนิยมที่ช่วยให้เราดึงข้อมูลจาก API ได้อย่างง่ายดาย !
.
เพื่อน ๆ สามารถอ่านวิธีการใช้งาน Axios ได้ที่นี่ 👇
Link : https://www.npmjs.com/package/axios
.
✨ Server-side Rendering
.
รู้จักการใช้งานเครื่องมือที่ช่วยในการแสดงผลฝั่ง Server เช่น Next.js, After.js, Rogue ซึ่งเหล่า React Dev ส่วนใหญ่จะนิยมใช้เจ้า Next.js เพราะใช้งานง่าย ไม่ต้อง Config อะไรเพิ่มเติมและช่วยให้เราสามารถเขียนเว็บได้สะดวก รวดเร็วมากขึ้นนั่นเอง !
.
✨ Styling UI
.
ใช้แนวคิด CSS มาช่วยให้เราออกแบบ วาง Layout และจัดองค์ประกอบบนหน้าเว็บไซต์ ซึ่งในปัจจุบันก็มีเครื่องมือต่าง ๆ ที่จะช่วยให้เราเขียน CSS ได้ง่ายมากขึ้น ไม่ว่าจะเป็น Material UI และ TailwindCSS นั่นเอง
.
และเมื่อเราได้เรียนรู้ทุกหัวข้อที่แอดกล่าวมาแล้ว เราก็เริ่มต้นทำโปรเจกต์ React กันได้เลย !! ซึ่งทางทีมแอดเคยทำสรุปการใช้งาน React ไว้ให้แล้ว หากสนใจสามารถกดเข้าไปอ่านกันได้เลย ~
📑 Link : https://www.borntodev.com/2020/07/15/react-101/
.
หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ ที่กำลังเริ่มต้นเขียน React นะ หากชอบเนื้อหานี้ อย่าลืมกดไลก์ กดแชร์ เพื่อเป็นกำลังใจให้พวกเราด้วยล่ะ 😁
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#React #javascript #ฺBorntoDev
同時也有3部Youtube影片,追蹤數超過5,250的網紅Nguyễn Hải Trung,也在其Youtube影片中提到,Tặng bạn 30 khóa học miễn phí Về lập trình web và tiếp thị liên kết Tất cả đều có trên https://gioi.net ? Đặt vé máy bay giá rẻ: http://vnbay.vn ? Đă...
「css box」的推薦目錄:
- 關於css box 在 BorntoDev Facebook 的精選貼文
- 關於css box 在 軟體開發學習資訊分享 Facebook 的最佳解答
- 關於css box 在 陳星合 Facebook 的精選貼文
- 關於css box 在 Nguyễn Hải Trung Youtube 的最讚貼文
- 關於css box 在 Wui Kathy Youtube 的精選貼文
- 關於css box 在 小豆 Youtube 的精選貼文
- 關於css box 在 重新認識CSS - Box model 的評價
- 關於css box 在 The CSS Box Model Explained in 5 Minutes! - YouTube 的評價
- 關於css box 在 What is the difference between border-box and content-box in ... 的評價
- 關於css box 在 alexreardon/css-box-model - GitHub 的評價
css box 在 軟體開發學習資訊分享 Facebook 的最佳解答
NT370 特價中
從這 11.5 小時的課程,你會學到
1 你將從 CSS 的基礎開始,在那裡你將學習諸如: CSS 選擇符,CSS 組合符,著色,繼承,區塊模型( box model ),位置等等
在完成基本的 CSS 部分之後,你將進一步學習進階的 CSS 主題,比如: 背景,轉換,變換,動畫,陰影效果等等
2 你將學習如何使用現代的 CSS 模組做元素的對齊,如 CSS Flexbox 和 CSS Grid
3. 在整個過程中,你將建立大、真實世界的,看起來現代化且漂亮的專案
4.完成課程後,你將能夠使用純 CSS 建立自己的現代化、漂亮的網站
https://softnshare.com/css-bootcamp-master-in-css-including-css-grid-flexbox/
css box 在 陳星合 Facebook 的精選貼文
麻煩大家幫忙
留下優秀的一家人
他們來自波多黎各
父母親都是名校約翰霍普金大學的電腦碩士
(Master Degree in Computer Science - Johns Hopkins University at Laurel, MD)
他們著五個孩子,到全世界學習
Diego 17歲 Paula 13 歲 Alonzo 12 歲
Felizi 8 歲 Matteo 6 歲
八月,他們到了台灣
發覺這是一個非常適合的生活環境
有好的醫療、中文學習環境、電腦產業、和超好吃的水果
九月,Diego , Paula, Alonzo進入惠文高中寄讀
他們來了之後,學校形成一個很棒的英語學習情境
台灣學生都被迫用英文跟他們互動
星期五與台北歌德學院簽訂德國「PASCH夥伴學校」時
他們三個和學校弦樂社一起合奏卡農(見影片)
非常非常有教養的一家人
然而他們11月就必須離開台灣
因為他們來台灣的第五天
得到美國總公司的通知
他們收掉波多黎各的公司
爸爸Tommy失業了
所以這幾天,他在台中接一個英文家教
但經濟仍是問題
如果台中的朋友可以提供11月4日前的短期英文、西班牙文家教工作
或是提供長期電腦工程師的工作
麻煩和Tommy聯絡
以下是他的聯絡方式及完整資歷
(願意幫他們申請工作簽證更好)
他們很願意把台灣當成第二個家
PS
覺得政府說要把英文變成第二語言
最棒的方式是吸引國外的學生進入我們的校園
在人才即國力的年代
讓優秀的國際人才留在台灣
如果在台灣就有很好的英語學習環境
我們就不用一窩蜂跑到國外
聯絡TOMMY IRIZARRY-SIKES
Contact Information
Postal: Lane 400, Unit 11, Section 2, Nantun Road, Nantun District, Taichung City, Taiwan 408
Email: tirizar@gmail.com
Phone number: 0908 979 417
LinkedIn Profile: http://pr.linkedin.com/pub/tommy-irizarry/25/16/815
孩子的影片
Diego violin in a quartet:
https://youtu.be/ArkvU8Czmk8?t=37s
Diego violin Doble de Bach:
https://youtu.be/LYvnKwEueyA
Diego plays piano Clair de Lune:
https://youtu.be/CWCQMo5XJEY?t=14s
You can see some other videos in this YouTube channel:
https://www.youtube.com/user/tirizar/videos?reload=9
履歷
Summary of qualifications
Software developer for private industries and government agencies. Proficient web developer using classic ASP code, standard html, CSS and SQL Server for data storage. Web server administrator and SharePoint Power User.
Android developer
Certified Ethical Hacker
Programming / Markup languages: HTML, XML, ASP, PHP, CSS, JavaScript/AJAX/JQuery, experience with Java, C++ and C.
Mobile development: Java, Android, Android Studio.
Technologies / Tools: IIS 6.0/7.5, SQL Server, Dreamweaver, Fireworks, Microsoft SharePoint 2007/2010, Microsoft Office suite including InfoPath, Access, Excel, Google Analytics, Google AdSense, Facebook Advertising, Microsoft SharePoint Designer, Inquisite Surveys.
Experience
Since November 2016-current
Enterprise Iron
Principal consultant – Web Developer
Worked on the redesign efforts of the secure site for an international financial client. Applied responsive design principles using the Bootstrap framework while creating modular, reusable components of the code. Analyzed web page dependencies and identified legacy unused pages in the system.
Since November 2015-current
e-Nabler Corporation
Android developer – Professional Services Contract
Developed Java code for the eMobilePOS and Tupyx apps for their Android versions.
Since October 2013-November 2014 TEK Systems
Web Developer / Web Master for the Department of Veterans Affairs in DC
Continued supporting Veteran’s Affairs IT systems, including managing SharePoint 2010 systems and supporting databases. We identified issues with several databases including the management of IIS and SharePoint logs which were consuming many recourses and in a couple of occasions made the systems unavailable.
Enabled and configured space monitoring tools in the SharePoint server farms.
Since November 2011-September 2013 Centuria Corporation
Web Developer / Web Master for the Department of Veterans Affairs in DC
Developed a training registration web site that has been tweaked and used multiple times for different registration purposes, including new telephone system training, and scheduling software upgrades of encryption on laptops and upgrades to Apple Mac OS. The system uses a web front end and a SQL back end.
Performed a routine web server maintenance tasks including monitoring traffic logs, identifying and archiving sites no longer in use, evaluating tools to assist in the management of the web server.
Administered and migrated the FTP server from Windows 2003 Server / IIS 6 into Windows 2008 R2 Server / IIS 7.5. Configured new sites to support general operations within the VA Intranet.
Maintained and enhanced legacy sites, modifying forms and reports in needs to be updated. This includes modification and creation of site in the Enterprise Content Management System used at the VA.
Assisted other team members in various tasks including the creating or modification of surveys in the Inquisite system, and also the migration of some surveys into SharePoint, the modification of an Access application.
December 2001 – August 2011
Systems & System Software Solutions
Web Developer / Web Master for the Department of Veterans Affairs in DC
Mr. Irizarry developed a web based application for the State Home Per Diem Office, which manages millions of dollars in payments to the state homes, to replace an Access database. The Access database was converted to MS SQL Server database and all data was migrated successfully. He created a web based interface using the standard VA intranet look and feel. He also developed a custom interface for each of the 3 roles (CBO, VAMC and VISN). Tools were built for the administrator to view current reports, view missing reports lists, and configure many parameters in the application. The VAMC report form was heavily automated using jQuery to perform auto calculations, increasing data validation and saving time to the users. After the application was launched users commented frequently about how user friendly is the new interface and about the time savings. Tasks that will take 2 hours to be completed now take 15 minutes. We have close to 12,000 reports in the system.
There were various requests to the IT office for a web based training registration system of different types. Mr. Irizarry developed a registration system which was later used for the following projects: Take your child to work day, New Telephone system training registration, Laptop Hard Drive encryption software upgrade among others.
Developed an alternate cascading style sheet for SharePoint 2007, converting the out of the box look and feel to the Department of Veterans Affairs standard website look and feel.
After one of the VA’s laptops was stolen Mr. Irizarry worked to develop a Risk Assessment web based application. He created an Excel template which management will upload to an FTP server with information and details about remote employee access and the sensibility of the data accessed by those users. He also created VB Scripts to validate those Excel files an upload that information into an MS SQL database. Reports for upper management in Central Office were then created which prompted management to enforce stronger security measures, like hard drives encryption. In total more than 500,000 records were processed for the reports.
Administration of IIS 6.0 web server and MS SQL Server databases used in our websites.
Wrote migration scripts to move IIS 6.0 sites into a new IIS 7.5 server
Designed, developed and maintained multi-tier applications for the Veterans Health Administration. Most of the sites access a MS-SQL Server database, use cascade style sheets and ASP server side processing. The sites were developed using Adobe/Macromedia tools like Fireworks, and Dreamweaver.
Installed BlackBerry wireless email devices and trained users on the basic device usage.
Web developer for the Department of Veterans Affairs. Redesigned and modified web pages to make them compliant with the Section 508 guidelines. Tested validation tools that verify if web pages are “Section 508” compliant. Section 508 are guidelines that must be followed by all government agencies and points to which government resources must be make accessible to people with disabilities, i.e. blind, deaf, etc.
November 1999 - December 2001
Compaq Computer Corporation
Consulting Associate II
Design and develop the XOOB (Xevo out of the box) Web user interface. XOOB uses COM+, ASP, XML, XSL and JavaScript to provide a web user interface to the Xevo Workbench Platform based on the role associated with the user. Development was done using Visual Studio tools, IIS and XMLSpy.
Develop Active Server Pages for the Helpdesk solution for the PrimusASP project.
Design and code an ActiveX component that serves as the bridge between the Compaq ASP Framework and the Infranet billing system for Primus. Supported integration with other components of our framework.
Design, code and troubleshoot software for the Primus ASP (Application Service Provider) project. Software includes a DLL and various VB programs that run as NT Services, which are key components of the Compaq ASP framework.
June 1998 – October 1999
National Security Agency
Computer Scientist
Mr. Irizarry worked for as a software developer for the TOKENEER project. TOKENEER is a test platform for the integration of smart cards, biometrics (fingerprint, hand, iris and facial recognition) and a public key infrastructure. Development was done on Windows NT workstations using Visual C++ and Visual SourceSafe for source control. Mr. Irizarry used an SDK to capture and match fingerprints against a database of fingerprints. He also created software to created some statistics of “False Accepts and False Reject Rates” of the fingerprint. He also worked with other team members to identify which fingerprints characteristics could affect those rates. He then added error detection functions to the fingerprint recognition software to identify corrupted files of fingerprint images
Conducted research for methods to add security services to an off-the-shelf computer.
Developed C code to process fax data on an UltraSparc/SunOS station.
Wrote software to generate a daily report of traffic load in a telephone switch by analyzing the switch logs.
Education
Certifications:
Certified Ethical Hacker – 03/28/2014
Master Degree in Computer Science - May, 2001 Johns Hopkin
css box 在 Nguyễn Hải Trung Youtube 的最讚貼文
Tặng bạn 30 khóa học miễn phí
Về lập trình web và tiếp thị liên kết
Tất cả đều có trên https://gioi.net
? Đặt vé máy bay giá rẻ: http://vnbay.vn
? Đăng ký kênh: http://bit.ly/tusachvang
? Fanpage: http://fb.com/hocthietkeweb
#tusachvang #datmatrung #nguyenhaitrung
#hoctuxa #longvantu #bangdang #seoimk
#seoims #hocthietkeweb #gioinet #vnbay
#datvemaybay #photocopy #thietkeweb
![post-title](https://i.ytimg.com/vi/Heaz5-f0jYI/hqdefault.jpg)
css box 在 Wui Kathy Youtube 的精選貼文
Mouse mommy received a surprise from Wiggle Boks! First impression of mouse mommy receiving this Boks is the go green packaging with recyclable box that allow me to reuse it to store baby items or shoes. Good for environment.
.
.
What is Wiggle Boks? Basically, it is a surprise Boks for babies ages 0-24months. Every month Wiggle Boks will send us a surprise Boks for mom and baby once subscribed done.
.
.
Hmm… Let’s see what the contents inside mouse mommy’s Wiggle Boks are.
.
.
If you are interested to purchase a Wiggle Boks, can click this link to purchase it. Mouse mommy is also happy to share a 20% off code for either first month subscription or six month subcription of Wiggle Boks. [ Code : MOUSEMT20 ]
.
.
Happy parenting!
.
.
#WiggleBoks #mom #baby #monthly #subscription #giftbox #mousemommytreats #parentingblogger #mom #influencer #ibuencer2018 #pblogger #surprise #gift #thankyou #newborn #organic #quality #babyproducts #instagift
![post-title](https://i.ytimg.com/vi/2U2sc3i-cSs/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBP9sM-EX4P3u15ANOsoOtkTvayRw)
css box 在 小豆 Youtube 的精選貼文
CSS碼 ↓
/* Background colors*/
body {
background-color: rgba(0,0,0,0);
}
/* Transparent background. */
yt-live-chat-renderer {
background-color: transparent !important;
}
/* Outlines */
yt-live-chat-renderer * {
text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
font-family: "Microsoft JhengHei";
font-size: 24px !important;
line-height: 24px !important;
}
yt-live-chat-text-message-renderer #content ,
yt-live-chat-legacy-paid-message-renderer #content {
overflow: initial; !important
}
/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items {
overflow: hidden !important;
}
yt-live-chat-item-list-renderer #item -scroller{
overflow: hidden !important;
}
/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
display: none !important;
}
/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}
yt-live-chat-paid-message-renderer #header {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Avatars. */
yt-live-chat-text-message-renderer #author -photo,
yt-live-chat-paid-message-renderer #author -photo,
yt-live-chat-legacy-paid-message-renderer #author -photo {
width: 30px !important;
height: 30px !important;
border-radius: 30px !important;
margin-right: 7.5px !important;
}
/* Hide badges. */
yt-live-chat-text-message-renderer #author -badges {
display: none !important;
vertical-align: text-top !important;
}
/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
color: #999999 !important;
font-family: "Microsoft JhengHei";
font-size: 12px !important;
line-height: 12px !important;
}
/* Badges. */
yt-live-chat-text-message-renderer #author -name[type="owner"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
color: #ffd600 !important;
}
yt-live-chat-text-message-renderer #author -name[type="moderator"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
color: #5e84f1 !important;
}
yt-live-chat-text-message-renderer #author -name[type="member"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
color: #0f9d58 !important;
}
/* Channel names. */
yt-live-chat-text-message-renderer #author -name {
color: #FF9966 !important;
font-family: "Microsoft JhengHei";
font-size: 28px !important;
line-height: 28px !important;
}
yt-live-chat-text-message-renderer #author -name::after {
content: ":";
margin-left: 2px;
}
/* Messages. */
yt-live-chat-text-message-renderer #message ,
yt-live-chat-text-message-renderer #message * {
color: #ffffff !important;
font-family: "Microsoft JhengHei";
font-size: 28px !important;
line-height: 28px !important;
}
/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author -name,
yt-live-chat-paid-message-renderer #author -name *,
yt-live-chat-legacy-paid-message-renderer #event -text,
yt-live-chat-legacy-paid-message-renderer #event -text * {
color: #ffd600 !important;
font-family: "Microsoft JhengHei";
font-size: 28px !important;
line-height: 28px !important;
}
yt-live-chat-paid-message-renderer #purchase -amount,
yt-live-chat-paid-message-renderer #purchase -amount *,
yt-live-chat-legacy-paid-message-renderer #detail -text,
yt-live-chat-legacy-paid-message-renderer #detail -text * {
color: #ffd600 !important;
font-family: "Microsoft JhengHei";
font-size: 28px !important;
line-height: 28px !important;
}
yt-live-chat-paid-message-renderer #content ,
yt-live-chat-paid-message-renderer #content * {
color: #ffffff !important;
font-family: "Microsoft JhengHei";
font-size: 30px !important;
line-height: 30px !important;
}
yt-live-chat-paid-message-renderer {
margin: 4px 0 !important;
}
yt-live-chat-legacy-paid-message-renderer {
background-color: #0f9d58 !important;
margin: 4px 0 !important;
}
yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
text-decoration: none !important;
}
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
display: none !important;
}
yt-live-chat-ticker-renderer {
background-color: transparent !important;
box-shadow: none !important;
}
yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
color: #ffd600 !important;
font-family: "Microsoft JhengHei";
}
![post-title](https://i.ytimg.com/vi/f-468cwubfs/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLD-_WAz80qeCgdXXcR2qhixZ2bUxA)
css box 在 重新認識CSS - Box model 的推薦與評價
在佈局document 時,UA 的渲染引擎會根據CSS box model 將每個元素表示為一個矩形框(rectangular box)。CSS 會確定這些box 的大小、位置和屬性(顏色、 ... ... <看更多>