【小练习02】CSS--网易产品
生活随笔
收集整理的這篇文章主要介紹了
【小练习02】CSS--网易产品
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要求用css和HTML實現下圖效果：
代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>#box{width: 298px;border: 1px solid #cfcfcf;border-top: 2px solid #206f96;margin: 0 auto;font-size: 0; /*解決a標簽之間的間隙*/}#header{font: bold 14px/29px '宋體';color: #252525;padding-left: 10px;border-bottom: 1px solid #cfcfcf;background: url(img/head_bg.gif) repeat-x;}a{text-decoration: none;font: 12px/25px '宋體';color: #252525;margin-right: 10px;white-space: nowrap;}#con1{padding: 19px 0 14px 50px;background: url(img/ico_02.gif) no-repeat 16px 25px;}#con2{padding: 13px 0 13px 50px;background: #f7f7f7 url(img/ico_03.gif) no-repeat 10px 51px;}#con3{padding: 13px 0 13px 50px;background: url(img/ico_04.gif) no-repeat 15px 25px;}#con4{padding: 13px 0 13px 50px;background: #f7f7f7 url(img/ico_05.gif) no-repeat 12px 49px;}</style></head><body><div id="box"><div id="header">網易產品</div><div id="con1"><a href="#">免費郵</a><a href="#">VIP郵箱</a><a href="#">企業郵</a><a href="#">郵箱大師</a><a href="#">易信</a></div><div id="con2"><a href="#">夢幻西游2</a> <a href="#">新大話2</a><a href="#">新大話3</a> <a href="#">藏地傳奇</a><a href="#">魔獸世界</a><a href="#">星際爭霸Ⅱ</a><a href="#">倩女幽魂2</a><a href="#">武魂2</a><a href="#">天下3</a><a href="#">突擊英雄</a><a href="#">新飛飛</a><a href="#">大唐無雙零</a><a href="#">天諭</a><a href="#">英雄三國</a><a href="#">龍劍</a><a href="#">亂斗西游</a><a href="#">爐石傳說</a><a href="#" style="margin-right: 0;">UU加速</a></div><div id="con3"><a href="#">考拉海購</a><a href="#" >LOFTER</a><a href="#">博客</a><a href="#">相冊</a><a href="#">花田交友</a><a href="#">約會</a><a href="#">女神</a><a href="#">跟帖</a><a href="#">搶購</a><a href="#">CC語音</a><a href="#">BoBo直播</a></div><div id="con4"><a href="#">彩票</a><a href="#">理財</a><a href="#">商城</a><a href="#">貴金屬</a><a href="#">電影票</a><a href="#">車險</a><a href="#">有道詞典</a><a href="#">翻譯</a><a href="#">云筆記</a><a href="#">印象派</a><a href="#">公開課</a><a href="#">云課堂</a><a href="#">讀小說</a><a href="#">云音樂</a><a href="#">火車票</a><a href="#">游戲助手</a><a href="#">公正郵</a><a href="#">應用</a><a href="#">雜志</a><a href="#">新聞客戶端</a><a href="#">大學慕課</a></div></div></body> </html>**源代碼地址：**http://download.csdn.net/detail/baidu_37107022/9835707
總結
以上是生活随笔為你收集整理的【小练习02】CSS--网易产品的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【小练习01】CSS--PS提示框制作
- 下一篇： 一天搞定CSS：css选择器--07