iOS-HTML交互學習筆記(四)-添加全局的CSS樣式

接下來恋追,我們要適配圖片,創(chuàng)建CSS文件罚屋。創(chuàng)建文件->iOS->Other->Empty苦囱,命名為newsDetail.css,如圖,

創(chuàng)建newsDetail.css文件.png

在css文件中為圖片加上約束脾猛,如下圖撕彤,

img{
    width:100%;
}
在css文件中為圖片加上約束.png

接下來,加載css的URL路徑猛拴,

// 加載css的URL的路徑
let css = NSBundle.mainBundle().URLForResource("newsDetail", withExtension: "css");
// 創(chuàng)建html標簽
let cssHtml = "<link href=\"\(css!)\" rel=\"stylesheet\">"

    
// 拼接HTML
let html = "<html><head>\(cssHtml)</head><body>\(titleHtml)\(subTitleHtml)\(bodyHtml)</body></html>"

模擬器運行羹铅,圖片顯示正常蚀狰,

圖片顯示正常.png

下面,我們開始修飾標題职员,子標題樣式麻蹋,

  • 圖片添加修飾

    // 7.4取出src
    let src = imgItem["src"] as! String;
    let imgHtml = "<div class=\"all-img\"><img src=\"\(src)\"><div>\(imgTitle)</div></div>"
    
  • 標題,子標題添加修飾

    // 創(chuàng)建標題HTML標簽
    let titleHtml = "<div id=\"mainTitle\">\(title)</div>";
      
    // 創(chuàng)建子標題html標簽
    let subTitleHtml = "<div id=\"subTitle\"><span class=\"time\">\(ptime)</span><span>\(source)</span></div>"
    

修改newsDetail.css文件對標題廉邑,子標題哥蔚,圖片的樣式改變

#mainTitle{
    text-align:center;
    font-size:20px;
    margin-top:25px;
    margin-bottom:8px;
}

#subTitle{
    color:gray;
    text-align:center;
}

.time{
    margin-right:10px;
    margin-bottom:8px;
}

.all-img{
    text-align:center;
    color:gray;
    margin:8px 0;
}

模擬器運行效果,標題蛛蒙,子標題糙箍,圖片改變。

標題牵祟,子標題深夯,圖片改變.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末贡这,一起剝皮案震驚了整個濱河市钙勃,隨后出現(xiàn)的幾起案子须眷,更是在濱河造成了極大的恐慌荡陷,老刑警劉巖悴势,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件定硝,死亡現(xiàn)場離奇詭異毫捣,居然都是意外死亡名党,警方通過查閱死者的電腦和手機坪哄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門质蕉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人翩肌,你說我怎么就攤上這事模暗。” “怎么了念祭?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵兑宇,是天一觀的道長。 經(jīng)常有香客問我粱坤,道長隶糕,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任站玄,我火速辦了婚禮枚驻,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蜒什。我一直安慰自己测秸,他們只是感情好,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著霎冯,像睡著了一般铃拇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上沈撞,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天慷荔,我揣著相機與錄音,去河邊找鬼缠俺。 笑死显晶,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的壹士。 我是一名探鬼主播磷雇,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼躏救!你這毒婦竟也來了唯笙?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤盒使,失蹤者是張志新(化名)和其女友劉穎崩掘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體少办,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡苞慢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了英妓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挽放。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鞋拟,靈堂內(nèi)的尸體忽然破棺而出骂维,到底是詐尸還是另有隱情惹资,我是刑警寧澤贺纲,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站褪测,受9級特大地震影響猴誊,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜侮措,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一懈叹、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧分扎,春花似錦澄成、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽卫漫。三九已至,卻和暖如春肾砂,著一層夾襖步出監(jiān)牢的瞬間列赎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工镐确, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留包吝,地道東北人。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓源葫,卻偏偏與公主長得像诗越,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子息堂,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,518評論 32 459
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案掺喻? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,728評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)储矩,斷路器感耙,智...
    卡卡羅2017閱讀 134,599評論 18 139
  • 你后悔出國嗎?不后悔持隧! 松松 閑聊中即硼,朋友問我:〃后悔出國嗎"?我笑笑搖搖頭屡拨。朋友臉上馬上布滿問號只酥。 是呵,當年有...
    3109fa8e2f8a閱讀 286評論 3 2
  • 由于工作時間的原因呀狼,現(xiàn)在就早上寫東西裂允,晚上可能都會加班比較晚了。 昨天開始在幣看入職哥艇,下班時間卻是22點30分绝编。今...
    聞舒閱讀 83評論 0 0