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)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進階之旅閱讀 16,852評論 32 459
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,088評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,502評論 19 139
  • 你后悔出國嗎?不后悔! 松松 閑聊中,朋友問我:〃后悔出國嗎"?我笑笑搖搖頭。朋友臉上馬上布滿問號。 是呵,當年有...
    3109fa8e2f8a閱讀 321評論 3 2
  • 由于工作時間的原因,現(xiàn)在就早上寫東西,晚上可能都會加班比較晚了。 昨天開始在幣看入職,下班時間卻是22點30分。今...
    聞舒閱讀 91評論 0 0

友情鏈接更多精彩內(nèi)容