iOS-HTML交互学习笔记（四）-添加全局的CSS样式

接下来，我们要适配图片，创建CSS文件。创建文件->iOS->Other->Empty，命名为newsDetail.css，如图,

创建newsDetail.css文件.png

在css文件中为图片加上约束，如下图，

img{
    width:100%;
}

在css文件中为图片加上约束.png

接下来，加载css的URL路径，

// 加载css的URL的路径
let css = NSBundle.mainBundle().URLForResource("newsDetail", withExtension: "css");
// 创建html标签
let cssHtml = ""

    
// 拼接HTML
let html = "\(cssHtml)\(titleHtml)\(subTitleHtml)\(bodyHtml)"

模拟器运行，图片显示正常，

图片显示正常.png

下面，我们开始修饰标题，子标题样式，

• 图片添加修饰

  // 7.4取出src
  let src = imgItem["src"] as! String;
  let imgHtml = "
  \(imgTitle)
  "
  

• 标题，子标题添加修饰

  // 创建标题HTML标签
  let titleHtml = "
  \(title)
  ";
    
  // 创建子标题html标签
  let subTitleHtml = "
  \(ptime)\(source)
  "
  

修改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