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

3

css - ตำแหน่ง div ที่ด้านล่างของที่มี div

ฉันจะวางตำแหน่ง div ที่ด้านล่างสุดของ div ที่มีอยู่ได้อย่างไร <style> .outside { width: 200px; height: 200px; background-color: #EEE; /*to make it visible*/ } .inside { position: absolute; bottom: 2px; } </style> <div class="outside"> <div class="inside">inside</div> </div> รหัสนี้ทำให้ข้อความ "อยู่ใน" ที่ด้านล่างของหน้า

118 css position

9

ฉันจะจัดแนว divs ในแนวนอนได้อย่างไร

ด้วยเหตุผลบางประการ div ของฉันจะไม่อยู่กึ่งกลางแนวนอนใน div ที่มี: .row { width: 100%; margin: 0 auto; } .block { width: 100px; float: left; } <div class="row"> <div class="block">Lorem</div> <div class="block">Ipsum</div> <div class="block">Dolor</div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด และบางครั้งก็มีแถว div ที่มี div เพียงบล็อกเดียว ผมทำอะไรผิดหรือเปล่า?

118 css

16

วิธีการวาดวงกลมในหน้า html?

คุณวาดวงกลมโดยใช้ HTML5 และ CSS3 ได้อย่างไร? สามารถใส่ข้อความข้างในได้หรือไม่?

118 html css geometry css-shapes

4

CSS: จะเพิ่มพื้นที่สีขาวก่อนเนื้อหาขององค์ประกอบได้อย่างไร

รหัสต่อไปนี้ใช้ไม่ได้: p:before { content: " "; } p:before { content: "&nbsp;"; } ฉันจะเพิ่มช่องว่างก่อนเนื้อหาขององค์ประกอบได้อย่างไร หมายเหตุ: ฉันต้องการสีขอบซ้ายและขอบซ้ายสำหรับการใช้ความหมายและใช้ช่องว่างเป็นขอบที่ไม่มีสี :)

118 css unicode space css-content

10

แก้ไขความหนาของเส้นของแอตทริบิวต์ "ขีดเส้นใต้" ของ CSS

เนื่องจากคุณสามารถขีดเส้นใต้ข้อความใดก็ได้ใน CSS ดังนี้: H4 {text-decoration: underline;} แล้วคุณจะแก้ไข 'เส้น' ที่วาดได้อย่างไรสีที่คุณได้รับบนเส้นนั้นสามารถระบุได้อย่างง่ายดายว่า 'color: red' แต่จะแก้ไขความสูงของเส้นได้อย่างไรเช่นความหนา?

118 html css

5

z-index ไม่ทำงานกับตำแหน่งแน่นอน

ฉันเปิดคอนโซล (chrome \ firefox) และรันบรรทัดต่อไปนี้: $("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />"); $("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>"); #popupContent ควรอยู่เหนือสิ่งอื่นใด แต่ได้รับผลกระทบจากความทึบของ #popupFrame เนื้อหาไม่มีอยู่ใน #popupFrame ซึ่งทำให้สิ่งนี้แปลกมาก เป้าหมายคือการสร้าง firefox เช่น alert box

118 html css

5

ทำไม <textarea> และ <textfield> ไม่ใช้ font-family และ font-size จาก body?

ทำไมTextareaและtextfieldไม่รับfont-familyและfont-sizeจากร่างกาย? ดูตัวอย่างสดได้ที่นี่http://jsbin.com/ucano4 รหัส <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>texearea font</title> <style type="text/css"> body { font-family: Verdana, Geneva, sans-serif; font-size:16px } </style> </head> <body> <form action="" method="get"> <textarea name="" cols="20" rows="4"></textarea> <input name="" type="text" /> </form> <p>some text here</p> </body> …

118 css xhtml

8

ความแตกต่างระหว่าง @import และ link ใน CSS

ฉันกำลังเรียนรู้ CSS เพื่อปรับแต่งเทมเพลตโครงการของฉัน ฉันพบปัญหานี้และไม่พบคำตอบที่ชัดเจนบนเว็บ การใช้ @import หรือ link ใน CSS แตกต่างกันอย่างไร การใช้ @import <style>@import url(Path To stylesheet.css)</style> การใช้ลิงค์ <link rel="stylesheet" href="Path To stylesheet.css"> วิธีที่ดีที่สุดในการทำคืออะไร? และทำไม? ขอบคุณ!

118 css import hyperlink

12

การโหลดรูปภาพ CSS ล่วงหน้า

ฉันมีแบบฟอร์มการติดต่อที่ซ่อนอยู่ซึ่งใช้งานได้โดยคลิกที่ปุ่ม ฟิลด์จะถูกตั้งค่าเป็นภาพพื้นหลัง CSS และมักจะปรากฏช้ากว่า div ที่ถูกสลับไปเล็กน้อย ฉันใช้ตัวอย่างนี้ใน<head>ส่วนนี้ แต่ไม่มีโชค (หลังจากที่ฉันล้างแคช): <script> $(document).ready(function() { pic = new Image(); pic2 = new Image(); pic3 = new Image(); pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png"; pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png"; pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png"; }); </script> ฉันใช้ jQuery เป็นไลบรารีของฉันและมันจะดีมากถ้าฉันสามารถใช้มันเพื่อจัดการปัญหานี้ด้วย ขอบคุณสำหรับความคิดของคุณ

118 css image background preloader preload

13

ฉันจะค้นหารูปภาพที่ไม่ได้ใช้และสไตล์ CSS ในเว็บไซต์ได้อย่างไร [ปิด]

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน3 ปีที่ผ่านมา ปรับปรุงคำถามนี้ มีวิธีใด (นอกเหนือจากการลองผิดลองถูก) ที่ฉันสามารถใช้เพื่อค้นหาไฟล์ภาพที่ไม่ได้ใช้งาน แล้วการประกาศ CSS สำหรับ ID และ Classes ที่ไม่มีอยู่ในไซต์ล่ะ ดูเหมือนว่าอาจมีวิธีการเขียนสคริปต์ที่สแกนไซต์สร้างโปรไฟล์และดูว่ารูปภาพและสไตล์ใดบ้างที่ไม่เคยโหลด

117 html css

12

ลบแถบเลื่อนออกจาก iframe

โดยใช้รหัสนี้ <iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe> นี่คือลักษณะที่ปรากฏ (กล่องข้อความบนหน้าแรกของhttp://www.talkjesus.com ) ฉันจะลบแถบเลื่อนแนวนอนและแก้ไข css ของแถบเลื่อนแนวตั้งได้อย่างไร

117 html css iframe

10

Bootstrap 3 แผงส่วนหัวที่มีปุ่มผิดตำแหน่ง

ฉันใช้ Bootstrap 3 และฉันต้องการเพิ่มปุ่มบางปุ่มในส่วนหัวของแผงที่มุมขวาบน เมื่อพยายามเพิ่มพวกเขาจะแสดงอยู่ด้านล่างของชื่อเรื่องพื้นฐาน รหัส: http://bootply.com/82631 CSS ที่หายไปคืออะไรที่ฉันควรเพิ่มในชื่อหัวข้อแผงหรือปุ่ม

117 css twitter-bootstrap twitter-bootstrap-3

2

กำหนดเป้าหมายองค์ประกอบที่มีหลายคลาสภายในกฎเดียว

ฉันมี HTML บางส่วนที่จะมีองค์ประกอบที่มีหลายคลาสและฉันจำเป็นต้องกำหนดองค์ประกอบเหล่านี้ภายในกฎเดียวเพื่อให้คลาสเดียวกันอาจแตกต่างกันภายในคอนเทนเนอร์ที่แตกต่างกัน สมมติว่าฉันมีสิ่งนี้ใน CSS ของฉัน: .border-blue { border: 1px solid blue; } .background { background: url(bg.gif); } จากนั้นฉันมีสิ่งนี้ใน HTML ของฉัน: <div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div> ฉันสามารถกำหนดเป้าหมายสิ่งเหล่านี้ภายในกฎเดียวได้หรือไม่ เช่นนี้ซึ่งฉันรู้ว่าใช้ไม่ได้: .border-blue, .background { border: 1px solid blue; background: url(bg.gif); }

117 css class target

13

ปรับขนาดภาพให้พอดีกับกรอบขอบ

มีวิธีแก้ปัญหาเฉพาะ css ในการปรับขนาดภาพให้เป็นกรอบ (รักษาอัตราส่วน) หรือไม่ วิธีนี้ใช้ได้ผลถ้ารูปภาพใหญ่กว่าคอนเทนเนอร์: img { max-width: 100%; max-height: 100%; } ตัวอย่าง: ใช้กรณีที่ 1 (ทำงาน): http://jsfiddle.net/Jp5AQ/2/ ใช้กรณีที่ 2 (ใช้งานได้): http://jsfiddle.net/Jp5AQ/3/ แต่ฉันต้องการปรับขนาดรูปภาพจนกว่าขนาดจะเท่ากับ 100% ของคอนเทนเนอร์ ใช้กรณีที่ 3 (ใช้ไม่ได้): http://jsfiddle.net/Jp5AQ/4/

117 html css image resize autoresize

5

Flexbox และ Internet Explorer 11 (display: flex in <html>?)

ฉันวางแผนที่จะย้ายออกจากรูปแบบ "floaty" และใช้ CSS flexbox สำหรับโครงการในอนาคต ฉันรู้สึกยินดีที่เห็นว่าเบราว์เซอร์หลัก ๆ ทั้งหมดในเวอร์ชันปัจจุบันดูเหมือนจะรองรับ flexbox (ไม่ทางใดก็ทางหนึ่ง) ฉันไปที่"แก้ไขโดย Flexbox"เพื่อดูตัวอย่างบางส่วน อย่างไรก็ตาม "Sticky ท้าย" ตัวอย่างที่ดูเหมือนจะไม่ทำงานใน Internet Explorer 11 ที่ผมเล่นรอบ bit และได้ไปทำงานโดยการเพิ่มdisplay:flexไป<html>และwidth:100%ไป<body> คำถามแรกของฉันคือใครช่วยอธิบายตรรกะนั้นให้ฉันฟังได้ไหม ฉันแค่เล่นตัวไปมาและมันได้ผล แต่ฉันไม่ค่อยเข้าใจว่าทำไมมันถึงได้ผลแบบนั้น ... จากนั้นจะมีตัวอย่าง "Media Object" ที่ใช้งานได้ในทุกเบราว์เซอร์ยกเว้น - คุณเดาได้ - Internet Explorer ฉันเล่นกับมันเหมือนกัน แต่ไม่ประสบความสำเร็จใด ๆ คำถามที่สองของฉันคือ: มีความเป็นไปได้ที่ "สะอาด" ที่จะทำให้ตัวอย่าง "Media Object" ทำงานใน Internet Explorer ได้หรือไม่

117 html css flexbox cross-browser

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