WebApp那些事——(JqueryMobile) 實戰(一)

時間 2019-11-20

原文原文鏈接

其實WebApp這個版塊已經放置一段時間了，可是一直沒有寫文章，那是由於我還在學習中。今天的話，咱們就來寫一篇關於佈局的，之前在沒有BootStrap，jQuery EasyUI，Jquery Mobile以前不管是作web項目仍是web 移動站點都是那麼費勁，尤爲是我這種學不會css的人，實在是搞不了前臺。OK，廢話很少說，咱們來看一下今天要仿製的頁面，手機頭條網。css

看到了吧，這個界面若是用BootStrap的話可能更簡單一些，由於它是單純的三列或者兩列布局，利用Bootstrap的網格系統能夠很好的佈局出來。那今天的話仍是用Jquery Mobile css。mysql

首先看一下最頂端的頭部，個人代碼以下jquery

1css3

2web

3sql

4數據庫

5微信

6佈局

7學習

@section Header

{

<div data-role="header" data-theme="f" data-tap-toggle="false" data-position="fixed" data-fullscreen="false">

<div class="ui-grid-b">

<div class="ui-block-a"><img class="img-corner" style="padding:3px" width="40" height="40" src="~/Image/IMG_20140531_170818.jpg" /></div>

<h3 class="ui-block-b" style="text-align:center;">今日頭條<img height="25" width="25" src="~/Image/ic_popup_sync_6.png" /></h3>

<div class="ui-block-c" style="padding:5px;text-align:right"><img src="../Image/ic_menu_search.png" width="30" height="30" /></div>

</div>

<div data-role="navbar" style="background-color:red;border-bottom-style:solid; border-bottom-width:2px;border-bottom-color:lightyellow">

<ul>

<li><a class="a-header" href="#">推薦</a></li>

<li><a class="a-header" href="#">熱點</a></li>

<li><a class="a-header" href="#">社會</a></li>

<li><a class="a-header" href="#">娛樂</a></li>

<li><a class="a-header" href="#">科技</a></li>

</ul>

</div>

}

其實這裏咱們使用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是 <div class="ui-grid-b">這個css就把屏幕分紅了相等的三份。

而後咱們在每一份放咱們的元素。

效果如上，那麼這個圓圈圖片是怎麼實現的呢，很簡單，CSS3很好實現，將下面的css應用到圖片便可。

.img-corner {

border-radius: 50%;

}

OK，頭部還有一個Nav bar，這個其實將div的data-role設置爲navbar，而後在div中嵌套<ul><li>。

頭部的這個導航條若是被點擊的話，它的顏色會變，這個功能是Jquery Mobile實現的，咱們不須要作什麼。

頭部說完了咱們看內容頁，爲了簡單，有一些css我直接寫在元素上。

<div style="font-family:微軟雅黑">

<p><b>什麼人會買二手車？這四類人才是最精明的消費者</b></p>

<div class="ui-grid-b">

<div class="ui-block-a">

<img class="img-shrink" src="~/Image/News/1.jpg" />

</div>

<div class="ui-block-b" style="padding-left:5px;padding-right:5px;">

<img class="img-shrink" src="~/Image/News/2.jpg" />

</div>

<div class="ui-block-c">

<img class="img-shrink" src="~/Image/News/3.jpg" />

</div>

<div class="news-footer">

<label>第一車網</label>

<img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />

<label>200</label>

<div style="float:right">

<label>剛剛</label>

<img src="~/Image/News/add.jpg" width="12" height="12" />

</div>

<hr />

<div class="ui-grid-a" style="height:150px">

<div class="ui-block-a">

<div style="height:135px"><b>《羋月轉》孫儷近照曝光網友:太美了！</b></div>

<div class="news-footer" style="float:left;width:100%">

<label>海外網</label>

<img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />

125

<div style="float:right;margin-right:10px">

<img src="~/Image/News/add.jpg" width="12" height="12" />

</div>

<div class="ui-block-b" style=" border: 1px solid white;">

<img src="~/Image/News/tvphoto.jpg" style="width: 100%; height: 150px;" />

</div>

<hr />

<div class="ui-grid-a" style="height:100px">

<div class="ui-block-a">

<div style="height:85px"><b>初二女生收到情書，超牛老媽只說了五句話！</b></div>

<div class="news-footer" style="float:left;width:100%">

<label>達達兔</label>

<img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />

751

<div style="float:right;margin-right:10px">

<img src="~/Image/News/add.jpg" width="12" height="12" />

</div>

<div class="ui-block-b" style=" border: 1px solid white;">

<img src="~/Image/News/qingshu.jpg" style="width: 100%;" />

</div>

<hr />

<div class="ui-grid-a" style="height:100px">

<div class="ui-block-a">

<div style="height:85px"><b>那些發生在汽車歷史上的第一次！</b></div>

<div class="news-footer" style="float:left;width:100%">

<label style="background-color:red;color:white;border-radius:20%">推廣</label>

<label style="margin-left:10px">上海通用</label>

<img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />

751

<div style="float:right;margin-right:10px">

<img src="~/Image/News/add.jpg" width="12" height="12" />

</div>

<div class="ui-block-b" style=" border: 1px solid white;">

<img src="~/Image/News/car.jpg" style="width: 100%; height: 100px;" />

</div>

<hr />

</div>

其實咱們觀察一下，就會發現，第一行是標題，第二行是三個圖片，第三行是一些其餘的信息。

那麼第一部分咱們佈局就能夠採用<p><div><div>完成這三部分。第一行沒什麼說的，第二行咱們使用網格系統，將屏幕分紅三列，每列一張圖，最後一行須要注意這個"剛剛+"是在右邊，須要使用float="right"，看一下效果

怎麼樣，還行吧。OK，咱們接着看下面的佈局，下面的佈局我在使用Jquery mobile的網格系統的時候沒有查到像BootStrap那樣的跨列功能。因此我暫時先用50%/50%的網格。

第一個網格咱們放置文字，第二個網格咱們放置圖片。

須要注意的是上面的兩個height，咱們設置總高度爲150，設置文字的高度爲135，那麼小文字的高度爲15，此時咱們設置小文字所在的層的float:left，由於高度不夠，它就會自動沉底。

如上圖，小字都沉底了。OK，其實真個頭條網都採用這樣的佈局方式，其實咱們只須要在數據庫表建立好類型(是一行文字+一行3圖片+小字或者是左邊文字(打字加小字)+右邊圖片)，標題，小字內容，圖片咱們就能夠動態生成或者加載頁面，這個是我下節要實現的內容。

最後咱們還給這個頁面加了foot。

@section Footer

{

<div data-role="footer" data-theme="c" data-position="fixed" data-fullscreen="true">

<h3><label style="color:red">頭條網，一個神奇的網站！</label></h3>

</div>

}

頭條網，一個神奇的網站。這個腳咱們設置點擊屏幕時該腳會收縮。好了，咱們看一下所有頁面的效果

收縮掉腳，咱們再看看

OK，頁面今天就到這裏，最後告訴你們怎麼建立移動項目的

點擊肯定

選擇移動應用程序，肯定，項目就建立好了。

免費學習更多精品課程，登陸樂搏學院官網http://www.learnbo.com/

或關注咱們的官方微博微信，還有更多驚喜哦~

本文出自「技術創造價值」博客，請務必保留此出處http://leelei.blog.51cto.com/856755/1591204

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。