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

ฉันกำลังพยายามสร้างโปรแกรมแก้ไข css ในหน้าพร้อมฟังก์ชั่นการแสดงตัวอย่างที่จะโหลดสไตล์ชีทซ้ำและนำไปใช้โดยไม่จำเป็นต้องโหลดหน้าซ้ำ วิธีที่ดีที่สุดในการดำเนินการนี้คืออะไร?

90 javascript  css  stylesheet  reload 

โปรดดูโค้ดด้านล่างสิ่งที่ฉันพยายาม <div class="row"> <div class="center-block">First Div</div> <div class="center-block">Second DIV </div> </div> เอาต์พุต: First Div SecondDiv ผลลัพธ์ที่คาดหวัง: First Div Second Div ฉันต้องการจัดแนว div ทั้งสองในแนวนอนให้อยู่กึ่งกลางหน้าโดยใช้ bootstrap css ฉันจะทำอย่างไร ฉันไม่ต้องการใช้ css และแนวคิดแบบลอยตัวเพื่อทำสิ่งนี้ เนื่องจากฉันจำเป็นต้องใช้ bootstrap css เพื่อทำงานในรูปแบบทุกประเภท (เช่นขนาดหน้าต่างและความละเอียดทั้งหมด) แทนที่จะใช้แบบสอบถามสื่อ

90 html  css  twitter-bootstrap 

ฉันกำลังพยายามหาภาพพื้นหลังขององค์ประกอบ HTML (body, div ฯลฯ ) เพื่อยืดความกว้างและความสูงทั้งหมด ไม่ค่อยมีโชค. เป็นไปได้หรือไม่หรือต้องทำวิธีอื่นนอกจากเป็นภาพพื้นหลัง css ปัจจุบันของฉันคือ: body { background-position: left top; background-image: url(_images/home.jpg); background-repeat: no-repeat; } ขอบคุณล่วงหน้า. แก้ไข: ฉันไม่กระตือรือร้นที่จะดูแล CSS ในคำแนะนำของ Gabriel ดังนั้นฉันจึงเปลี่ยนเค้าโครงของหน้าแทน แต่ดูเหมือนว่าจะเป็นคำตอบที่ดีที่สุดดังนั้นฉันจึงทำเครื่องหมายเป็นเช่นนั้น

90 html  css  background-image 

ฉันต้องการสร้างบทช่วยสอนซึ่งจะนำผู้ใช้ไปยังตำแหน่งที่คลิก ฉันพยายามที่จะครอบคลุมทั้งหน้าจอด้วย<div>ซึ่งจะสลัวองค์ประกอบทั้งหมดยกเว้นพื้นที่เฉพาะที่อยู่ในการแก้ไขwidth, height, และtopleft ปัญหาคือฉันไม่สามารถหาวิธี "ยกเลิก" ของผู้ปกครองได้background-color(ซึ่งก็โปร่งใสเช่นกัน) ในด้านล่างนี้holeคือ div ที่ควรจะไม่มีเลยbackground-colorรวมถึงพาเรนต์ด้วย สิ่งนี้จะสำเร็จได้หรือไม่? ความคิดใด ๆ ? #bg{ background-color:gray; opacity:0.6; width:100%; height:100vh; } #hole{ position:fixed; top:100px; left:100px; width:100px; height:100px; } <div id="bg"> <div id="hole"></div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด นี่คือภาพจำลองของสิ่งที่ฉันพยายามบรรลุ:

90 javascript  jquery  html  css 

ฉันมี div (#wrapper) ที่มี 2 div ที่ยืนเคียงข้างกัน ฉันต้องการให้ div ด้านขวาอยู่ในแนวตั้ง ฉันลองจัดแนวตั้ง: ตรงกลางบนกระดาษห่อหลัก แต่ใช้งานไม่ได้ มันทำให้ฉันแทบคลั่ง! หวังว่าจะมีคนช่วยได้ http://cssdesk.com/LWFhW HTML: <div id="wrapper"> <div id="left-div"> <ul> <li>One</li> <li>Two</li> </ul> </div> <div id="right-div"> Here some text... </div> </div> CSS: #wrapper{ width:400px; float:left; height:auto; border:1px solid purple;} #left-div{ width:40px; border:1px solid blue; float:left;} #right-div{ width:350px; border:1px …

90 html  css 

ฉันกำลังทำงานกับหน้า Landing Page สำหรับมือถือของ บริษัท แห่งหนึ่ง มันเป็นเลย์เอาต์พื้นฐานจริงๆ แต่ด้านล่างส่วนหัวจะมีรูปภาพของผลิตภัณฑ์ซึ่งจะมีความกว้าง 100% เสมอ (การออกแบบจะแสดงให้เห็นว่ามันเรียงจากขอบถึงขอบเสมอ) ขึ้นอยู่กับความกว้างของหน้าจอความสูงของภาพจะปรับตามอย่างเห็นได้ชัด เดิมทีฉันทำสิ่งนี้ด้วย img (โดยมีความกว้าง CSS 100%) และใช้งานได้ดี แต่ฉันรู้ว่าฉันต้องการใช้แบบสอบถามสื่อเพื่อแสดงภาพที่แตกต่างกันตามความละเอียดที่แตกต่างกันสมมติว่ามีขนาดเล็กกลางและ ตัวอย่างเช่นภาพเดียวกันขนาดใหญ่ ฉันรู้ว่าคุณไม่สามารถเปลี่ยน img src ด้วย CSS ได้ดังนั้นฉันจึงคิดว่าฉันควรใช้พื้นหลัง CSS สำหรับรูปภาพแทนที่จะเป็นแท็ก img ใน HTML ดูเหมือนว่าจะทำงานไม่ถูกต้องเนื่องจาก div ที่มีภาพพื้นหลังต้องการทั้งความกว้างและความสูงเพื่อแสดงพื้นหลัง เห็นได้ชัดว่าฉันสามารถใช้ 'width: 100%' ได้ แต่ฉันจะใช้ความสูงอะไร ฉันสามารถใส่ความสูงคงที่แบบสุ่มเช่น 150px จากนั้นฉันจะเห็น 150px บนสุดของรูปภาพ แต่นี่ไม่ใช่วิธีแก้ปัญหาเนื่องจากไม่มีความสูงคงที่ ฉันเล่นและพบว่าเมื่อมีความสูงแล้ว (ทดสอบด้วย 150px) ฉันสามารถใช้ 'background-size: …

90 html  css  background-image  responsive  responsive-images 

แก้ไข: บางทีฉันควรถามว่าตัวเลือกใดตั้งค่าช่องว่างด้านข้างเมื่อหน้าจอลดลงต่ำกว่าความกว้าง 480px? ฉันเรียกดู bootstrap-responsiveness.css มาระยะหนึ่งแล้วเพื่อค้นหาสิ่งนี้ แต่ดูเหมือนจะไม่มีผลกับสิ่งนี้ เดิม โดยทั่วไปแล้วฉันต้องการลบการเว้นระยะห่างเริ่มต้นหรือการตั้งค่าระยะขอบสำหรับการตอบสนองบนหน้าจออุปกรณ์ขนาดเล็ก ฉันมีbackground colorทับบนcontainer-fluidตัวเลือกและหน้าจอขนาดใหญ่ทำให้พวกเขาได้อย่างสมบูรณ์แบบ 100% ตามความกว้างหน้าจอ แต่พวกเขาจะลดลงไปขนาดที่เล็กลงตามค่าเริ่มต้น Bootstrap ดูเหมือนว่าจะเพิ่มอัตรากำไรขั้นต้นหรือขยายบนหรือcontainer-fluidcontainer <div class="container-fluid"> <div class="row-fluid"> test </div> </div> หากฉันใช้ css ที่กำหนดเองเพื่อเขียนทับสไตล์เริ่มต้นของ Bootstrap ฉันควรเขียนทับคิวรีสื่อหรือตัวเลือกใดเพื่อลบช่องว่างภายในนี้บนหน้าจอขนาดเล็ก

90 css  twitter-bootstrap  responsive-design  media-queries 

เราจะจัดพื้นที่แบบสอบถามสื่ออย่างถูกต้องอย่างไรเพื่อหลีกเลี่ยงความซ้ำซ้อน ตัวอย่างเช่นหากเราพิจารณารหัส: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } จะเกิดอะไรขึ้นในเบราว์เซอร์ที่รองรับทั้งหมดที่ 20em และ 45em? ฉันเคยเห็นคนใช้: สิ่งต่างๆเช่น 799px แล้ว 800px แต่ความกว้างของหน้าจอ 799.5 พิกเซลล่ะ? (เห็นได้ชัดว่าไม่ใช่บนจอแสดงผลทั่วไป แต่เป็นจอประสาทตา?) ฉันอยากรู้มากที่สุดเกี่ยวกับคำตอบที่นี่เมื่อพิจารณาจากข้อมูลจำเพาะ

90 css  responsive-design  media-queries 

ฉันมี div ที่จะมี CSS นี้: #some_kind_of_popup { position: fixed; top: 100px; min-height: 300px; width: 90%; max-width: 900px; } ตอนนี้ฉันจะทำให้ div นี้อยู่กึ่งกลางได้อย่างไร ฉันสามารถใช้margin-left: -450px; left: 50%;แต่จะใช้ได้ก็ต่อเมื่อหน้าจอมีขนาด> 900 พิกเซล หลังจากนั้น (เมื่อหน้าต่างมีขนาด <900 พิกเซล) หน้าต่างจะไม่อยู่ตรงกลางอีกต่อไป แน่นอนฉันสามารถทำสิ่งนี้กับ js บางประเภทได้ แต่มี "ถูกต้องกว่า" ในการทำเช่นนี้กับ CSS หรือไม่?

90 css  html  center 

ฉันรู้ว่าฉันสามารถกำหนดเป้าหมายองค์ประกอบที่มีแอตทริบิวต์เฉพาะใน CSS ได้เช่น: input[type=text] { font-family: Consolas; } แต่เป็นไปได้หรือไม่ที่จะกำหนดเป้าหมายองค์ประกอบที่มีแอตทริบิวต์ของค่าใด ๆ (ยกเว้นไม่มีอะไรเลยเช่นเมื่อไม่ได้เพิ่มแอตทริบิวต์ลงในองค์ประกอบ) ประมาณว่า: a[rel=*] { color: red; } ซึ่งควรกำหนดเป้าหมาย<a>แท็กแรกและที่สามใน HTML นี้: <a href="#" rel="eg">red text</a> <a href="#">standard text</a> <a href="#" rel="more">red text again</a> ฉันคิดว่าเป็นไปได้เพราะโดยค่าเริ่มต้นcursor: pointerดูเหมือนว่าจะถูกนำไปใช้กับ<a>แท็กใด ๆที่มีค่าสำหรับhrefแอตทริบิวต์

90 css  css-selectors 

ถ้าฉันมี: #logo { width: 400px; height: 200px; } แล้ว <img id="logo" src="logo.jpg"/> จะยืดออกไปจนเต็มช่องว่างนั้น ฉันต้องการให้รูปภาพมีขนาดเท่าเดิม แต่ต้องใช้พื้นที่ใน DOM มากขนาดนั้น ฉันต้องเพิ่มการห่อหุ้ม<div>หรือ<span>? ฉันเกลียดการเพิ่มมาร์กอัปสำหรับการจัดแต่งทรงผม

90 html  css 

ฉันมีปัญหาในการหมุนและวางตำแหน่งบรรทัดข้อความ ตอนนี้เป็นเพียงตำแหน่งที่ทำงาน การหมุนยังใช้งานได้ แต่ถ้าฉันปิดใช้งานการกำหนดตำแหน่งเท่านั้น CSS: #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } html เป็นเพียงข้อความธรรมดา

90 css  webkit  transform  css-transforms 

ตัวอย่างง่ายๆ: HTML <p style="color:red!important"> this text is red <em> this text is in the initial color (e.g. black) </em> this is red again </p> CSS em { color:initial; color:unset; } อะไรคือความแตกต่างระหว่างinitialและunset? รองรับเฉพาะเบราว์เซอร์ CanIUse: CSS unset value นักพัฒนา Mozilla Web CSS เริ่มต้น

90 css 

เป็นไปได้ไหมที่จะตั้งค่าเคอร์เซอร์เป็น 'รอ' บนหน้า html ทั้งหมดด้วยวิธีง่ายๆ แนวคิดคือการแสดงให้ผู้ใช้เห็นว่ามีบางอย่างเกิดขึ้นในขณะที่การโทร ajax เสร็จสมบูรณ์ โค้ดด้านล่างแสดงเวอร์ชันที่เรียบง่ายของสิ่งที่ฉันพยายามและยังแสดงให้เห็นถึงปัญหาที่ฉันพบ: หากองค์ประกอบ (# id1) มีการตั้งค่ารูปแบบเคอร์เซอร์มันจะไม่สนใจชุดเดียวในร่างกาย (ชัดเจน) องค์ประกอบบางอย่างมีลักษณะเคอร์เซอร์เริ่มต้น (a) และจะไม่แสดงเคอร์เซอร์รอเมื่อวางเมาส์เหนือ องค์ประกอบของร่างกายมีความสูงที่แน่นอนขึ้นอยู่กับเนื้อหาและหากหน้าสั้นเคอร์เซอร์จะไม่แสดงด้านล่างส่วนท้าย การทดสอบ: <html> <head> <style type="text/css"> #id1 { background-color: #06f; cursor: pointer; } #id2 { background-color: #f60; } </style> </head> <body> <div id="id1">cursor: pointer</div> <div id="id2">no cursor</div> <a href="#" onclick="document.body.style.cursor = 'wait'; return …

89 javascript  html  css  dynamic-css 

ฉันเพิ่งเจอเคล็ดลับ CSS ที่เรียบร้อย ตรวจสอบซอ ... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } <div>Cool Trick: <br /> <div class="tooltiptail"></div> </div> <br /> <div>How do I get this effect with …

89 css  tooltip  css-shapes