图片圆角显示与手机版文章页面CSS布局

最新推荐文章于 2022-06-14 10:36:05 发布

转载最新推荐文章于 2022-06-14 10:36:05 发布 · 176 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=ib211c21j&title=%E5%9B%BE%E7%89%87%E5%9C%86%E8%A7%92%E6%98%BE%E7%A4%BA%E4%B8%8E%E6%89%8B%E6%9C%BA%E7%89%88%E6%96%87%E7%AB%A0%E9%A1%B5%E9%9D%A2CSS%E5%B8%83%E5%B1%80

文章标签：

#html css

前端专栏收录该内容

493 篇文章

订阅专栏

本文通过精美的网页布局展示了多首脍炙人口的唐诗，每首诗配以相应的图片，展现了中国古典文化的魅力。从李商隐的《登乐游原》到韩愈的《早春呈水部张十八员外》，再到杨万里的《小池》，每一首诗都是中华瑰宝，体现了唐诗的意境之美。

  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>