<!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. 怎么把excel表格内的数据导入数据库？

    第一种方法: 思路:想要把excel表格内的数据直接导入数据库不是那么容易,可以把excel表格另存为.csv格式的文档(特点:内容以逗号分割):然后通过一系列的文档操作函数处理成为一个二维数组,然后 ...

  2. 剑指offer十三之调整数组顺序使奇数位于偶数前面

    一.题目 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 二.思路 此题可 ...

  3. Touch事件传递机制 Android

    Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在 ...

  4. Objective-C 字符串与数值互相转换

    Convert NSString to int NSString *aNumberString = @"123"; int i = [aNumberString intValue] ...

  5. SHELL脚本编程的常识和VI常用技巧

    来源:http://mprc.pku.edu.cn/mentors/training/TrainingCourses/material/ShellProgramming.HTM#_Toc3751808 ...

  6. 前端组件化Polymer入门教程(7)——Local DOM

    DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...

  7. java web 中 filter 与 servlet的关系

    过滤器的转载顺序是服务器按照we.xml文件中定义的顺序从后往先的顺序转载的,而过滤的顺序就是按照先后顺序过滤的,而销毁也是从后往先销毁的.

  8. TCP保活的必要性

    TCP的长连接理论上只要连接建立后,就会一直保持着.但有时有一些防火墙之类的软件会自动检查主机的网络连接状况,比如说如果发现某个连接在几分钟之内都没有数据通讯,则会关闭这个连接.有时客户端与服务器需要 ...

  9. dig命令详解

    dig命令是常用的域名查询工具,可以用来测试域名系统工作是否正常 语法 dig(选项)(参数) 选项 @<服务器地址>:指定进行域名解析的域名服务器: -b<ip地址>:当主机 ...

  10. (Dijkstra)迪杰斯特拉算法-最短路径算法

    迪杰斯特拉算法是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中最短路径问题.迪杰斯特拉算法主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止. 算法思想:设G=(V,E)是一个带权有向图 ...