<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/day_02.css" rel="stylesheet"> </head> <body> <div class="box"> <ul class="nav clear"> <li><a href="#">博客首页</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">体育</a></li> <li><a href="#">文史</a></li> <li><a href="#">女性</a></li> <li><a href="#">股票</a></li> <li><a href="#">教育</a></li> <li><a href="#">星座</a></li> <li><a href="#">美食</a></li> <li><a href="#">设计</a></li> <li><a href="#">育儿</a></li> <li><a href="#">旅游</a></li> <li><a href="#">收藏</a></li> <li><a href="#">时尚</a></li> <li><a href="#">图片</a></li> <li><a href="#">悦博</a></li> <li><a href="#">博客地图</a></li> <li><a href="#">全媒体影响力排行榜</a></li> </ul> </div> <div style="width: 920px;height:400px; margin-top: 10px"> <div style="width:306px;height:133px; float:left;" > <img src="img/zuoye_01.jpg" style="width: 306px"> </div> <div style="width:306px;height:400px; float:left;"> <h2 style="color: #CE636C;">“油腻中年猥琐男”到底猥琐在哪儿了?</h2> <p class="duan1">聚焦,贼喊捉贼!!!聚焦,贼喊捉贼!!贼喊捉贼!!</p> <p class="duan1">聚焦,贼喊捉贼!!!聚焦,贼喊捉贼!!贼喊捉贼!!</p> <h2 style="color: #CE636C;">宋仲基宋慧乔世纪婚礼竟然如此低调?</h2> <p class="duan1">双宋结婚场地曝光!双宋结婚场地曝光,结婚场地曝光!</p> <hr /> <ul class="lu"> <li class="lu">老有所依,老有所依,老有所依老有所依</li> <li class="lu">文化自信源于内心对中华文化的敬仰文化自信源于内心对中华文化的敬仰/li> <li class="lu">别问为何突然联系你,因为我还记得你</li> <li class="ll">明星24节气播报:严屹宽张歆艺分享养生秘笈</li> <li class="lu">史话 | 古代枕头又硬又冷,古人为何如此自虐</li> </ul> </div> <div style="width: 306px; height: 150px; float: left" > <h2 style="text-align: center;">新浪博友,欢迎回来!</h2> <p style="text-align: center;color: red;">登陆后,可以按照您的兴趣设置</p> <form action="" method="post"> <input style="margin: 10pt;" placeholder="微博/博客/邮箱/手机号" /><br /> <input style="margin: 10pt;" type="password" placeholder="输入密码" /><br /> <input style="margin: 10pt; background: #FF6600; width: 100px; height: 40px; color: #ffffff" type="submit" value="登录" /> <input style="margin: 10pt;" type="checkbox" />下次自动登录<br /> </form> <a href="#" class="aa">忘记密码</a> <a href="#" class="aa">立即注册</a> <a href="#" class="aa" style="float: right;">帮助中心</a><br /> <img src="img/zuoye_02.jpg" style="width: 307px; margin-top: 8px"> </div> </div> </body> </html> style文件*{ margin: 0 auto; padding: 0; } .box{ background: goldenrod; padding: 10px; width: 900px; margin: 0 auto; margin-top: 18px; } .clear:after{ content: "\200B"; display: block; width: 0; height: 0; clear: both; } li{ list-style: none; } a{ text-decoration: none; } .nav li{ float: left; height: 18px; margin: 4px; line-height: 18px; } .nav li a{ color: #ffffff; } a:hover{ padding: 10px; background: darkgoldenrod; } .tupian{ width: 298px; height:418px; margin-left: 223px; margin-top: 10px; } .zt{ width: 100px; height: 100px; margin: 0 auto; text-align: center; }
首页
最新推荐文章于 2023-11-20 14:13:43 发布