图片圆角展示与手机版文章页面CSS布局
图片圆角显示与手机版文章页面CSS布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .nav{ 8 width: 600px; 9 height: 120px; 10 background: url("images/07.jpg"); 11 border: 1px solid red; 12 position: relative; 13 margin: 5px auto; 14 } 15 .nav span{ 16 font-size: 26px; 17 position: absolute; 18 bottom: 15px; 19 right: 20px; 20 } 21 .wrap{ 22 position: relative; 23 margin: 0 auto; 24 width: 600px; 25 height: 600px; 26 border: 1px solid red; 27 } 28 .top{ 29 width: 400px; 30 height: 400px; 31 margin: 0 auto; 32 } 33 .top .img{ 34 width: 400px; 35 height: 400px; 36 position: absolute; 37 top:2px; 38 left:100px; 39 border-radius: 50%; 40 } 41 .tex1{ 42 width: 600px; 43 height: 190px; 44 text-align: center; 45 padding: 30px; 46 box-sizing: border-box; 47 font-size: 26px; 48 } 49 .footer{ 50 width: 600px; 51 height: 120px; 52 margin:0 auto; 53 background: url("images/07.jpg"); 54 border: 1px solid red; 55 position: relative; 56 margin-bottom: 5px; 57 } 58 .footer span{ 59 font-size: 26px; 60 position: absolute; 61 bottom: 15px; 62 right: 20px; 63 } 64 65 </style> 66 </head> 67 <body> 68 <div class="nav"> 69 <span>———中华瑰宝，绝美唐诗。</span> 70 </div> 71 <div class="wrap"> 72 <div class="top"><img class="img" src="images/01.jpg" alt=""></div> 73 <div class="tex1">向晚意不适，<br> 74 驱车登古原。<br> 75 夕阳无限好，<br> 76 只是近黄昏。</div> 77 </div> 78 <div class="wrap"> 79 <div class="top"><img class="img" src="images/05.jpg" alt=""></div> 80 <div class="tex1">天街小雨润如酥，<br> 81 草色遥看近却无。<br> 82 最是一年春好处，<br> 83 绝胜烟柳满皇都。</div> 84 </div> 85 <div class="wrap"> 86 <div class="top"><img class="img" src="images/06.jpg" alt=""></div> 87 <div class="tex1">泉眼无声惜细流，<br> 88 树荫照水爱晴柔。<br> 89 小荷才露尖尖角，<br> 90 早有蜻蜓立上头。</div> 91 </div> 92 <div class="wrap"> 93 <div class="top"><img class="img" src="images/04.jpg" alt=""></div> 94 <div class="tex1">横看成岭侧成峰，<br> 95 远近高低各不同。<br> 96 不识庐山真面目，<br> 97 只缘生在此山中。</div> 98 </div> 99 <div class="wrap"> 100 <div class="top"><img class="img" src="images/09.jpg" alt=""></div> 101 <div class="tex1">远上寒山石径斜，<br> 102 白云生处有人家。<br> 103 停车坐爱枫林晚，<br> 104 霜叶红于二月花。</div> 105 </div> 106 <div class="wrap"> 107 <div class="top"><img class="img" src="images/010.jpg" alt=""></div> 108 <div class="tex1">一帆一江一渔舟，<br> 109 一个渔翁一钓钩。<br> 110 一俯一仰一场笑，<br> 111 一江明月一江秋。</div> 112 </div> 113 <div class="wrap"> 114 <div class="top"><img class="img" src="images/012.jpg" alt=""></div> 115 <div class="tex1">独坐池塘如虎踞，<br> 116 绿荫树下养精神。<br> 117 春来我不先开口，<br> 118 哪个虫儿敢作声。</div> 119 </div> 120 <div class="wrap"> 121 <div class="top"><img class="img" src="images/015.jpg" alt=""></div> 122 <div class="tex1">咬定青山不放松，<br> 123 立根原在破岩中。<br> 124 千磨万击还坚劲，<br> 125 任尔东西南北风。</div> 126 </div> 127 <div class="wrap"> 128 <div class="top"><img class="img" src="images/016.jpg" alt=""></div> 129 <div class="tex1"> 闻道梅花圻晓风，<br> 130 雪堆遍满四山中。<br> 131 何方可化身千亿，<br> 132 一树梅花一放翁。</div> 133 </div> 134 <div class="wrap"> 135 <div class="top"><img class="img" src="images/018.jpg" alt=""></div> 136 <div class="tex1"> 碧玉妆成一树高，<br> 137 万条垂下绿丝绦。<br> 138 不知细叶谁裁出，<br> 139 二月春风似剪刀。</div> 140 </div> 141 <div class="wrap"> 142 <div class="top"><img class="img" src="images/021.jpg" alt=""></div> 143 <div class="tex1"> 毕竟西湖六月中，<br> 144 风光不与四时同。<br> 145 接天莲叶无穷碧，<br> 146 映日荷花别样红。</div> 147 </div> 148 <div class="footer"> 149 <span>———中华瑰宝，绝美唐诗。</span> 150 </div> 151 </body> 152 </html>