HTML+CSS D08浮动
1.
1 <html> 2 <head> 3 <title>div浮动</title> 4 <style type="text/css"> 5 body,h3,div,ul,a,li,p{margin:0px;padding:0px;font-size:14px;color:black;} 6 .max{width:1165px;height:700px;margin:0px auto;} 7 a:link{color:black;text-decoration:none;} 8 a:visited{color:black;text-decoration:none;} 9 a:hover{color:red;text-decoration:underline;} 10 .p1{color:blue;margin-left:5px;} 11 .p1 a:link{color:blue;} 12 .p1 a:visited{color:blue;} 13 14 .first0{width:350px;height:300px;float:left;} 15 .first1{width:108px;height:70px;float:left;padding-top:20px;} 16 .first2{width:180px;height:70px;float:left;margin-left:20px;line-height:25px;padding-top:25px;} 17 .first2 a:link{color:blue;font-weight:bold;} 18 .first2 a:visited{color:blue;} 19 .first3{clear:both;padding-top:12px;float:left;margin-left:10px;} 20 .first3 ul li{height:28px;line-height:28px;list-style:none;padding-left:25px;background: url(sanjiao.png) no-repeat left center;} 21 .first0 .first3 ul .class{background:none;padding-left:3px;} 22 23 24 p{text-align:right;padding-bottom:10px;font-color:blue;padding-right:30px;} 25 .first4{width:350px;height:300px;float:left;} 26 .first4 ul li{height:18px;list-style:none;padding-left:25px;margin-top:11px;background: url(sanjiao.png) no-repeat left center;} 27 .first4 ul .class1{background: url(fang.png) no-repeat left center;margin-left:2px;} 28 29 .first5{width:450px;height:300px;float:left;margin-left:15px;} 30 .first6{width:110px;height:70px;float:left;margin-top:10px;margin-left:5px;} 31 .first7{width:300px;height:70px;margin-left:20px;float:left;margin-top:15px;line-height:70px;} 32 .first8{margin-left:15px;float:left;} 33 .first8 ul li{height:15px;list-style:none;line-height:4px;clear:both;padding-top:9px;padding-left:25px;background: url(sanjiao.png) no-repeat left center;} 34 35 .first9{width:100%;height:93px;margin-top20px;;clear:both;margin-left:10px;} 36 37 .s{width:350px;height:280px;float:left;margin-top:20px;} 38 .s1{width:105px;height:70px;float:left;margin-top:20px;} 39 .s2{width:150px;height:70px;line-height:20px;float:left;margin-left:20px;margin-top:20px;} 40 .s3 ul li{height:15px;list-style:none;line-height:10px;padding-left:28px;clear:both;padding-top:10px;background:url(sanjiao.png) no-repeat left center;} 41 42 .f1{width:350px;height:280px;float:left;margin-top:5px;} 43 .f2{width:350px;height:20px;float:left;margin-top:20px;} 44 .f3{width:350px;float:left;margin-left:20px;margin-top:20px;} 45 .f3 ul li{list-style:none;height:30px;line-height:30px;padding-left:25px;background: url(sanjiao.png) no-repeat left center;} 46 47 .d1{width:350px;height:280px;float:left;margin-top:65px;margin-left:20px;} 48 .d1 ul li{list-style:none;height:30px;line-height:30px;padding-left:25px;background: url(sanjiao.png) no-repeat left center;} 49 50 </style> 51 </head> 52 <body> 53 <div class="max"> 54 <hr size="2px" width="100%" color="green"/> 55 <div class="first0"> 56 <h3 class="p1"><a href="#" target="blank">体育</a> / <a href="#" target="blank">中超</a> / <a href="#" target="blank">英超 </h3> 57 58 <div class="first1"> 59 <img src="tupian.PNG" /> 60 </div> 61 <div class="first2"> 62 <a href="#" target="blank">NBA-火箭18分大逆转擒猛龙 哈登砍40+14</a> 63 </div> 64 65 <div class="first3"> 66 <ul> 67 <li><a href="#" target="blank">爆冷！科比复出12分领7人上双 湖人大胜勇士</a></li> 68 <li><a href="#" target="blank">西甲-梅西2球巴萨4-0大胜</a> <a href="#" target="blank">梅西1vs3奔袭破门 </a></li> 69 <li class="class"><a href="#" target="blank">奥运赛-15:30直播女足vs韩国 获胜有望进军里约</a></li> 70 <li><a href="#" target="blank">专访张玉宁：进球感谢神 一特质让我进一线队</a></li> 71 <li><a href="#" target="blank">前山东泰山球员袭警图曝光 目前已被刑事拘留</a></li> 72 <li><a href="#" target="blank">77岁脑梗球迷被辽粤战奇迹唤醒 预言辽宁夺冠</a></li> 73 </ul> 74 </div> 75 </div> 76 77 <div class="first4"> 78 <p class="p1"><a href="#" target="blank">更换频道</a></p> 79 <ul> 80 <li><a href="#" target="blank">我师主场社区</a> | <a href="#" target="blank">库里难及一人获最佳殊荣</a> </li> 81 <li><a href="#" target="blank">范加尔靠青年军再续命？林良锋：勿拔苗助长</a></li> 82 <li><a href="#" target="blank">J马不是斯科拉里的菜？ 媒体：不出成绩恐下课</a></li> 83 <li><a href="#" target="blank">梅西或签2022终老合同 29岁的他仍是世界第一</a></li> 84 <li class="class1"><a href="#" target="blank">意甲-米兰0-2负13战首败 布冯创纪录尤文2-0胜</a></li> 85 <li><a href="#" target="blank">张玉宁绝杀！954天欧洲顶级联赛再现中国射手</a></li> 86 <li><a href="#" target="blank">德羽赛-林丹2-1惊天逆转周天成 国羽三金收官</a></li> 87 <li><a href="#" target="blank">观察：机器人赢得围棋之战，人类该恐惧吗？</a></li> 88 <li><a href="#" target="blank">腾讯体育景区马拉松系列赛启动 4月10日南京开跑</a></li> 89 </ul> 90 </div> 91 92 <div class="first5"> 93 <h3 class="p1"><a href="#" target="blank">汽车</a> / <a href="#" target="blank">在线购车</a></h3> 94 <div class="first6"> 95 <img src="tu.PNG" /> 96 </div> 97 <div class="first7"> 98 <a href="#" target="blank">奥迪A3最低16.09万 超低价豪华品牌家轿行情</a> 99 </div> 100 <div class="first8"> 101 <ul> 102 <li><a href="#" target="blank">范加尔靠青年军再续命？林良锋：勿拔苗助长</a></li> 103 <li><a href="#" target="blank">J马不是斯科拉里的菜？ 媒体：不出成绩恐下课</a></li> 104 <li><a href="#" target="blank">梅西或签2022终老合同 29岁的他仍是世界第一</a></li> 105 <li><a href="#" target="blank">意甲-米兰0-2负13战首败 布冯创纪录尤文2-0胜</a></li> 106 <li><a href="#" target="blank">张玉宁绝杀！954天欧洲顶级联赛再现中国射手</a></li> 107 <li><a href="#" target="blank">德羽赛-林丹2-1惊天逆转周天成 国羽三金收官</a></li> 108 <li><a href="#" target="blank">观察：机器人赢得围棋之战，人类该恐惧吗？</a></li> 109 <li><a href="#" target="blank">腾讯体育景区马拉松系列赛启动 4月10日南京开跑</a></li> 110 </ul> 111 </div> 112 </div> 113 <div class="first9"> 114 <img src="guanggao.PNG" width="1165px"/> 115 </div> 116 <div> 117 <hr size="2px" width="100%" color="blue"/> 118 <div class="s"> 119 <h3 class="p1"><a href="#" target="blank">NBA</a> / <a href="#" target="blank">视频</a> / <a href="#" target="blank">赛程</a> / <a href="#" target="blank">数据</a></h3> 120 <div class="s1"> 121 <img src="tiyu.PNG"/> 122 </div> 123 <div class="s2"> 124 <a href="#" target="blank">科尔披露格林内讧内幕：经常吵架 绝不交易他</a> 125 </div> 126 <div class="s3"> 127 <ul> 128 <li><a href="#" target="blank">勇士爆冷输球刷新六纪录 库里数据平生涯最差</a></li> 129 <li><a href="#" target="blank">科比：战胜勇士帮助球队成长 防守是赢球关键</a></li> 130 </ul> 131 </div> 132 </div> 133 134 <div class="f1"> 135 <div class="f2"> 136 <h3 class="p1"><a href="#" target="blank">社区-我师主场</a></h3> 137 </div> 138 <div class="f3"> 139 <ul> 140 <li><a href="#" target="blank">腾讯实力榜：勇士蝉联榜首冲纪录 雷霆恐掉队</a></li> 141 <li><a href="#" target="blank">杜少32+12+8韦少字母哥同砍三双 雷霆擒雄鹿</a></li> 142 <li><a href="#" target="blank">詹皇连发推特又令人费解 他真的在抱怨队友？</a></li> 143 <li><a href="#" target="blank">火箭不防守魔兽也该背锅 竟效仿科比指挥交通</a></li> 144 <li><a href="#" target="blank">库里难及一人称最佳 勇士为纪录已自掘致命伤</a> </li> 145 </ul> 146 </div> 147 </div> 148 149 <div class="d1"> 150 <ul> 151 <li><a href="#" target="blank">今夏自由球员：KD领衔魔兽在列 詹皇决定三？</a></li> 152 <li><a href="#" target="blank">10大季后赛助攻王:仅2人未夺冠 詹皇力压乔丹</a></li> 153 <li><a href="#" target="blank">篮坛足坛巨星谁像谁 库里像梅西詹皇翻版C罗</a></li> 154 <li><a href="#" target="blank">十大实战超远扣篮 戈登拉文罚球线詹皇滑翔鼻祖</a></li> 155 <li><a href="#" target="blank">第19周十佳球 利拉德半场压哨 法里德骑人隔扣</a></li> 156 </ul> 157 </div> 158 </div> 159 </div> 160 161 162 163 </div> 164 </body> 165 </html>
2.
1 <html> 2 <head> 3 <title>qq页面</title> 4 <style type="text/css"> 5 body,div,h2,ul,p,li{margin:0px;padding:0px;font-size:14px;} 6 .max{width:1050px;height:640px;margin:0px auto;} 7 a:link,a:visited{color:black;text-decoration:none;} 8 a:hover{color:red;text-decoration:underline;} 9 h2{color:#0873c0;margin-left:10px;} 10 h2 a:link,h2 a:visited,.te a:link,.te a:visited{color:#0873c0;font-weight:bold;} 11 hr{margin-top:15px;} 12 13 .class1{width:350px;height:200px;float:left;} 14 .du{width:109px;height:72px;float:left;margin-top:10px;} 15 .te{width:200px;height:72px;line-height:25px;float:left;padding-left:20px;margin-top:20px;} 16 .ul ul li{height:15px;line-height:2px;clear:both;list-style:none;padding-left:20px;padding-top:15px;background:url(sanjiao.png) no-repeat left center;} 17 18 .class2{width:1050px;height:90px;float:left;margin-bottom:15px;} 19 20 .class{width:1050px;height:300px;float:left;} 21 .geng{text-align:right;padding-right:30px;font-weight:normal;} 22 .class1 .ul ul .li{background:none;padding-left:0px;} 23 .class1 .ul ul .class0{background:url(fang.png) no-repeat left center;padding-left:18px;margin-left:2px;} 24 .class1 .ul ul .zhibo{background:url(zhibo.PNG) no-repeat left center;padding-left:30px;} 25 </style> 26 </head> 27 <body> 28 29 <div class="max"> 30 <hr size="2px" width="100%" color="#6daaea"/> 31 <div class="class1"> 32 <h2><a href="http://sports.qq.com/nba/" target="blank">NBA</a> / <a href="http://sports.qq.com/nbavideo/" target="blank">视频</a> / <a href="http://sports.qq.com/kbsweb/" target="blank">赛程</a> / <a href="http://nbadata.sports.qq.com/stats/player/2014playerstatsindex.html" target="blank">数据</a></h2> 33 <div class="tupian"> 34 <div class="du"> 35 <a href="http://sports.qq.com/a/20160308/014204.htm" target="blank"><img src="dulante.PNG"/></a> 36 </div> 37 <div class="te"> 38 <a href="http://sports.qq.com/a/20160308/014204.htm" target="blank">杜兰特离开雷霆底线曝光 不进总决赛就将走人</a> 39 </div> 40 <div class="ul"> 41 <ul> 42 <li><a href="http://sports.qq.com/a/20160308/008386.htm" target="blank">劳森曝加盟步行者原因 穿10号球衣对马刺上场</a></li> 43 <li><a href="http://sports.qq.com/a/20160308/009789.htm" target="blank">周最佳：詹皇莱昂纳德当选 小刺客韦德获提名</a></li> 44 </ul> 45 </div> 46 </div> 47 </div> 48 49 <div class="class1"> 50 <h2><a href="http://sports.qq.com/fans/">社区-我师主场</a></h2> 51 <div class="ul"> 52 <ul> 53 <li><a href="http://sports.qq.com/a/20160308/013358.htm" target="blank">詹姆斯回应推特连续发炮 称只是发表心路历程</a></li> 54 <li><a href="http://sports.qq.com/a/20160308/009599.htm" target="blank">迈卡威接受手术赛季报销 昔日天才或毁于伤病</a></li> 55 <li><a href="http://sports.qq.com/a/20160308/011091.htm" target="blank">姚明提案关注场馆运营 建议多建用得上的场馆</a></li> 56 <li><a href="http://sports.qq.com/a/20160308/017107.htm" target="blank">联盟严惩假摔已见效 二月份30支球队零警告</a></li> 57 <li><a href="http://sports.qq.com/fans/post.htm?id=1528159757093830663&mid=69#1" target="blank">勇士是否需要拉文戈登 欧文想走？詹皇另有绝配</a></li> 58 </ul> 59 </div> 60 </div> 61 62 63 <div class="class1"> 64 <h2 class="geng"><a href="#" target="blank">11:30 魔术 VS 勇士</a></h2> 65 <div class="ul"> 66 <ul> 67 <li><a href="http://v.qq.com/cover/1/1ky0i9qmsyk2uxv.html?vid=j0019yb4h0v" target="blank">看球听歌：离开地球表面 戈登拉文最强空中对决</a></li> 68 <li class="class0"><a href="http://v.qq.com/cover/v/vqsvsmsfy7znct1.html?vid=q00195uw3u8" target="blank">老马巅峰太恐怖！戏耍科比平筐骑扣七尺男</a></li> 69 <li class="class0"><a href="http://sports.qq.com/a/20160308/015215.htm" target="blank">生日怎么过？赛场打爆你 奥尼尔砍61+23庆生</a></li> 70 <li class="class0"><a href="http://sports.qq.com/a/20160308/015485.htm#p=1" target="blank">盘点詹皇对巨星胜率 碾压科比最大克星是姚明</a></li> 71 <li class="class0"><a href="http://sports.qq.com/a/20160308/015426.htm#p=1" target="blank">勇士用生命致敬科比！这次爆冷应该写入历史</a></li> 72 </ul> 73 </div> 74 </div> 75 76 <div class="class2"> 77 <a href="http://sale.suning.com/hwg/20160229guimijie/index.html?utm_source=zq-qq&utm_medium=sytl03&utm_content=sdm&utm_term=15281&ad_sp=15281" target="blank"><img src="untitled.bmp" width="1050px;"/></a> 78 </div> 79 <div class="class"> 80 <hr size="2px" width="100%" color="#6daaea"/> 81 <div class="class1"> 82 83 <div class="tupian"> 84 <h2><a href="http://ent.qq.com/" target="blank">娱乐</a> / <a href="http://ent.qq.com/star/" target="blank">明星</a> / <a href="http://ent.qq.com/movie/" target="blank">电影</a> / <a href="http://yue.qq.com/" target="blank">音乐</a></h2> 85 <div class="du"> 86 <a href="http://ent.qq.com/original/guiquan/g207.html" target="blank"><img src="gui.PNG"/></a> 87 </div> 88 <div class="te"> 89 <a href="http://ent.qq.com/original/guiquan/g207.html" target="blank">[贵圈]揭Sunshine组合走红引发的迷之乱象</a> 90 </div> 91 <div class="ul"> 92 <ul> 93 <li><a href="#" target="blank">老艺术家、葛优父亲葛存壮追悼会今日举行</a></li> 94 <li><a href="#" target="blank">两会委员也关注 网剧“钱景”可好？</a></li> 95 <li><a href="#" target="blank">Selina宣布离婚后仍感谢阿中：我是有福的人</a></li> 96 <li><a href="#"target="blank">太医院好进吗？看刘诗诗玩转攻略 变人生赢家</a></li> 97 <li class="class0"><a href="#" target="blank">撒贝宁携外籍女友逛天坛 父母随行疑好事将近</a></li> 98 <li class="zhibo"><a href="#"target="blank">正直播《我们15个》</a> | <a href="#" target="blank">琍姐出局泪别平顶</a></li> 99 </ul> 100 </div> 101 </div> 102 </div> 103 104 <div class="class1"> 105 <h2 class="geng"><a href="#" target="blank">更换频道</a></h2> 106 <div class="ul"> 107 <ul> 108 <li class="class0"><a href="#" target="blank">谢娜包裹严实现身机场 肚子微凸真怀了？</a></li> 109 <li class="class0"><a href="#" target="blank">周润发姐姐披毛巾拉小车 公园长椅打瞌睡</a></li> 110 <li><a href="#" target="blank">张艺谋女儿亲手做丝巾 陈婷开心晒礼物过妇女节</a></li> 111 <li class="class0"><a href="#" target="blank">“大衣哥”朱之文修建村屋 亲手和泥搬砖</a></li> 112 <li><a href="#" target="blank">《叶问3》发行员：不是做电影 而是帮他们洗钱</a></li> 113 <li class="class0"><a href="#" target="blank">组图：赵丽颖穿毛衣现身机场 挥手与粉丝道别</a></li> 114 <li class="class0"><a href="#" target="blank">黄安晒病容满手管子 憔悴自称“活不了多久”</a></li> 115 <li><a href="#" target="blank">康熙前制作人被曝私收18万 发声明称委屈</a></li> 116 <li class="class0"><a href="#" target="blank">中戏99级同学聚会 陈数于和伟到场靳东缺席</a></li> 117 </ul> 118 </div> 119 </div> 120 121 <div class="class1"> 122 <h2><a href="#" target="blank">成都房产</a> / <a href="#" target="blank">腾讯看房</a></h2> 123 <div class="tupian"> 124 <div class="du"> 125 <a href="http://cd.house.qq.com/a/20160308/021526.htm" target="blank"><img src="fangzi.PNG"/></a> 126 </div> 127 <div class="te"> 128 <a href="#" target="blank">一线楼市火爆 成都房价难现跟风大涨走势</a> 129 </div> 130 <div class="ul"> 131 <ul> 132 <li class="li"><a href="#" target="blank">想买精装房教你七大诀窍 注意4大问题不被忽悠</a></li> 133 <li class="li"><a href="#" target="blank">夫妻假离婚骗贷700万元炒房 存在诸多风险</a></li> 134 <li class="li"><a href="#" target="blank">房企补仓意愿强烈 一线城市宅地价两月上涨25%</a></li> 135 <li class="li"><a href="#" target="blank">政策有望持续宽松 房地产去库存地方版或先后出台</a></li> 136 <li class="li"><a href="#" target="blank">美国新房销售降9.2% 创下2009年来最大降幅</a></li> 137 <li class="li"><a href="#" target="blank">去库存暴起 库存房或变成公租房和共有产权房</a></li> 138 </ul> 139 </div> 140 </div> 141 </div> 142 </div> 143 </body> 144 </html>
本文出自wentaokyle，转载请标明出处！谢谢！
