css3

问题 I have a bunch of vertically aligned tab items in which and I can't seem to get the parent container (the <a href...> in my HTML) to expand to cover the child elements. I've tried using a <br style="clear: both"> and overflow: hidden; but the first didn't do anything and the second just cut it off (using auto just added a scroll bar, which doesn't help) any thoughts on how to fix it? HTML sample: <li class="active"> <a href="#pane1a" data-toggle="tab"> <div class="preview-box"> <img class=

问题 how we can create a diagonal heading line with pure CSS like mentioned below image :- 回答1: it seems the most appropriate example (the image you provided before you updated your question is the same): http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/ HTML <a href="#">Rohit AZAD</a> CSS a { padding:10px; text-decoration:none; color:white; height:0; line-height:50px; display:inline-block; font-weight:bold; border-right:30px solid transparent; border

问题 I have this code. Despite of being inside a td , and having specified this CSS: .day { text-align: right; padding: 5px; vertical-align: middle; border: 1px solid black; } .day--hole { color: lightgray; } .day--today { background: pink; } <table> <tbody> <tr> <td class="day day--hole">30</td> <td class="day day--hole">31</td> <td class="day">1</td> <td class="day">2</td> <td class="day">3</td> <td class="day">4</td> <td class="day">5</td> </tr> <tr> <td class="day">6</td> <td class="day">7</td

问题 I have some loading bars done with CSS animations using keyframes. It works great in Chrome, but not in FireFox. I've double checked that all of the prefixes are correct, I've tried changing units and adjusting values, but nothing seems to make it work. Her's a codepen link: http://codepen.io/aviemet/pen/YPXzLQ and here's my sass: @-webkit-keyframes 'loadbars' { 0%{ height: 10px; margin-top: 25px; } 50%{ height:50px; margin-top: 0px; } 100%{ height: 10px; margin-top: 25px; } } @-moz-keyframes

问题 I am trying to center all tables in td. Solution should work good in email clients such as outlook, Windows Live e.t.c. But they align vertically. How to align tables in center of div? <td align="center" style="text-align:center;width:100%;" width="100%"> <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;"> <tbody> <tr> <td width="33" align="left" class="social-share-cell" style=

问题 I have one row inside which I have three columns like this: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <section> <div class="container"> <div class="row"> <div class="col-4"> <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" /> </div> <div class="col-4"> <img class="img-fluid" src="https://via.placeholder

问题 http://codepen.io/donnaloia/pen/IekLw I'm trying to replicate the tympanus demo using masonry and animonscroll.js. the only difference is I'm using div cards with images inside them instead of just images. Here is the working tympanus demo http://jsfiddle.net/Sfmv9/19/light/ And here is my code: http://codepen.io/macsupport/pen/eghEm You can see I have masonry working, but the anim on scroll effect is not working. I've actually been trying to figure this out for a few weeks, and just can't

问题 I've been messing with this code for awhile now and I'm stuck. I've done a lot of coding by hand but just now ramping up on the new things with HTML5, CSS3, and Javascript. I'm trying to make a simple menu that slides up and down. I have a div that contains everything. The div has overflow set to hidden so when the menu is out of the viewing box, it can't be seen. It can then animate in and out of the view box. I've been trying to do it with a Javascript function but it sounds like it's

问题 Are there any drawbacks of using transform: scale(x.x) instead of doing traditional resizing with the width and height properties? Does scaling produce a lower quality image or something? 回答1: Scale generates a general better quality result (from a visual point of view) because many browsers render it via GPU (in other words, with hardware acceleration) using advanced resampling algotithms, but it has a drawback: Scaled object does not create a space around it, larger than its original size .

问题 I have the following HTML and CSS here http://jsfiddle.net/XQ5c9/. I am trying to center all of my content on any screen size/browser. Currently, everything is off center and a bit to the left on all the screens I can test on. Here is my CSS (both HTML and CSS are in the jsfiddle link): @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); html{ /* font-family: 'Roboto Condensed', sans-serif;*/ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",