CS两种图片文字常用布局
2024-04-18 11:33:44
<style>/* 初始化样式 */
*{margin:0;padding:0;
}a{text-decoration:none;
}
li{list-style-type:none;
}
input,button{outline:none;
}
.l{float:left;
}
.r{float:right;
}.c:after{clear:both;width:0;padding:0;content:"";display: block;visibility: hidden;
}html,body{background:#ebf9f9;font-size: 12px;
}
/* 添加样式 */
#header .one{width:700px;height:200px;margin-top:20px;
}#header .two{width:700px;height:400px;margin-top:20px;
}.one{background:#fff;
}
.two{background:#0f0;
}
.three{background:#00f;
}
.one .item{width:300px;padding:10px;margin:0px 10px;border:1px solid #09f;
}
.one .item>.r{/*必须使用子代选择器，使用后代选择器会有问题*/width:180px;
}
.one .item>.r h4{font-size:15px;padding:5px 0px;}
.one .item>.r h4 a{color:#f00;
}
.one .item>.r p{line-height: 20px;
}.two>ul>li{width:300px;padding:10px;margin:0px 14px; border:1px solid #09f;}
.two>ul>li img{margin-right:20px;
}
.two>ul>li h4{font-size:15px;padding:5px 0px;}
.two>ul>li h4 a{color:#f00;
}.two>ul>li p{/*必须使用子代选择器，使用后代选择器会有问题*/line-height: 20px;height: 130px;
}
.two>ul>li>ul>li{width:50%;padding:10px 0px;border-bottom:1px solid orange;
}</style>
</head>
<body><div id="header"><div class="one"><div class="item l c"><div class="l"><a href=""><img width="100" height="150" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505811567722&di=3bc24854df872c12da92fc0c25f9da89&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2015%2F0313%2F0312qzmnjtxziphonebz1.jpg"></a></div><div class="r"><h4><a href="">景甜</a><span class="r">气质美女</span></h4><p>气质美女的形象是知性，落落大方，为人处事，待人接物，不慌不忙，心态不骄不躁，宠辱不惊。闲看庭前花开花落，去留无意，漫望天际云卷云舒，，得之坦然，失之淡然，争其必然，顺其自然。</p></div></div><div class="item l c"><div class="l"><a href=""><img width="100" height="150" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505811567722&di=3bc24854df872c12da92fc0c25f9da89&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2015%2F0313%2F0312qzmnjtxziphonebz1.jpg"></a></div><div class="r"><h4><a href="">景甜</a><span class="r">气质美女</span></h4><p>气质美女的形象是知性，落落大方，为人处事，待人接物，不慌不忙，心态不骄不躁，宠辱不惊。闲看庭前花开花落，去留无意，漫望天际云卷云舒，，得之坦然，失之淡然，争其必然，顺其自然。</p></div></div></div><div class="two"><ul><li class="l"><a href=""> /*浮动img标签，可以消除inline,inline-block下的空白间距*/<img class="l" width="100" height="150" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505811567722&di=3bc24854df872c12da92fc0c25f9da89&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2015%2F0313%2F0312qzmnjtxziphonebz1.jpg"></a><h4><a href="">景甜</a><span class="r">气质美女</span></h4><p>气质美女的形象是知性，落落大方，为人处事，待人接物，不慌不忙，心态不骄不躁，宠辱不惊。闲看庭前花开花落，去留无意，漫望天际云卷云舒，，得之坦然，失之淡然，争其必然，顺其自然。</p><ul><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li></ul></li><li class="l"><a href=""><img class="l" width="100" height="150" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505811567722&di=3bc24854df872c12da92fc0c25f9da89&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2015%2F0313%2F0312qzmnjtxziphonebz1.jpg"></a><h4><a href="">景甜</a><span class="r">气质美女</span></h4><p>气质美女的形象是知性，落落大方，为人处事，待人接物，不慌不忙，心态不骄不躁，宠辱不惊。闲看庭前花开花落，去留无意，漫望天际云卷云舒，，得之坦然，失之淡然，争其必然，顺其自然。</p><ul><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li><li class="l"><a href="">永恒圣帝</a>/千寻月</li></ul></li></ul></div></div></body>
</html>
转载于:https://www.cnblogs.com/xingkongly/p/7552040.html
CS两种图片文字常用布局相关推荐
- 模糊照片如何修复？分享两种图片变清晰的方法
在我们日常生活中,难免会遇到一些照片因为拍摄环境不好或是保存方式不当而变得模糊不清.这时候,我们就需要一些技巧来修复这些模糊照片,让它们变得更加清晰明亮.下面,我将分享两种图片变清晰的方法. 方法一: ...
- 如何将JPG转换为PNG？两种图片格式转换的方法交给你
在平时的工作生活当中,大家都会使用到各种各样的图片,其中jpg格式与png格式都是大家平时比较常用的图片格式,但是在使用图片时,可能会遇到只能上传其中某种格式的情况,那么这时候就需要将图片转换成相应的 ...
- 推荐给你3种图片文字提取技能，不用打字了
不知道大家有没有遇到过想复制一个网页上的文字内容,却做不到的情况.其实我们可以把要复制的内容拍照,然后提取图片文字.今天,边肖将与你分享五种提取图片文字的方法.我们来看看吧! 1.微信提取文字 [操作 ...
- .net pdf转图片_图片转PDF怎么转？推荐两种图片转PDF方法
在我们的工作和学习中,我们有时候需要将图片转换为PDF格式的文件.因为PDF格式的文件查看起来很不容易,所以它可以确保图片文件中的信息不被泄露.那么图片转PDF怎么转呢?大家可以参考下面这两种方法,一 ...
- iOS:图片上传时两种图片压缩方式的比较
上传图片不全面的想法:把图片保存到本地,然后把图片的路径上传到服务器,最后又由服务器把路径返回,这种方式不具有扩展性,如果用户换了手机,那么新手机的沙盒中就没有服务器返回的图片路径了,此时就无法获取之 ...
- 一文带你了解两种Transformer文字识别方法
摘要:受Transformer模型的启发,目前一些学者将该结构应用到文本行识别中,以替代RNN,取得了良好的效果,如在HGA-STR和 SRN. 当前的文本行识别器为拥有更强的序列语义能力,模型多采用 ...
- Axure8 教程：两种图片交互效果（悬浮放大和左右滑动切换）
这次为大家分享的是图片的悬浮放大及左右滑动切换两种交互效果 预览地址:https://89nm5z.axshare.com 下载地址:https://download.csdn.net/downloa ...
- 两种方式实现圣杯布局
圣杯布局又被称为双飞布局,比较简单,今天我给大家分享一下,如何用两种方式来实现双飞布局.那什么是双飞布局呢,其实就是两侧宽度固定,中间宽度自适应的三栏布局. 1.第一种相对来说比较容易想到,就是利用定 ...
- 图片如何无损放大？教你两种图片无损放大的方法
怎么将图片给无损放大呢?照片无损放大是指通过一些图像处理技术,使得照片在尽可能少的失真的情况下变大.相比于传统的放大方法,无损放大可以尽量保留图像细节和清晰度,避免出现模糊和失真的情况.我们有时使用的 ...
最新文章
- mongodb AND查询遇到多个index时候可能会做交集——和复合索引不同
- Caffe学习系列(22)：caffe图形化操作工具digits运行实例
- ZooKeeper安装,部署
- Sublime Text 2配置强大的IDE开发环境，运行java
- Linux OpenSSL获取证书指纹值（443、MD5、SHA1、SHA256）
- leetcode —— 面试题 04.03. 特定深度节点链表
- 图像检索：图像相似性度量
- java servlet ajax_javaweb中ajax请求后台servlet(实例)
- Python3 数据类型-Number
- 官网下载mysql源码
- 最新高级JAVA架构师之路(价值3万元+年薪百万计划)
- 安全知识竞赛答题小程序
- linux分辨率变低了,解决 ubuntu 装N卡驱动后开机分辨率变低 转
- 阿里电话面试(算法工程师)
- Joson的简单用法
- Centos7 搭建多用户SFTP服务，并开启日志记录
- 超分辨率重建——关于YIQ空间
- 网络编程学习_TCP协议
- 什么是在制品限制？通过这篇文章，让你搞明白
- SQL50题(MySQL)