<!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. Python中Flask框架SQLALCHEMY_ECHO设置

    在用配置类的方式给app设置配置时, SQLALCHEMY_ECHO 这个是记录打印SQL语句用于调试的, 一般设置为False, 不然会在控制台输出一大堆的东西 /home/python/.virt ...

  2. switch...case... 语句中的类型转换

    switch语句对case表达式的结果类型有如下要求: 要求case表达式的结果能转换为switch表示式结果的类型 并且如果switch或case表达式的是无类型的常量时,会被自动转换为此种常量的默 ...

  3. Git使用、Git配置、Git提交代码、Git上传

    非教程,只是自己的一个简单笔记.建议没有入门的朋友,直接看git的官方help文档: https://help.github.com/articles/set-up-git 1.注册一个git账号,超 ...

  4. (转)通过 Javacore 诊断线程挂起等性能问题

    原文:https://www.ibm.com/developerworks/cn/websphere/library/techarticles/1406_tuzy_javacore/1406_tuzy ...

  5. (转）Db2 数据库性能优化中，十个共性问题及难点的处理经验

    (转)https://mp.weixin.qq.com/s?__biz=MjM5NTk0MTM1Mw==&mid=2650629396&idx=1&sn=3ec17927b3d ...

  6. PHP使用APC获取上传文件进度

    今天发现使用PHP的APC也能获取上传文件的进度.这篇文章就说下如何做. 安装APC 首先安装APC的方法和其他PHP模块的方法没什么两样,网上能找出好多 phpinfo可以看到APC的默认配置有: ...

  7. salesforce 零基础学习（六十三）Comparable实现Object列表数据的自定义排序

    项目中通常有些需求为需要将某个sObject的数据列表按照某种规则排序显示到前台页面上,但是list上面的sort远远满足不了复杂的功能,此种情况需要自定义比较两个object大小的方法,所以需要创建 ...

  8. EventProcessor与WorkPool用法--可处理多消费者

    单一的生产者,消费者有多个,使用WorkerPool来管理多个消费者: RingBuffer在生产Sequencer中记录一个cursor,追踪生产者生产到的最新位置,通过WorkSequence和s ...

  9. Linux系列：Fedora虚拟机设置固定IP上网（配置IP、网关、DNS、防止resolv.conf被重写）

    首先声明:该方法在Fedora 17和18版本下有效,其它版本也许可行也许有所差异. 1.  虚拟机相关配置 如果不是虚拟机系统,则这步不需要,若是相关配置详细信息请看“Linux系列:Ubuntu虚 ...

  10. 前端自动构建工具Gulp入门

    基于nodeJs:通过不同插件能自动完成一系列动作,比如压缩js/css/img.解析模版标签.解析less等: 一.安装gulp 安装nodeJs 打开Node.js command prompt ...