代码如下,好好研究:
<style type="text/css">
.item .pic { float:leftmargin-right:10pxwidth:100pxheight:100px}
.item .content {float:leftwidth:500px}
</style>
<div class="item">
<div class="pic"><img src="a.jpg"></div>
<div class="content">文字部分</div>
</div>由于这个功能都要使用到浮动float,就需要对左右两边的模块都要定义款度,不然的话,默认的都是100%,是填充整个外部容器,是无论如何都不能左右显示了。
最常用的一种方法:就是浮动,浮动之后会自动往右挤,挤不下就到第二行了。
<ul><li>第一张图片</li>
<li>第二张图片</li>
<li>第三张图片</li>
<li>第四张图片</li>
<li>第五张图片</li>
<li>第六张图片</li>
<li>第七张图片</li>
<li>第八张图片</li>
</ul>
<style> ul{width:800px height:200px} li{width:195pxheight:98pxmargin:1px auto float:leftlist-style-type:none}
</style>
1.page.html文件里写ionic提供的控件,比如:ion-header,ion-content, ion-title,ion-toobar,经管如此,有时候满足不了项目的界面,我们需要结合HTML的基本命令来完成设计,比如:div,p, img,a,等。2.scss使用经验:每个页面都有自己的scss文件,我在使用时,发现几个页面的css定义会影响,就是页面2可以用页面1的css定义造成干扰的现象,后来发现,每个scss文件里有个页面定义,我们只要把当前页面的css定义放在这个页面定义就行,实现了css分离。()本人刚学习网页编程,一切都在探索中)。示例如下:
age-page3 {
.page {
display: flex
align-items: center
text-align: center
margin: 0 auto
height: 100%
ackground-color: #abaaaa
adding-top: 5px
adding-bottom: 5px
// margin-top: 2px
这个page属性就放在了page-page3的大括号里面,保证了这个css定义只影响当前页面。