<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .nav{
             width: 600px;
             height: 120px;
             background: url("images/07.jpg");
             border: 1px solid red;
             position: relative;
             margin: 5px auto;
         }
         .nav span{
             font-size: 26px;
             position: absolute;
             bottom: 15px;
             right: 20px;
         }
         .wrap{
             position: relative;
             margin: 0 auto;
             width: 600px;
             height: 600px;
             border: 1px solid red;
         }
          .top{
             width: 400px;
             height: 400px;
              margin: 0 auto;
         }
        .top  .img{
             width: 400px;
             height: 400px;
             position: absolute;
             top:2px;
             left:100px;
             border-radius: 50%;
         }
         .tex1{
             width: 600px;
             height: 190px;
             text-align: center;
             padding: 30px;
             box-sizing: border-box;
             font-size: 26px;
         }
         .footer{
             width: 600px;
             height: 120px;
             margin:0 auto;
             background: url("images/07.jpg");
             border: 1px solid red;
             position: relative;
             margin-bottom: 5px;
         }
         .footer span{
             font-size: 26px;
             position: absolute;
             bottom: 15px;
             right: 20px;
         }

     </style>
 </head>
 <body>
 <div class="nav">
         <span>———中华瑰宝，绝美唐诗。</span>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/01.jpg" alt=""></div>
     <div class="tex1">向晚意不适，<br>
                     驱车登古原。<br>
                     夕阳无限好，<br>
                     只是近黄昏。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/05.jpg" alt=""></div>
     <div class="tex1">天街小雨润如酥，<br>
                     草色遥看近却无。<br>
                     最是一年春好处，<br>
                     绝胜烟柳满皇都。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/06.jpg" alt=""></div>
     <div class="tex1">泉眼无声惜细流，<br>
                     树荫照水爱晴柔。<br>
                     小荷才露尖尖角，<br>
                     早有蜻蜓立上头。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/04.jpg" alt=""></div>
     <div class="tex1">横看成岭侧成峰，<br>
                     远近高低各不同。<br>
                     不识庐山真面目，<br>
                     只缘生在此山中。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/09.jpg" alt=""></div>
     <div class="tex1">远上寒山石径斜，<br>
                     白云生处有人家。<br>
                     停车坐爱枫林晚，<br>
                     霜叶红于二月花。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/010.jpg" alt=""></div>
     <div class="tex1">一帆一江一渔舟，<br>
                     一个渔翁一钓钩。<br>
                     一俯一仰一场笑，<br>
                     一江明月一江秋。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/012.jpg" alt=""></div>
     <div class="tex1">独坐池塘如虎踞，<br>
                     绿荫树下养精神。<br>
                     春来我不先开口，<br>
                     哪个虫儿敢作声。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/015.jpg" alt=""></div>
     <div class="tex1">咬定青山不放松，<br>
                     立根原在破岩中。<br>
                     千磨万击还坚劲，<br>
                     任尔东西南北风。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/016.jpg" alt=""></div>
     <div class="tex1"> 闻道梅花圻晓风，<br>
         雪堆遍满四山中。<br>
         何方可化身千亿，<br>
         一树梅花一放翁。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/018.jpg" alt=""></div>
     <div class="tex1"> 碧玉妆成一树高，<br>
         万条垂下绿丝绦。<br>
         不知细叶谁裁出，<br>
         二月春风似剪刀。</div>
 </div>
 <div class="wrap">
     <div class="top"><img class="img" src="data:images/021.jpg" alt=""></div>
     <div class="tex1"> 毕竟西湖六月中，<br>
         风光不与四时同。<br>
         接天莲叶无穷碧，<br>
         映日荷花别样红。</div>
 </div>
 <div class="footer">
     <span>———中华瑰宝，绝美唐诗。</span>
 </div>
 </body>
 </html>

图片圆角显示与手机版文章页面CSS布局的更多相关文章

  1. v9手机版文章内容不显示

    方法一: 打开PHPCMS v9的/phpcms/templates/default/wap/show.html页面, 将网页中的{$content}替换为:{$rs['content']} 这样wa ...

  2. CSS实现图片圆角显示

    问题描述 在自定义博客园侧边栏公告时,想增加博客头像,但图片默认显示成是方形的,不是很好看,想着改成圆角显示会漂亮些 解决方案 增加css样式 border-radius:25px; 上面的像素值根据 ...

  3. H5图片裁剪升级版（手机版）

    前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...

  4. Xamarin.Android ImageView 图片圆角显示

    第一步:在 values 文件夹下新增 Attrs.xml 文件 <?xml version="1.0" encoding="utf-8" ?> & ...

  5. css让图片居中显示在手机屏幕上

    直接上代码了 <div class="showpic"> <span></span> <img src="" alt= ...

  6. ecshop其他页面判断是智能手机访问也跳转到ECTouch对应手机版页面(转)

    ecshop 其他页面(商品详情页.商品分类页.团购页.优惠活动页.积分商城) 判断如果是智能手机访问跳转到ECTouch1.0手机版对应页面 方法 首先在ecshop 根目录下 includes/l ...

  7. Nginx学习总结（2）——Nginx手机版和PC电脑版网站配置

    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...

  8. 使用MailKit发送带有内嵌图片的邮件且图片不显示成附件

    使用MailKit发送带有内嵌图片的邮件且图片不显示成附件 参考文章:MailKit---发送邮件 注意 在邮件客户端中是否显示内嵌图片为附件依据不同邮件有所不同,暂经测试Outlook和qq不显示为 ...

  9. uc浏览器手机版,页面图片不显示

    uc浏览器手机版,有时候上面的轮播广告看不到 原因:uc浏览器会拦截所有带ad的标签 例如: <div id="adDiv"> <img src="/r ...

随机推荐

  1. postgresql-int,bigint,numeric效率测试

    在postgresql9.5的时候做过一个测试就是sum()的效率最终的测试结果是sum(int)>sum(numeric)>sum(bigint)当时比较诧异为啥sum(bigint)效 ...

  2. POJ 2685

    #include <iostream> #include <string> #define MAXN 26 using namespace std; int _map[MAXN ...

  3. 【原创】Dependency Walker

    https://zh.wikipedia.org/wiki/Dependency_Walker For situations where the system says it can’t find s ...

  4. 课程一(Neural Networks and Deep Learning)，第四周（Deep Neural Networks）—— 0.学习目标

    Understand the key computations underlying deep learning, use them to build and train deep neural ne ...

  5. 继承extends、super、this、方法重写overiding、final、代码块_DAY08

    1:Math类的随机数(掌握) 类名调用静态方法.  包:java.lang 类:Math 方法:public static double random(): Java.lang包下的类是不用导包就可 ...

  6. storm_分组策略

      注意1:原始的案例 spout 和bolt都是1个并发  所以文件中30条日志 从spout发出以后 bolt接受到30条

  7. storm_常用命令

    1)nimbus:启动nimbus守护进程        storm nimbus 2)supervisor:启动supervisor守护进程        storm supervisor 3)ui ...

  8. 用分布式缓存提升ASP.NET Core性能

    得益于纯净.轻量化并且跨平台支持的特性,ASP.NET Core作为热门Web应用开发框架,其高性能传输和负载均衡的支持已广受青睐.实际上,10-20台Web服务器还是轻松驾驭的.有了多服务器负载的支 ...

  9. JVM 运行时数据区详解

    一.运行时数据区 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同数据区域. 1.有一些是随虚拟机的启动而创建,随虚拟机的退出而销毁,所有的线程共享这些数据区. 2.第二种则 ...

  10. JavaScript -- TextArea

    -----054-TextArea.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...