CSS style highlights

Source: Internet
Author: User

Here we will record some of the problems I encountered during the production of the web page. I want to help you here.

  1. If the iframe is different, a scroll bar appears.
    On the iframe reference page, add:
    <Body style = "overflow: hidden; overflow-x: auto; overfow-y: auto">
  2. Scroll bar style
    SCROLLBAR-FACE-COLOR: # 2A024D;
    SCROLLBAR-HIGHLIGHT-COLOR: # 0042FF;
    SCROLLBAR-SHADOW-COLOR: #000000;
    SCROLLBAR-3DLIGHT-COLOR: # FDFDFD;
    SCROLLBAR-TRACK-COLOR: #000000;
    SCROLLBAR-ARROW-COLOR: # 0042FF;
    SCROLLBAR-DARKSHADOW-COLOR: #000000; (color of course or change your favorite... ^)

    1. The track of the scroll bar, recorded as: scrollbar-track. The so-called "track" refers to the route that must be taken when the sliding block of the scroll bar is running.
    2. Slide block of the scroll bar, that is, the sliding block that can be moved up or down or left, and the small square at both ends of the scroll bar are pressed on it and recorded as scrollbar-face. Face is the "face" of the scroll bar. Note that there are three "faces": Slide bars and small blocks at both ends.
    3. Specify scrollbar-highlight as the highlighted border of the scroll bar. This highlighted border has the same concept as the highlighted border of the table, that is, the left and top sections. The highlighted border section of the scroll bar refers to the "face" of the scroll bar (that is, sliding block and two small blocks).
    4. The outer side of the bright border of the scroll bar has a three-dimensional modification part, which is recorded as a scrollbar-3dlight. 3d is the three-dimensional meaning. It will surround the outside of the bright border of the scroll bar.
    5. The shadow part of the scroll bar refers to the shadow of the main slider and two blocks on the left and bottom left. It is recorded as scrollbar-shadow.
    6. The Shadow part of the scroll bar also has a strong shadow part, which is recorded as scrollbar-darkshadow, which is surrounded by the outside of the shadow part.
    7. The two sides of the scroll bar are marked with arrows as scrollbar-arrow. The arrows are downward, upward, left, and right.

  3. In xhtml, the style of the scroll bar cannot be controlled using the body.
    Use body, html {}

  4. Vertical center of input elements and text
    <P>
    <Input type = "text" name = "author" id = "author" style = "vertical-align: middle"/>
    <Label for = "author"> <small> </label>
    </P>

    Add the vertical-align: middle attribute to the Input.
    Align the content of objects supporting the valign feature with the center of the object

  5. Vertical center between img elements and text
    The img element has the attribute valign, which controls the alignment of the elements following it. Use middle.

  6. Vertical center of text inside div
    <Div style = "height: 22px; line-height: 22px;"> Hello, everyone. </Div>
    That is to say, you can set the height to be consistent with the line-height. This method is effective for single-line text.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.