HTML+CSS D08浮动
2024-05-22 23:39:49
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>转载于:https://www.cnblogs.com/kylyww/p/5255487.html
HTML+CSS D08浮动相关推荐
- CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
- CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
- CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
- CSS——清除浮动的六种解决方案
CSS--清除浮动的六种解决方案 参考文章: (1)CSS--清除浮动的六种解决方案 (2)https://www.cnblogs.com/iwilling/p/8485608.html (3)htt ...
- css出现的问题以及解决,div+css的浮动常出现的问题以及解决办法_html/css_WEB-ITnose...
今天终于有空写篇文章了,如果有不对的还请大家多多指正,只是想让初学者少走点弯路,当初我学的时候到处碰壁,一些很简单的问题如题"div+css的浮动"被一些牛X人物写的多么的深奥,我 ...
- 活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
- CSS使用浮动属性和边距设计3行3列定宽的布局实例
CSS使用浮动属性和边距设计3行3列定宽的布局 下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面. 实例 设计步骤如下: 1. 制作3行3列定宽布局的XHTML部分.源 ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- css清除浮动的原理
最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...
最新文章
- 手把手用YOLO做目标检测
- 【转载】mysql主键的缺少导致备库hang
- SAP CRM Fiori搜索没有命中情况下的调试细节
- Spring MVC 验证码
- jQuery 1.9.1中live()变更
- （40）Verilog HDL锁存器设计
- Android：通过Intent传递对象、Parcelable
- 项目建设做好服务器,我院数字化建设项目（一期）服务器系统切换工作顺利完成...
- No module named ‘win32gui‘ 的解决方法（踩坑之旅）
- customErrors与错误页面
- opencv 指定分辨率_使用opencv拉伸图像扩大分辨率示例
- python 协程进阶
- Termux新/旧版下载地址及其附属包下载地址归总(附低版本aarch64安装包地址)
- 密码编码学与网络安全讲的是什么
- 通信协议（一）——UART协议
- keep-alive的用法
- binlog流程 mysql_MySQL binlog分析程序：Open Replicator
- 计算数据集的均值和方差（mean，std）
- 每天5分钟，定投聊通透-学习笔记01
- 高光谱目标检测论文学习（2）——OSP Using Data Sphering and LRaSMD for HTD
热门文章
- ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化
- 基金 、 社保和QFII等机构的重仓股排名评测
- SEO源码自建快排系统
- 程序设计与算法（三）期末考试之013:编程填空：三生三世
- 12月30日学习总结
- signature=3cb79ad68e1de6fcae23aede975d0e4e,考研二外法语易错题汇总
- Linux下查看隐藏文件夹
- oracle使用PLSQL导出dmp文件一闪而过的解决办法
- 642-825 认证题库
- python怎么编写流氓软件_Python恶意软件分析入门