The implementation of information effect of common bulletin boards

The effect of the implementation is as follows:

The above effect is mainly used, Ul,h3,li,span, in addition to some CSS to achieve.

To achieve the effect of the above bulletin board, the code is as follows:

The first scenario: use padding to resolve the display of announcement notifications about xxxxxxxxx.

Deprecated, apply span plus relative positioning to solve font positioning, should be padding with browser compatibility issues

<Divclass= "Div_show">            <ulclass= "Topic_show">                <H3><span>Notice announcement</span></H3>                <Li>Notice of announcement on xxxxxxxxx</Li>                <Li>Notice of announcement on xxxxxxxxx</Li>                <Li>Notice of announcement on xxxxxxxxx</Li>                <Li>Notice of announcement on xxxxxxxxx</Li>                <Li>Notice of announcement on xxxxxxxxx</Li>            </ul></Div>

Implementation of CSS

<style type= "text/css" media= "screen" >/*clear out some of the tags default to their own padding and margin*/            * {padding:0px;margin:0px; }/*where to set the div*/. Div_show{Margin-left:50px;Margin-top:50px; }/*For the ul of the pair, and the display of the border color, the color of the gray is only set at this place, the width of the UL, not set height because the height is changing with the Li change*/Ul.topic_show{List-style:None;width:249px;Border:1px solid #999; }/*used to set the title size, background and color, as well as font size in UL*/ul.topic_show H3{Height:30px;width:249px;background:#111155;Color:#FFFFFF;font-size:14px; }/*use span and position's relative to set the position of words in the title of UL*/ul.topic_show H3 span{position:relative; Left:10px;Top:8px; }/*use padding to set the position of the font in Li*/ul.topic_show Li{padding:5px 20px;font-size:12px;Color:#555;background:URL ("point.jpg") no-repeat;background-position:10px 7px; }</style>

Second scenario: Use span to resolve the "notice of announcements about xxxxxxxxx" display,

Recommended use.

HTML code

<Divclass= "Div_show">            <ulclass= "Topic_show">                <H3><span>Notice announcement</span></H3>                <Li>                    <span>Notice of announcement on XXXXXXXXX</span>                </Li>                <Li>                    <span>Notice of announcement on XXXXXXXXX</span>                </Li>                <Li>                    <span>Notice of announcement on XXXXXXXXX</span>                </Li>                <Li>                    <span>Notice of announcement on XXXXXXXXX</span>                </Li>                <Li>                    <span>Notice of announcement on XXXXXXXXX</span>                </Li>                <Li>                    <span>Notice of announcement on XXXXXXXXX</span>                </Li>                <Li>                    <span>Notice of announcement on XXXXXXXXX</span>                </Li>            </ul>        </Div>

CSS implementation, using the implementation of span

<style type= "text/css" media= "screen" >/*clear out some of the tags default to their own padding and margin*/            * {padding:0px;margin:0px; }/*where to set the div*/. Div_show{Margin-left:50px;Margin-top:50px; }/*For the ul of the pair, and the display of the border color, the color of the gray is only set at this place, the width of the UL, not set height because the height is changing with the Li change*/Ul.topic_show{List-style:None;width:249px;Border:1px solid #999; }/*used to set the title size, background and color, as well as font size in UL*/ul.topic_show H3{Height:30px;width:249px;background:#111155;Color:#FFFFFF;font-size:14px; }/*use span and position's relative to set the position of words in the title of UL*/ul.topic_show H3 span{position:relative; Left:10px;Top:8px; }/*font notification content in Li, and settings for Li size and background pictures*/ul.topic_show Li{font-size:12px;Height:25px;Color:#555;Border:1px solid Red;background:URL ("point.jpg") no-repeat;background-position:10px 7px; }/*use span and relative to solve the position of the fonts in Li*/ul.topic_show Li Span{position:relative; Left:20px;Top:5px; }</style>

The implementation of information effect of common bulletin boards