<!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. 【sping揭秘】4、某些无法注册到IOC容器的对象如何交给spring托管

    可以实现spring的factoryBean 接口,这样可以加入spring的IOC容器 比如现在有一个类叫MyObject,我们没有这个对象的源码,无法对这个对象进行操作,那么我们如何加入sprin ...

  2. POJ 2601

    #include<iostream> #include<iomanip> #include<stdio.h> using namespace std; int ma ...

  3. vue教程1-03 v-for循环

    vue教程1-03 v-for循环 v-for循环: v-for="name in arr" {{value}} {{$index}} v-for="name in js ...

  4. Numpy.random中shuffle与permutation的区别(转)

    huffle与permutation的区别 函数shuffle与permutation都是对原来的数组进行重新洗牌(即随机打乱原来的元素顺序):区别在于shuffle直接在原来的数组上进行操作,改变原 ...

  5. Future接口和Callable接口以及FeatureTask详解

    类继承关系 Callable接口 @FunctionalInterface public interface Callable<V> { V call() throws Exception ...

  6. 关于 OpenIdConnect 认证启用 HTTPS 回调 RedirectUri 不生效问题

    在搭建 IdentityServer 服务端后,我们尝试使用了 OIDC(OpenID Connect) 的中间件来代替了原先的 Session 系统认证方式,起初采用的是 HTTP 协议,一切都没有 ...

  7. scala-05-map映射

    Map Scala映射(Map)是一组键/值对的对象. 任何值都可以根据键来进行检索.键在映射中是唯一的,但值不一定是唯一的.映射也称为哈希表.映射有两种,不可变的和可变的.可变对象和不可变对象之间的 ...

  8. tsung压力测试——Tsung测试统计报告说明【转】

    1.主要统计信息 Tsung统计数据是平均每十秒重置一次,所以这里的响应时间(连接.请求.页面.会话)是指每十秒的平均响应时间: connect: 表示 每个连接持续时间: Hightest 10se ...

  9. 《Netty权威指南》（二）NIO 入门

    [TOC]   2.1 同步阻塞 I/O 采用 BIO 通信模型的服务器,通常由一个独立的 Acceptor 线程负责监听客户端的连接,它接收到客户端连接请求之后为每个客户端创建一个新的线程进行处理, ...

  10. redis学习（二） redis数据结构介绍以及常用命令

    redis数据结构介绍 我们已经知道redis是一个基于key-value数据存储的数据结构数据库,这里的key指的是string类型,而对应的value则可以是多样的数据结构.其中包括下面五种类型: ...