扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
其实WebApp这个版块已经放置一段时间了，但是一直没有写文章，那是因为我还在学习中。今天的话，我们就来写一篇关于布局的，以前在没有BootStrap，Jquery EasyUI，Jquery Mobile之前不论是做web项目还是web 移动站点都是那么费劲，尤其是我这种学不会css的人，实在是搞不了前台。OK，废话不多说，我们来看一下今天要仿制的页面，手机头条网。
创新互联服务项目包括靖江网站建设、靖江网站制作、靖江网页制作以及靖江网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，靖江网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到靖江省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
看到了吧，这个界面如果用BootStrap的话可能更简单一些，因为它是单纯的三列或者两列布局，利用Bootstrap的网格系统可以很好的布局出来。那今天的话还是用Jquery Mobile css。
首先看一下最顶端的头部，我的代码如下
@section Header
{
其实这里我们使用Jquery Mobile css中的一些样式及属性。我们看一下data-role="header"
在这里我们设置头部不会在点击屏幕的时候缩回去data-tap-toggle="false"，这样当页面内容随着滚动条上移时，会被头部盖住。data-theme="f"这个是我自己定义的主题，主题可以是a-z。而Jquery Mobile css默认只提供了五种主题。
所以f需要自己定义，我们来看一下
.ui-bar-f {
background-color: red;
color: white;
font-weight: bold;
height:45px;
font-family:微软雅黑;
}
.img-corner {
border-radius: 50%;
}
.a-header {
text-decoration:none;
color:white;
}
body {
font-family:微软雅黑;
background-color:white;
}
.img-shrink {
height:150px;
width:100%;
border:1px solid white;
}
.news-footer {
font-size:10px;
}第一个css就是我们自己定义的主题，必须是以ui-bar-[a-z]来命名。头部的话在这里共分了三列，因为我们的第一个div是
然后我们在每一份放我们的元素。
效果如上，那么这个圆圈图片是怎么实现的呢，很简单，css3很好实现，将下面的css应用到图片即可。
.img-corner {
border-radius: 50%;
}OK，头部还有一个Nav bar，这个其实将div的data-role设置为navbar，然后在div中嵌套
头部的这个导航条如果被点击的话，它的颜色会变，这个功能是Jquery Mobile实现的，我们不需要做什么。
头部说完了我们看内容页，为了简单，有一些css我直接写在元素上。