接下来,我们要适配图片,创建CSS文件。创建文件->iOS->Other->Empty,命名为newsDetail.css,如图,
在css文件中为图片加上约束,如下图,
img{
width:100%;
}
接下来,加载css的URL路径,
// 加载css的URL的路径
let css = NSBundle.mainBundle().URLForResource("newsDetail", withExtension: "css");
// 创建html标签
let cssHtml = "<link href=\"\(css!)\" rel=\"stylesheet\">"
// 拼接HTML
let html = "<html><head>\(cssHtml)</head><body>\(titleHtml)\(subTitleHtml)\(bodyHtml)</body></html>"
模拟器运行,图片显示正常,
下面,我们开始修饰标题,子标题样式,
-
图片添加修饰
// 7.4取出src let src = imgItem["src"] as! String; let imgHtml = "<div class=\"all-img\"><img src=\"\(src)\"><div>\(imgTitle)</div></div>"
-
标题,子标题添加修饰
// 创建标题HTML标签 let titleHtml = "<div id=\"mainTitle\">\(title)</div>"; // 创建子标题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;
}
模拟器运行效果,标题,子标题,图片改变。