1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          .nav{
  8.              width: 600px;
  9.              height: 120px;
  10.              background: url("images/07.jpg");
  11.              border: 1px solid red;
  12.              position: relative;
  13.              margin: 5px auto;
  14.          }
  15.          .nav span{
  16.              font-size: 26px;
  17.              position: absolute;
  18.              bottom: 15px;
  19.              right: 20px;
  20.          }
  21.          .wrap{
  22.              position: relative;
  23.              margin: 0 auto;
  24.              width: 600px;
  25.              height: 600px;
  26.              border: 1px solid red;
  27.          }
  28.           .top{
  29.              width: 400px;
  30.              height: 400px;
  31.               margin: 0 auto;
  32.          }
  33.         .top  .img{
  34.              width: 400px;
  35.              height: 400px;
  36.              position: absolute;
  37.              top:2px;
  38.              left:100px;
  39.              border-radius: 50%;
  40.          }
  41.          .tex1{
  42.              width: 600px;
  43.              height: 190px;
  44.              text-align: center;
  45.              padding: 30px;
  46.              box-sizing: border-box;
  47.              font-size: 26px;
  48.          }
  49.          .footer{
  50.              width: 600px;
  51.              height: 120px;
  52.              margin:0 auto;
  53.              background: url("images/07.jpg");
  54.              border: 1px solid red;
  55.              position: relative;
  56.              margin-bottom: 5px;
  57.          }
  58.          .footer span{
  59.              font-size: 26px;
  60.              position: absolute;
  61.              bottom: 15px;
  62.              right: 20px;
  63.          }
  64.  
  65.      </style>
  66.  </head>
  67.  <body>
  68.  <div class="nav">
  69.          <span>———中华瑰宝，绝美唐诗。</span>
  70.  </div>
  71.  <div class="wrap">
  72.      <div class="top"><img class="img" src="data:images/01.jpg" alt=""></div>
  73.      <div class="tex1">向晚意不适，<br>
  74.                      驱车登古原。<br>
  75.                      夕阳无限好，<br>
  76.                      只是近黄昏。</div>
  77.  </div>
  78.  <div class="wrap">
  79.      <div class="top"><img class="img" src="data:images/05.jpg" alt=""></div>
  80.      <div class="tex1">天街小雨润如酥，<br>
  81.                      草色遥看近却无。<br>
  82.                      最是一年春好处，<br>
  83.                      绝胜烟柳满皇都。</div>
  84.  </div>
  85.  <div class="wrap">
  86.      <div class="top"><img class="img" src="data:images/06.jpg" alt=""></div>
  87.      <div class="tex1">泉眼无声惜细流，<br>
  88.                      树荫照水爱晴柔。<br>
  89.                      小荷才露尖尖角，<br>
  90.                      早有蜻蜓立上头。</div>
  91.  </div>
  92.  <div class="wrap">
  93.      <div class="top"><img class="img" src="data:images/04.jpg" alt=""></div>
  94.      <div class="tex1">横看成岭侧成峰，<br>
  95.                      远近高低各不同。<br>
  96.                      不识庐山真面目，<br>
  97.                      只缘生在此山中。</div>
  98.  </div>
  99.  <div class="wrap">
  100.      <div class="top"><img class="img" src="data:images/09.jpg" alt=""></div>
  101.      <div class="tex1">远上寒山石径斜，<br>
  102.                      白云生处有人家。<br>
  103.                      停车坐爱枫林晚，<br>
  104.                      霜叶红于二月花。</div>
  105.  </div>
  106.  <div class="wrap">
  107.      <div class="top"><img class="img" src="data:images/010.jpg" alt=""></div>
  108.      <div class="tex1">一帆一江一渔舟，<br>
  109.                      一个渔翁一钓钩。<br>
  110.                      一俯一仰一场笑，<br>
  111.                      一江明月一江秋。</div>
  112.  </div>
  113.  <div class="wrap">
  114.      <div class="top"><img class="img" src="data:images/012.jpg" alt=""></div>
  115.      <div class="tex1">独坐池塘如虎踞，<br>
  116.                      绿荫树下养精神。<br>
  117.                      春来我不先开口，<br>
  118.                      哪个虫儿敢作声。</div>
  119.  </div>
  120.  <div class="wrap">
  121.      <div class="top"><img class="img" src="data:images/015.jpg" alt=""></div>
  122.      <div class="tex1">咬定青山不放松，<br>
  123.                      立根原在破岩中。<br>
  124.                      千磨万击还坚劲，<br>
  125.                      任尔东西南北风。</div>
  126.  </div>
  127.  <div class="wrap">
  128.      <div class="top"><img class="img" src="data:images/016.jpg" alt=""></div>
  129.      <div class="tex1"> 闻道梅花圻晓风，<br>
  130.          雪堆遍满四山中。<br>
  131.          何方可化身千亿，<br>
  132.          一树梅花一放翁。</div>
  133.  </div>
  134.  <div class="wrap">
  135.      <div class="top"><img class="img" src="data:images/018.jpg" alt=""></div>
  136.      <div class="tex1"> 碧玉妆成一树高，<br>
  137.          万条垂下绿丝绦。<br>
  138.          不知细叶谁裁出，<br>
  139.          二月春风似剪刀。</div>
  140.  </div>
  141.  <div class="wrap">
  142.      <div class="top"><img class="img" src="data:images/021.jpg" alt=""></div>
  143.      <div class="tex1"> 毕竟西湖六月中，<br>
  144.          风光不与四时同。<br>
  145.          接天莲叶无穷碧，<br>
  146.          映日荷花别样红。</div>
  147.  </div>
  148.  <div class="footer">
  149.      <span>———中华瑰宝，绝美唐诗。</span>
  150.  </div>
  151.  </body>
  152.  </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. vue.js生命周期钩子函数及缓存

    在使用vue.js进行开发时,使用最多的就是created.mounted.activated. 由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive. 当引入keep-alive时 ...

  2. 人工智能-机器学习之numpy方法

    机器学习 最重要的东西就是算法   这里面的水很深  所以呢我就简单的整理了一下 基础的操作     #导入numpy库 as别名 为了怕重名 import numpy as np # 打印版本号 p ...

  3. Django中安装搜索引擎方法。

    全文检索 全文检索不同于特定字段的模糊查询,使用全文检索的效率更高,并且能够对于中文进行分词处理. haystack:全文检索的框架,支持whoosh.solr.Xapian.Elasticsearc ...

  4. 配置django图片上传与保存展示

    近来在研究django,发现有好多好玩的功能,比如图片上传,以前处理这个比较麻烦,现在我们来看看如何来处理图片上传与保存 1.在数据库设计的时候需要配置upload_to image = models ...

  5. JS 跨域认识及如何解决

    什么是跨域 指的是浏览器不允许javascrip脚本向其他域名发起ajax请求. 跨域的各种情况判定 URL 说明 是否允许通信 http://www.a.com/a.js http://www.a. ...

  6. 【xsy2194】Philosopher set+线段树合并

    题目大意:给你一个长度为$n$的序列,有$m$次操作,每次操作是以下两种之一: 对某个区间内的数按照升序/降序排序,询问某个区间内数的积在十进制下首位数字是多少. 数据范围:$n,m≤2\times ...

  7. 【sping揭秘】3、Spring容器中bean默认是保持一个实例

    Spring容器中bean默认是保持一个实例 这里做一个测试,基础代码 package cn.cutter.start.provider; import org.springframework.con ...

  8. ES代码总结2

    本文部分转载于: http://www.cnblogs.com/luxiaoxun/p/4869509.html ElasticSearch的基本用法与集群搭建  一.简介 ElasticSearch ...

  9. 【从0到1学Web前端】CSS定位问题二（float和display的使用） 分类： HTML+CSS 2015-05-28 22:03 812人阅读 评论(1) 收藏

    display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...

  10. OSGI动态加载删除Service bundle

    OSGi模块化框架是很早就出来的一个插件化框架,最早Eclipse用它而出名,但这些年也没有大热虽然OSGi已经发布了版本1到版本5.现在用的最多的,也是本文讲述基于的是Equinox的OSGi实现, ...