การเขียนโปรแกรม css

5

วิธีพลิกภาพพื้นหลังโดยใช้ CSS? เป็นไปได้ไหม? ฉันกำลังใช้ภาพลูกศรนี้เป็นbackground-imageของliใน CSS บน: visitedฉันต้องพลิกลูกศรนี้ในแนวนอน ฉันสามารถทำสิ่งนี้เพื่อสร้างภาพลูกศรอีกภาพหนึ่งแต่ฉันแค่อยากรู้ว่าจะสามารถพลิกภาพใน CSS สำหรับ:visited

224 css mobile-webkit

3

อะไรคือความแตกต่างระหว่างความยืดหยุ่นและความกว้าง?

มีคำถามและบทความเกี่ยวกับเรื่องนี้ แต่ไม่มีข้อสรุปใด ๆ เท่าที่ฉันสามารถบอกได้ บทสรุปที่ดีที่สุดที่ฉันสามารถหาได้คือ flex-basedช่วยให้คุณสามารถระบุขนาดเริ่มต้น / เริ่มต้นขององค์ประกอบก่อนที่จะคำนวณสิ่งอื่นใด อาจเป็นเปอร์เซ็นต์หรือค่าสัมบูรณ์ ... ซึ่งในตัวมันเองไม่ได้พูดอะไรมากเกี่ยวกับพฤติกรรมขององค์ประกอบที่มีการตั้งค่าแบบยืดหยุ่น ด้วยความรู้ปัจจุบันเกี่ยวกับ flexbox ของฉันฉันไม่เห็นสาเหตุที่ไม่สามารถอธิบายความกว้างได้ ฉันต้องการทราบว่าflex-baseแตกต่างจากความกว้างในทางปฏิบัติอย่างไร ถ้าฉันเปลี่ยนความกว้างด้วยความยืดหยุ่น (และในทางกลับกัน) สิ่งที่จะเปลี่ยนสายตา? จะเกิดอะไรขึ้นถ้าฉันตั้งค่าทั้งสองเป็นค่าอื่น จะเกิดอะไรขึ้นหากพวกเขามีค่าเท่ากัน? มีกรณีพิเศษบางอย่างที่ใช้ความกว้างหรือความยืดหยุ่นพื้นฐานจะมีความแตกต่างอย่างมีนัยสำคัญในการใช้อีกหรือไม่ วิธีทำความกว้างและดิ้นพื้นฐานแตกต่างกันเมื่อใช้ร่วมกับรูปแบบ flexbox อื่น ๆ เช่นดิ้นห่อ , ดิ้นเติบโตและดิ้นหด ? ความแตกต่างที่สำคัญอื่น ๆ แก้ไข / ชี้แจง : คำถามนี้ถูกถามในรูปแบบที่แตกต่างกันในชุดคุณสมบัติพื้นฐานแบบยืดหยุ่นอะไร แต่ฉันรู้สึกว่าการเปรียบเทียบโดยตรงหรือการสรุปความแตกต่างของความยืดหยุ่นและความกว้าง (หรือความสูง ) จะดีมาก

224 css flexbox width

30

แบบอักษรดีเลิศไม่ทำงานไอคอนแสดงเป็นสี่เหลี่ยม

ดังนั้นฉันจึงพยายามสร้างต้นแบบหน้าการตลาดและฉันใช้ Bootstrap และไฟล์ Font Awesome ใหม่ ปัญหาคือเมื่อฉันพยายามใช้ไอคอนทุกอย่างที่แสดงบนหน้าจะเป็นสี่เหลี่ยมจัตุรัสขนาดใหญ่ นี่คือวิธีที่ฉันรวมไฟล์ไว้ในหัว: <head> <title>Page Title</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-responsive.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/app.css">  </head> และนี่คือตัวอย่างของฉันที่พยายามใช้ไอคอน: <i class="icon-camera-retro"></i> แต่ทั้งหมดที่ได้รับการแสดงผลในสี่เหลี่ยมขนาดใหญ่ ไม่มีใครรู้ว่าเกิดอะไรขึ้น?

224 css html twitter-bootstrap font-awesome

13

ให้ div ส่วนเกินเลื่อนไปด้านล่างยกเว้นว่าผู้ใช้เลื่อนขึ้น

ฉันมี div ที่มีขนาดใหญ่เพียง 300 พิกเซลและฉันต้องการให้มันเมื่อหน้าโหลดเลื่อนไปที่ด้านล่างของเนื้อหา div นี้มีการเพิ่มเนื้อหาแบบไดนามิกและต้องเลื่อนลงเรื่อย ๆ ตอนนี้หากผู้ใช้ตัดสินใจเลื่อนขึ้นฉันไม่ต้องการให้กระโดดกลับไปด้านล่างจนกว่าผู้ใช้จะเลื่อนลงมาอีกครั้ง เป็นไปได้หรือไม่ที่จะมี div ที่จะยังคงเลื่อนไปที่ด้านล่างเว้นแต่ผู้ใช้เลื่อนขึ้นและเมื่อผู้ใช้เลื่อนกลับไปที่ด้านล่างจะต้องให้ตัวเองอยู่ที่ด้านล่างแม้ว่าจะมีการเพิ่มเนื้อหาแบบไดนามิกใหม่ ฉันจะสร้างการแข่งขันนี้ได้อย่างไร

224 javascript jquery html css scroll

17

สีพื้นหลังไม่แสดงในตัวอย่างก่อนพิมพ์

ฉันพยายามพิมพ์หน้าเอกสาร ในหน้านั้นฉันให้ตารางสีพื้นหลัง เมื่อฉันดูตัวอย่างก่อนพิมพ์ในโครเมี่ยมการไม่แสดงผลบนคุณสมบัติสีพื้นหลัง ... ดังนั้นฉันจึงลองคุณสมบัตินี้: -webkit-print-color-adjust: exact; แต่ก็ยังไม่แสดงสี http://jsfiddle.net/TbrtD/ .vendorListHeading { background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; } <div class="bs-docs-example" id="soTable" style="padding-top: 10px;"> <table class="table" style="margin-bottom: 0px;"> <thead> <tr class="vendorListHeading" style=""> <th>Date</th> <th>PO Number</th> <th>Term</th> <th>Tax</th> <th>Quote Number</th> <th>Status</th> <th>Account Mgr</th> <th>Shipping Method</th> <th>Shipping Account</th> <th style="width: 184px;">QA</th> <th id="referenceSO">Reference</th> …

223 google-chrome css printing webkit

18

CSS: ตัดเซลล์ตารางออก แต่พอดีให้มากที่สุด

พบกับเฟร็ด เขาเป็นโต๊ะ: <table border="1" style="width: 100%;"> <tr> <td>This cells has more content</td> <td>Less content here</td> </tr> </table> อพาร์ตเมนต์ของ Fred มีนิสัยแปลกประหลาดในการเปลี่ยนขนาดดังนั้นเขาจึงเรียนรู้ที่จะซ่อนเนื้อหาบางส่วนของเขาเพื่อที่จะไม่ผลักดันหน่วยอื่น ๆ ทั้งหมดและผลักห้องนั่งเล่นของนางวิทฟอร์ดออกไปให้อภัย: <table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;"> <tr> <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td> <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td> </tr> </table> วิธีนี้ใช้ได้ผล …

223 html css overflow tablelayout

7

สอง divs เคียงข้าง - จอแสดงผลของไหล

ฉันพยายามวางสอง divs เคียงข้างกันและใช้ CSS ต่อไปนี้เพื่อมัน #left { float: left; width: 65%; overflow: hidden; } #right { overflow: hidden; } HTML นั้นง่าย div สองตัวทางซ้ายและขวาใน div wrapper <div id="wrapper"> <div id="left">Left side div</div> <div id="right">Right side div</div> </div> ฉันได้ลองหลายครั้งเพื่อค้นหาวิธีที่ดีกว่าใน StackOverflow และเว็บไซต์อื่น ๆ ด้วย แต่ไม่พบความช่วยเหลือที่แน่นอน ดังนั้นรหัสทำงานได้อย่างรวดเร็วในครั้งแรก ปัญหาคือสิ่งนี้ div ด้านซ้ายได้รับการเติมเต็ม / ระยะขอบโดยอัตโนมัติเมื่อฉันเพิ่มความกว้างเป็น (%) ดังนั้นที่ความกว้าง …

222 css html fluid-layout fluid

3

CSS submit button แสดงผลแปลก ๆ บน iPad / iPhone

ฉันสังเกตเห็นว่าถ้าฉันใช้ปุ่มสไตล์กับ CSS โดยใช้รัศมีสีและเส้นขอบพวกมันดูดี แต่ใน iphone / ipad / ipod พวกมันดูแย่มาก ... ไม่ควรใช้เรนเดอร์แบบเดียวกับ Safari Desktop?

222 iphone css ipad mobile-safari mobile-webkit

12

ฉันจะสร้างหยดน้ำตาใน HTML ได้อย่างไร

ฉันจะสร้างรูปร่างเช่นนี้เพื่อแสดงบนหน้าเว็บได้อย่างไร ฉันไม่ต้องการใช้ภาพเพราะพวกเขาจะพร่ามัวเมื่อปรับขนาด ฉันลองใช้CSS : .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ที่กลายเป็นเมาจริงๆ จากนั้นฉันก็ลองใช้ SVG: <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล มันมีรูปร่าง แต่ส่วนล่างไม่โค้ง มีวิธีสร้างรูปร่างนี้เพื่อให้สามารถใช้ในหน้า HTML ได้หรือไม่

222 html css svg css-shapes

7

วิธีจัดแนวข้อความให้อยู่กึ่งกลางในแถวตาราง html

ฉันกำลังใช้ HTML <table>และฉันต้องการจัดตำแหน่งข้อความ<td>ไปยังกึ่งกลางในแต่ละเซลล์ ฉันจะจัดแนวข้อความในแนวนอนและแนวตั้งได้อย่างไร

222 html css

17

เส้นประสไตล์รายการ HTML

มีวิธีสร้าง list-style ใน HTML ด้วยขีดกลาง (เช่น - หรือ - &ndash;หรือ - &mdash;) หรือไม่ <ul> <li>abc</li> </ul> การแสดงผล: - abc มันเกิดขึ้นกับฉันที่จะทำสิ่งนี้ด้วยสิ่งต่างli:before { content: "-" };ๆ แม้ว่าฉันจะไม่ทราบข้อเสียของตัวเลือกนั้น โดยทั่วไปฉันจะไม่ทราบวิธีการใช้อักขระทั่วไปสำหรับรายการ

222 html css xhtml html-lists

16

ID และคลาสแตกต่างกันอย่างไร

ความแตกต่างระหว่าง<div class="">และ<div id="">เมื่อมาถึง CSS คืออะไร? มันใช้ได้<div id="">ไหม? ฉันเห็นผู้พัฒนาที่แตกต่างกันทำสิ่งนี้ทั้งสองวิธีและเนื่องจากฉันสอนตัวเองฉันไม่เคยคิดเลย

222 html css class id

16

วิธีรับเงากล่องด้านซ้ายและขวาเท่านั้น

มีวิธีใดที่จะทำให้กล่องเงาอยู่ทางด้านซ้ายและขวา (แนวนอน?) โดยไม่มีแฮ็กหรือรูปภาพ ฉันใช้: box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8); แต่มันให้เงารอบ ๆ ฉันไม่มีพรมแดนล้อมรอบองค์ประกอบ

222 html css

11

จัดกึ่งกลางเนื้อหาในแถบนำทาง bootstrap ที่ตอบสนองต่อ

ฉันมีปัญหาในการศูนย์กลางเนื้อหาของฉันในแถบนำทาง bootstrap ฉันใช้ bootstrap 3. ฉันได้อ่านบทความจำนวนมาก แต่ CSS หรือวิธีการที่ใช้จะไม่ทำงานกับรหัสของฉัน! ฉันผิดหวังจริงๆดังนั้นนี่เป็นตัวเลือกสุดท้ายของฉัน ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม! <!DOCTYPE html> <html> <head> <title>Navigation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/style.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile …

221 css twitter-bootstrap navbar

4

<fieldset> ปรับขนาดผิด ดูเหมือนว่า `ความกว้างต่ำสุด: ไม่สามารถแก้ไขได้ '

ปัญหา ฉันมี<select>ที่หนึ่งใน<option>ค่าข้อความของมันยาวมาก ฉันต้องการ<select>ปรับขนาดเพื่อให้ไม่กว้างกว่าพาเรนต์แม้ว่าจะต้องตัดข้อความที่แสดงออก max-width: 100%ควรทำเช่นนั้น ก่อนปรับขนาด: สิ่งที่ฉันต้องการหลังจากปรับขนาด: แต่ถ้าคุณโหลดตัวอย่าง jsFiddle นี้และปรับขนาดความกว้างของแผงผลลัพธ์ให้เล็กกว่าของ<select>คุณจะเห็นได้ว่าตัวเลือกภายในนั้น<fieldset>ล้มเหลวในการลดขนาดความกว้างลง สิ่งที่ฉันเห็นจริงหลังจากปรับขนาด: อย่างไรก็ตามหน้าเว็บที่เทียบเท่ากับ<div>แทนที่จะเป็น<fieldset>สเกลจะถูกต้อง คุณจะเห็นว่าและทดสอบการเปลี่ยนแปลงของคุณได้ง่ายขึ้นถ้าคุณมีและถัดจากแต่ละอื่น ๆ บนหน้าหนึ่ง และถ้าคุณลบแท็กโดยรอบการปรับขนาดจะทำงาน แท็กเป็นอย่างใดก่อให้เกิดการปรับขนาดแนวนอนเพื่อแบ่ง<fieldset><div><fieldset><fieldset> ทำหน้าที่เป็นถ้ามีกฎ<fieldset> CSS fieldset { min-width: min-content; }( min-contentหมายถึงความกว้างที่เล็กที่สุดซึ่งไม่ทำให้เด็กล้น) หากฉันแทนที่<fieldset>ด้วย<div>ด้วยmin-width: min-contentจะมีลักษณะเหมือนกันทุกประการ แต่ไม่มีกฎmin-contentในสไตล์ของฉันในสไตล์ชีทเริ่มต้นของเบราว์เซอร์หรือปรากฏใน CSS Inspector ของ CSS ของ Firebug ผมพยายามที่จะแทนที่รูปแบบที่มองเห็นได้ในทุก<fieldset>ใน Firebug ของ CSS สารวัตรและในสไตล์ชีตเริ่มต้นของ Firefox forms.cssแต่นั่นก็ไม่ได้ช่วย การเอาชนะโดยเฉพาะmin-widthและwidthไม่ได้ทำอะไรเช่นกัน รหัส HTML ของ fieldset: <fieldset> <div class="wrapper"> <select …

221 html width fieldset css

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