Another surprise brought by IE8 is the magical web news.

Source: Internet
Author: User

IE8 gave me another surprise-webpage news. Using it, we can capture the content of a piece of content on a page we are interested in and display it directly under the favorites folder of the browser. I think this is a pioneering work. The official description of webpage news is as follows:

A webpage newsletter is a specific part of a webpage that you can subscribe to. It allows you to know when the favorite website provides updated content (such as the current temperature or changing auction prices ). Once you subscribe to a webpage newsletter, it will be displayed as a link in the favorites bar. When you update a webpage newsletter, the link on the favorites bar is displayed in bold. Then, you can click the link to view the update content.

Maybe neither of my descriptions nor official descriptions can be intuitively understood. The following are the descriptions and figures:

1. When you use IE8 to browse a webpage, a green box appears when you move the mouse, and a clickable icon appears, indicating that there are webpage newsletters on this page that can be subscribed.

2. Now you can click the icon in the upper-left corner of the Green Box to display the favorite webpage news icon, as shown in

3. Click "add to Favorites". Now you can use the webpage news provided by the baby's pregnancy website. The effect is as follows:

In this age of advertising, this is a very good function. We don't have to browse the homepage of the website, so we can directly see the headlines in the website focus area.

Next, let's take a look at how this dazzling function of web news is implemented. Its implementation is very simple, that is, a few fixed CSS. Please refer to the followingCode:

{
Function onclick ()
{
This. style. display = 'none'; document. getelementbyid ('Code _ closed_text_185136 '). style. display = 'none'; document. getelementbyid ('Code _ open_image_185136 '). style. display = 'inline'; document. getelementbyid ('Code _ open_text_185136 '). style. display = 'inline ';
}
} "Id =" code_closed_image_185136 "style =" display: none "> {
Function onclick ()
{
This. style. display = 'none'; document. getelementbyid ('Code _ open_text_185136 '). style. display = 'none'; getelementbyid ('Code _ closed_image_185136 '). style. display = 'inline'; getelementbyid ('Code _ closed_text_185136 '). style. display = 'inline ';
}
} "Id =" code_open_image_185136 "> Code
< Div Class = "Defaultsection hslice" ID = "Divrecomment" >
< H2 Class = "Entry-title" > Reading during pregnancy is recommended today </ H2 >
< Ul Class = "Entry-content" >
< Li > < A Href = "Http://www.baobaoyunli.com/bbs/post,229.aspx" > What should I do if I have been pregnant for more than five months? </ A > </ Li >
< Li > < A Href = "Http://www.baobaoyunli.com/bbs/post,181.aspx" > Fetal education story XianRen world </ A > </ Li >
< Li > < A Href = "Http://www.baobaoyunli.com/bbs/post,237.aspx" > Foods beneficial to fetal development at various stages </ A > </ Li >
< Li > < A Href = "Http://www.baobaoyunli.com/bbs/post,224.aspx" > < Strong > Pregnancy can bring 10 benefits to women </ Strong > </ A > </ Li >
< Li > < A Href = "Http://www.baobaoyunli.com/bbs/post,232.aspx" > Teach you 50 tips! </ A > </ Li >
</ Ul >
</ Div >

 

As you can see, there is an hslice CSS class on the Div. This class indicates that the content in the DIV is a webpage News, and the DIV must be specified with an ID; there are also two fixed CSS types, entry-title and entry-content, which respectively indicate the title and content elements of the webpage news. What we need to do with this magical function is to specify an ID and three CSS classes.

This feature of ie8. Thanks to Microsoft.

-------------

This reference is for the baby's pregnancy history. It is a pregnancy website. If you are giving birth to a baby, please use it.

--------------

If you are interested in IE8, see my original article:Caught two IE8 bugsAndIE8 developer tools allow the web development client to debug smoothly

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.