css

问题 I'm already busy with a one page navigation. Below you will find more information about the problem and my wish. How should it work? Once a navigation item is clicked, scroll to its particular section and update the active class of the menu. And if the page is scrolled to its particular section, it should update the active state too - so change the class to its particular anchor. Fixed header For the website I also used a fixed header, so this should NOT be overlay the particular section. So

问题 As of the version 76.0.3809.100 of Google Chrome, I have a new pseudo element to autocomplete the inputs. I want the autocomplete function but I need remove the styles by default. <div pseudo="-internal-input-suggested" id="placeholder" style="display: block !important;"> myEMail@gmail.com </div> Styles applied by default on Chrome: input::-internal-input-suggested, textarea::-internal-input-suggested { font: 400 13.3333px Arial !important; } I'm trying overwrite with the same input::

问题 Can I do something like this with pure html and if needed css and javascript: And when the mouse focuses, it becomes like this: So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method? EDIT: Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related? 回答1: If you only need to support the latest Browser use this: HTML: <input placeholder="Google Custom

问题 I have noticed one thing. On some sites such as tray.io, asana, fb etc They have random characters in css class names when you inspect them for example: <header class="Header_XSDsdksdXKkSDD">..</Header> Why are these characters generated and how are they generated? Thanks. 回答1: Those class names or identifiers are probably generated by the engine that produces the page output. If you want to add a style to a particular element, you want a unique class for it - the easiest way is to generate

问题 I'm facing a issue on page counting on browser's Print View. Creating a report with tables separated by categories I need to reset the counter by category and when we create a long data table with undetermined number of lines we can't count how many times the table header will be shown to determine how many pages will have that category. Is there a way to count on print view how many times the header will be shown? JSFiddle https://jsfiddle.net/7prs03eh/3/ .report-table { page-break-after:

问题 I'm facing a issue on page counting on browser's Print View. Creating a report with tables separated by categories I need to reset the counter by category and when we create a long data table with undetermined number of lines we can't count how many times the table header will be shown to determine how many pages will have that category. Is there a way to count on print view how many times the header will be shown? JSFiddle https://jsfiddle.net/7prs03eh/3/ .report-table { page-break-after:

问题 I would like to have 3 divs that normally are shown in the page like below -------------- | | | | 1 | | | | 2 | |-----| | | | | | 3 | | | | | -------------- so html will be something like EDIT : I do think there is a better solution but to keep 1 and 3 on the left one after the other first thing you may do is placing them inside another div. I do believe that doing so it will be impossible to solve the resize by the use of media queries only. Is there a way to achieve the same visual result

问题 Im using Nuxt.js, and have a custom component. This component has css in the component that sets a background image using css. I've tried the following but I get an error when I run this. The error is: invalid expression: Invalid regular expression flags in Component <template> <section class="bg-img hero is-mobile header-image" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"> <div class=""> <div class="hero-body"> <div class="container"> <h1 class="title"> {{ result }} </h1> <h2

问题 I'm trying to make a triangle in CSS that takes the whole width of the parent with a fixed height. I successfully did so with a linear-gradient like this: .triangle { width: 100%; height: 120px; background: linear-gradient(to right bottom, blue 50%, transparent 50%); } <div class="triangle"></div> But the diagonal doesn't look crisp. How could I do the same in CSS without using gradient? 回答1: You can blur the edge a bit .triangle { width: 100%; height: 120px; background: linear-gradient(to

问题 When was full support for numeric font-weight added to each browser? Specifically: IE, FireFox, Chrome, Safari, iOS Safari, Android Browser. I know all browsers support bold and normal , but I've been unable to find a up-to-date list of browsers that fully support numeric values for the CSS font-weight property. The only info I found was Font-weight is still broken. It shows most browsers at the time failing to render numeric weights correctly but it's from 2009 before IE8 was even released.