首页 > 代码库 > html/css小练习4
html/css小练习4
（纯CSS）效果图：
因为是自学，就自己找到一个格局一点点打出来的，因为还是小白，不知道是否违反了规则或者有错误的地方.请大家多多见谅，看到有错误的地方尽管提！！
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 body,ul,h2,h3,h4{margin:0; padding:0;} 8 img{border:0; vertical-align:top;} 9 a{ text-decoration:none; color:#3333;} 10 li{list-style:none;} 11 .clear{zoom:1;} 12 .clear:after{content:""; clear:both; display:block;} 13 .wrap{width:620px;} 14 .head{ background:url(pic7.png) no-repeat 11px 16px;} 15 .head h2{ font-weight:bold; font-size:14px; line-height:26px; padding:22px 0 0 20px;} 16 .head h2 a{ font-style:normal;font-size:12px; line-height:24px; color:#666; padding-left:415px;} 17 .left{width:300px; padding-top:15px; padding-left:10px; padding-bottom:6px; float:left;} 18 .pic{width:290px; height:230px;} 19 .pic a b{ line-height:20px; font-size:14px; padding-top:6px; color:#000;} 20 .title li{padding-top:20px; line-height:20px; font-size:12px;} 21 22 .title li a{padding-right:14px;} 23 .title li b{color:#CCC; font-size:12px; line-height:20px; padding-right:10px;} 24 .leftbotoom{padding-top:5px; } 25 .content{ padding-left:20px;} 26 .content li{font-size:12px; line-height:20px; list-style:square;} 27 .leftbotoom b{ line-height:20px; font-size:12px; color:#999;} 28 .leftbotoom b a{color:#000;} 29 .right{float:right; width:290px; padding-top:15px;} 30 .right img{width:128px; height:80px;} 31 .rightpic li{ width:130px; height:122px; float:left; padding-right:10px; padding-bottom:10px;} 32 .rightpic li b{ font-weight:normal; color:#000; font-size:12px; line-height:24px; padding-right:10px; padding-bottom:0;} 33 .rightpic li .number1{ padding-left:20px;background:url(pic3.png) no-repeat 0 0;font-size:10px; color:#666; line-height:14px;} 34 .rightpic li .number2{background:url(pic4.png) no-repeat 5px 0; padding-left:25px;} 35 36 </style> 37 </head> 38 39 <body> 40 <div class="wrap clear"> 41 <div class="head"> 42 <h2>今日头条<a>热度 深度 青春季</a></h2> 43 44 </div> 45 <div class="left"> 46 <div class="lefttop"> 47 <div class="pic"> 48 <a href="#"> 49 <img src="pic1.png" /> 50 <b>实拍二炮跨区联合演习 千里机动发射导弹</b> 51 </a> 52 </div> 53 <ul class="title"> 54 55 56 <li> 57 <a> 58 <img src="pic2.png" /> 59 <span>安徽卫视</span> 60 </a> 61 62 63 <img src="pic3.png" /> 64 <b>2,974,128</b> 65 66 67 <img src="pic4.png" /> 68 <b>1,804</b> 69 </li> 70 </ul> 71 </div> 72 <div class="leftbotoom"> 73 <ul class="content"> 74 <li> 75 [热点]中国将提交东海划界案 大陆架延伸到冲绳海槽 76 </li> 77 <li> 78 [热点]中国将提交东海划界案 大陆架延伸到冲绳海槽 79 </li> 80 <li> 81 [热点]中国将提交东海划界案 大陆架延伸到冲绳海槽 82 </li> 83 <li> 84 [热点]中国将提交东海划界案 大陆架延伸到冲绳海槽 85 </li> 86 </ul> 87 <b>深度阅读：<a>军演</a></b> 88 </div> 89 </div> 90 91 <div class="right"> 92 <ul class="rightpic"> 93 <li> 94 <a href="#"> 95 <img src="加勒比海盗/pic1.png" /> 96 <b>日本新任驻华大使病逝</b> 97 <span class="number1">234,45<span class="number2">33333,00</span></span> 98 </a> 99 </li>100 <li>101 <a href="#">102 <img src="加勒比海盗/pic1.png" />103 <b>日本新任驻华大使病逝</b>104 <span class="number1">234,45<span class="number2">33333,00</span></span>105 </a>106 </li>107 <li>108 <a href="#">109 <img src="加勒比海盗/pic1.png" />110 <b>日本新任驻华大使病逝</b>111 <span class="number1">234,45<span class="number2">33333,00</span></span>112 </a>113 </li>114 <li>115 <a href="#">116 <img src="加勒比海盗/pic1.png" />117 <b>日本新任驻华大使病逝</b>118 <span class="number1">234,45<span class="number2">33333,00</span></span>119 </a>120 </li>121 <li>122 <a href="#">123 <img src="加勒比海盗/pic1.png" />124 <b>日本新任驻华大使病逝</b>125 <span class="number1">234,45<span class="number2">33333,00</span></span>126 </a>127 </li>128 <li>129 <a href="#">130 <img src="加勒比海盗/pic1.png" />131 <b>日本新任驻华大使病逝</b>132 <span class="number1">234,45<span class="number2">33333,00</span></span>133 </a>134 </li>135 </ul>136 137 </div>138 </div>139 140 </body>141 </html>
html/css小练习4
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。