Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve the top column of css Sina home page. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Html code

Set as the home page mobile phone Sina mobile client login Weibo private message Comment @ my blog email site navigation

Css Code:

Body,div {margin: 0; padding: 0; font-family: "Microsoft YaHei", "Microsoft Yahei", "SimSun", "Song style";} ul,li {list-style: none; margin: 0; padding: 0;} a {text-decoration: none; color: # 4c4c4c;} .border-01 {width: 100%; border-top: 4px solid # ff8400; border-bottom: 1px solid # edeef0 / * text center alignment height=line-height * / height: 42px; line-height: 42px;}. Border-001 {width: 982px; margin: 0 auto; font-size: 12px;} .weibo-left {float: left;}. Weibo-right {float: right;} / * use float to achieve horizontal arrangement, instead of the parent component setting display to flex * / .weibo-left > li,.weibo-right > li {float: left; padding:0px 14px }. Weibo-left > li:hover,.weibo-right > li:hover {/ * color: # ebbe7a; * / background-color: # edeef0;}. Weibo-left > li > aVV hoverder. Weibowi right > li > a:hover {color: # ff8400;} .Weibo > ul {position: absolute; display: none; / * margin-left:-14px; * / * left:-14px; * / * padding: 0 14px * /} / * parent element hover implementation child element display * / .weibo:hover > ul {display: block; width: 113px; / * margin-left:-14px; * / * padding: 014px; * /}. Weibo:hover > ul > li {border: 1px solid # ff8400; border-top: none; padding: 014px; margin-left:-14px;}. Weibo:hover > ul > li > a:hover {background-color:#edeef0 Color:# ff8400; display: block;} .weibo:hover > ul > li:hover {background-color:#edeef0; / * color:# ff8400; * /}

Achieve results:

Summary of knowledge points:

1.uli li can be arranged horizontally using float. The frequent use of diplay:flex; in the past may cause some problems, but add it later

two。 Parent element: hover > Child element {dispay:block/none}: control the display and hiding of child elements through the parent element hover attribute

3.position:absolute allows elements to be separated from the document stream and used with z-index without affecting the layout display of elements in the document stream, and can realize cascading display of elements.

These are all the contents of this article entitled "how to achieve the top column of css Sina home page". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.