<!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. Windows平台下搭建自己的Git服务器

    该文章转自:http://www.codeceo.com/article/windows-git-server.html Gitblit 是一个纯 Java 库用来管理.查看和处理 Git 资料库,相 ...

  2. [原创]K8飞刀20150725 支持SOCKS5代理(内网渗透)

    工具: K8飞刀编译: 自己查壳组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8.blog.163.com发布: 2015/7/26 3:41:11 简介: ...

  3. docker学习实践之路[第二站]nginx镜像实践

    上一篇文章中已经成功的拉取的nginx的镜像 在本篇文章中则详细介绍docker利用文件卷.断后映射然后进行nginx的配置. 输入一下命令: docker run -d --name mynginx ...

  4. scala中的一些特殊符号的意义

    1.作为“通配符”,类似Java中的*.如import scala.math._ 2.:_*作为一个整体,告诉编译器你希望将某个参数当作参数序列处理!例如val s = sum(1 to 5:_*)就 ...

  5. 10分钟打造强大的gvim

    感谢Ruchee的共享精神,让我等vim新手省去了配置vim的麻烦(教程地址:配置文件使用指南). 只需要简单的6个步骤,就可以配置完成一个强大的gvim神器,下图是我的最终配置效果图. (另外,我的 ...

  6. Git for Windows之团队合作

    1.先给项目添加一个成员 输入对方码云邮箱账号,添加成功. 2.登陆,将码云上面的项目克隆到本地 (1).设置全局参数  用户名和邮箱用于push和pull代码 (2).克隆目标项目地址 查看本地文件 ...

  7. 在MongoDB中实现聚合函数

    在MongoDB中实现聚合函数 随着组织产生的数据爆炸性增长,从GB到TB,从TB到PB,传统的数据库已经无法通过垂直扩展来管理如此之大数据.传统方法存储和处理数据的成本将会随着数据量增长而显著增加. ...

  8. 处理 Maven 项目名称红色感叹号的问题

    问题描述: maven 本地仓库位置移动 ,重启IDE,项目出现感叹号. 解决方案: 附加: 其它原因,造成项目感叹号,且pom.xml和Build Path下又没有相应的错误的提示的情况下. 那么选 ...

  9. jenkins持续集成的步骤

    项目的持续集成分享 源代码管理 项目仓库 配置仓库 发布仓库 ci/cd相关 gitlab,管理版本,测试流水线 jenkins,对项目进行持续集成 各模块的关系 graph TD a(jenkins ...

  10. Linux信号和trap命令的使用

    目录 信号介绍 信号列表 控制信号 Ctrl+c显示指定内容 使Ctrl+c无任何操作 处理多个信号 处理所有信号 恢复信号 实现跳板机(实例) 信号介绍 运行Shell脚本时,如果按下快捷键Ctrl ...