以这一行代码为例,尝试将选择器中的内容,空格部分替换成“.”试试,替换后的代码如下:
print(response.css('div.project-list.a::attr(href)').extract())
如果标签就是 a 标签,那么就需要修改展示方式,因为选择器最终输出的都是列表,所以这里需要将列表中的第一个元素进行展示,代码改为:
print(response.css('div.project-list a::attr(href)').extract()[0])
一般情况下,根据分辨率加载pc端 wap端 pad端三个css文件,示例:
<link rel="stylesheet" type="text/css" href="./css/style.css" media="all"><link rel="stylesheet" href="./css/phone.css" media="(max-width:620px)">
<link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1024px) and (min-width:621px)">
只有一个css文件情况下,根据分辨率调整css样式,示例:
@media screen and (max-width:620px){.logo{width: 300pxmargin-left: -140px}
}
@media screen and (max-width:1024px) and (min-width:621px) {
.logo{width: 220pxmargin-left: -99px}
.nav li:nth-of-type(2),.nav li:nth-of-type(3){width: 8%}
.nav li:nth-of-type(5),.nav li:nth-of-type(6){width: 12%}
}
响应是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。下面总结了几种响应式设计布局方式:1.Viewport。一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:<meta name="viewport" content="width=device-width, initial-scale=1.0">。
2.网格视图。使用网格视图让向网页添加元素很简单。在创建响应式网格视图时,一定要确保所有的HTML元素都有box-sizing属性且设置为 border-box。
3.媒体查询,使用@media查询,你可以针对不同的媒体类型定义不同的样式。实例:@media only screen and (orientation: landscape) {
body {
background-color: lightblue
}
}