คำถามติดแท็ก css

CSS (Cascading Style Sheets) เป็นภาษาสไตล์ชีตที่ใช้สำหรับอธิบายลักษณะและการจัดรูปแบบของ HTML (HyperText Markup Language), XML (Extensible Markup Language) เอกสาร XML และ Extensible Markup Language รวมถึงองค์ประกอบ SVG รวมถึง (แต่ไม่ จำกัด เฉพาะ) สีโครงร่างแบบอักษร และภาพเคลื่อนไหว นอกจากนี้ยังอธิบายถึงวิธีการแสดงองค์ประกอบบนหน้าจอบนกระดาษคำพูดหรือบนสื่ออื่น ๆ

10
ภาพพื้นหลัง CSS ให้พอดีกับความกว้างความสูงควรปรับสัดส่วนแบบอัตโนมัติ
ฉันมี body { background: url(images/background.svg); } ผลที่ต้องการคือภาพพื้นหลังนี้จะมีความกว้างเท่ากับหน้าความสูงเปลี่ยนไปเพื่อรักษาสัดส่วน เช่นหากภาพต้นฉบับมีขนาด 100 * 200 (หน่วยใด ๆ ) และตัวกล้องมีความกว้าง 600px ภาพพื้นหลังควรจะมีความสูง 1200px ความสูงควรเปลี่ยนโดยอัตโนมัติหากปรับขนาดหน้าต่าง เป็นไปได้ไหม ในขณะนี้ Firefox ดูเหมือนว่ามันจะปรับความสูงแล้วปรับความกว้าง อาจเป็นเพราะความสูงเป็นมิติที่ยาวที่สุดและพยายามหลีกเลี่ยงการครอบตัด ฉันต้องการที่จะปลูกพืชในแนวตั้งแล้วเลื่อน: ไม่มีการทำซ้ำในแนวนอน นอกจากนี้ Chrome กำลังวางภาพไว้ตรงกลางไม่ต้องทำซ้ำแม้เมื่อbackground-repeat:repeatได้รับอย่างชัดเจนซึ่งเป็นค่าเริ่มต้นอยู่ดี
365 html  css 

5
ฉันจะเพิ่มเคล็ดลับเครื่องมือในองค์ประกอบการขยายได้อย่างไร
ในรหัสต่อไปนี้ฉันต้องการให้เครื่องมือคำแนะนำเกิดขึ้นเมื่อผู้ใช้วนเวียนอยู่ฉันจะทำอย่างไร ฉันไม่ต้องการใช้ลิงก์ใด ๆ <span> text </span>
364 html  css 

16
เป็นวิธีที่ง่ายที่สุดในการปิดการใช้งาน / เปิดใช้งานปุ่มและลิงก์ (jQuery + Bootstrap)
บางครั้งฉันใช้จุดยึดสไตล์เป็นปุ่มและบางครั้งฉันก็ใช้ปุ่ม ฉันต้องการปิดการใช้งานสิ่งที่เฉพาะเจาะจงคลิกเพื่อ: พวกเขาดูปิดการใช้งาน พวกเขาหยุดการคลิก ฉันจะทำสิ่งนี้ได้อย่างไร

3
เลือกองค์ประกอบตามหลายคลาส
ฉันมีกฎสไตล์ฉันต้องการใช้กับแท็กเมื่อมีสองคลาส มีวิธีการดำเนินการนี้โดยไม่ใช้ JavaScript? ในคำอื่น ๆ : <li class='left ui-class-selector'> ฉันต้องการที่จะใช้กฎสไตล์ของฉันเท่านั้นถ้าliมีทั้ง.leftและ.ui-class-selectorเรียนนำไปใช้
360 css  css-selectors 

22
วิธีกำหนดสไตล์สีไอคอนขนาดและเงาของไอคอนตัวอักษรที่น่ากลัว
ฉันจะจัดสไตล์สีขนาดและเงาของไอคอนจากไอคอนของตัวอักษรที่น่ากลัวได้อย่างไร ตัวอย่างเช่นไซต์ของ Font Awesomeจะแสดงไอคอนบางส่วนเป็นสีขาวและบางส่วนเป็นสีแดง แต่จะไม่แสดงCSSวิธีการจัดรูปแบบให้กับพวกเขา ...

10
วิธีดูหน้า HTML บน Github เป็นหน้า HTML ที่แสดงผลปกติเพื่อดูตัวอย่างในเบราว์เซอร์โดยไม่ต้องดาวน์โหลด
ในhttp://github.comนักพัฒนาให้เก็บไฟล์ HTML, CSS, JavaScript และรูปภาพของโครงการ ฉันจะดูผลลัพธ์ HTML ในเบราว์เซอร์ได้อย่างไร ตัวอย่างเช่นนี้: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html เมื่อฉันเปิดสิ่งนี้จะไม่แสดง HTML ที่แสดงผลของรหัสของผู้เขียน มันแสดงให้เห็นว่าหน้าเป็นรหัสที่มา เป็นไปได้ไหมที่จะเห็นว่าเป็น HTML ที่แสดงผลโดยตรง ไม่เช่นนั้นฉันจะต้องดาวน์โหลดทั้ง ZIP เพื่อดูผลลัพธ์
355 html  css  git  github  github-pages 

12
ฉันจะจัดวางองค์ประกอบที่ลอยอยู่ตรงกลางได้อย่างไร
ฉันใช้เลขหน้าและมันจะต้องเป็นศูนย์กลาง ปัญหาคือการเชื่อมโยงจะต้องแสดงเป็นบล็อกจึงต้องลอย แต่text-align: center;ไม่สามารถใช้งานได้ ฉันสามารถทำได้โดยการให้ส่วนหุ้มของ divpper ของด้านซ้าย แต่ทุกหน้าจะมีจำนวนหน้าที่แตกต่างกันดังนั้นมันจะไม่ทำงาน นี่คือรหัสของฉัน: .pagination { text-align: center; } .pagination a { display: block; width: 30px; height: 30px; float: left; margin-left: 3px; background: url(/images/structure/pagination-button.png); } .pagination a.last { width: 90px; background: url(/images/structure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(/images/structure/pagination-button-first.png); } <div class='pagination'> <a class='first' …
354 css-float  center  css 

12
ฉันจะจัดองค์ประกอบของ div ให้ถูกต้องได้อย่างไร
เนื้อหาของเอกสาร html ของฉันประกอบด้วย 3 องค์ประกอบปุ่มแบบฟอร์มและพื้นที่วาดภาพ ฉันต้องการให้ปุ่มและแบบฟอร์มจัดตำแหน่งชิดขวาและพื้นที่จัดตำแหน่งอยู่ชิดซ้าย ปัญหาคือเมื่อฉันพยายามจัดองค์ประกอบสององค์ประกอบแรกพวกเขาไม่ได้ติดตามกันอีกต่อไปและแทนที่จะอยู่ถัดจากกันในแนวนอนหรือไม่รหัสที่ฉันมีจนถึงตอนนี้ฉันต้องการให้แบบฟอร์มติดตามหลังจากปุ่มด้านขวา ไม่มีที่ว่างในระหว่าง #cTask { background-color: lightgreen; } #button { position: relative; float: right; } #addEventForm { position: relative; float: right; border: 2px solid #003B62; font-family: verdana; background-color: #B5CFE0; padding-left: 10px; } <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script type="text/javascript" src="timeline.js"></script> <link rel="stylesheet" …
352 css  html 

16
วิธีการเปลี่ยนสีขององค์ประกอบ svg?
ฉันต้องการใช้เทคนิคนี้http://css-tricks.com/svg-fallbacks/และเปลี่ยนสี svg แต่จนถึงตอนนี้ฉันยังไม่สามารถทำได้ ฉันใส่มันลงใน CSS แต่ภาพของฉันจะเป็นสีดำเสมอไม่ว่าอะไรก็ตาม รหัสของฉัน: .change-my-color { fill: green; } <svg> <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" /> </svg> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล
350 css  svg 

27
วิธีการเพิ่มหลายคลาสให้กับส่วนประกอบ ReactJS
ฉันใหม่สำหรับ ReactJS และ JSX และฉันมีปัญหาเล็กน้อยกับรหัสด้านล่าง ฉันกำลังพยายามเพิ่มคลาสหลายคลาสให้กับclassNameแอตทริบิวต์ของแต่ละรายการli: <li key={index} className={activeClass, data.class, "main-class"}></li> องค์ประกอบ React ของฉันคือ: var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, render: function() { var self = this; var accountMenuData = [ { name: "My Account", …


30
ป้องกันร่างกายไม่ให้เลื่อนเมื่อเปิด modal
ฉันต้องการให้ร่างกายหยุดเลื่อนเมื่อใช้เมาส์วีลในขณะที่ Modal (จากhttp://twitter.github.com/bootstrap ) บนเว็บไซต์ของฉันเปิดขึ้น ฉันพยายามโทรหาจาวาสคริปต์ด้านล่างเมื่อเปิดใช้งานโมดอล แต่ไม่สำเร็จ $(window).scroll(function() { return false; }); และ $(window).live('scroll', function() { return false; }); โปรดทราบว่าเว็บไซต์ของเราลดการสนับสนุนสำหรับ IE6, IE7 + ต้องเข้ากันได้
347 javascript  jquery  css  scroll 

9
ฉันจะทำให้การป้อนข้อความไม่สามารถแก้ไขได้อย่างไร
ดังนั้นฉันมีการป้อนข้อความ <input type="text" value="3" class="field left"> นี่คือ CSS ของฉันสำหรับมัน background:url("images/number-bg.png") no-repeat scroll 0 0 transparent; border:0 none; color:#FFFFFF; height:17px; margin:0 13px 0 0; text-align:center; width:17px; มีการตั้งค่าหรือเคล็ดลับเกี่ยวกับเรื่องนี้หรือไม่ฉันกำลังคิดที่จะทำป้ายกำกับแทน ฉันจะแปลงพวกเขาและมีวิธีที่ดีกว่าหรือเป็นวิธีเดียวได้อย่างไร
344 html  css  html-input 

29
ขนาดตัวอักษรที่ตอบสนองใน CSS
ฉันสร้างเว็บไซต์โดยใช้ตารางZurb Foundation 3 แต่ละหน้ามีขนาดใหญ่h1: body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; } <div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div> <!-- End Tagline --> </div> <!-- End Row --> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล เมื่อฉันปรับขนาดเบราว์เซอร์เป็นขนาดมือถือตัวอักษรขนาดใหญ่จะไม่ปรับและทำให้เบราว์เซอร์รวมการเลื่อนแนวนอนเพื่อรองรับข้อความขนาดใหญ่ ฉันสังเกตเห็นว่าในหน้าตัวอย่างZurb Foundation 3 Typography ส่วนหัวปรับให้เข้ากับเบราว์เซอร์เนื่องจากมีการบีบอัดและขยาย ฉันขาดอะไรบางอย่างที่ชัดเจนจริง ๆ ? …

26
เอาการขยายจากคอลัมน์ใน Bootstrap 3
ปัญหา: ลบ padding / margin ไปทางขวาและซ้ายของ col-md- * ใน Bootstrap 3 รหัส HTML: <div class="col-md-12"> <h2>OntoExplorer<span style="color:#b92429">.</span></h2> <div class="col-md-4"> <div class="widget"> <div class="widget-header"> <h3>Dimensions</h3> </div> <div class="widget-content" id=""> <div id='jqxWidget'> <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div> <div style="clear:both;" id="listBoxB"></div> </div> </div> </div> </div> <div class="col-md-8"> <div class="widget"> <div class="widget-header"> <h3>Results</h3> </div> <div class="widget-content"> …

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.