jquery实现天气预报麻烦吧html和css也带上

html-css039

jquery实现天气预报麻烦吧html和css也带上,第1张

这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式，包括下雨，闪电，白天，夜间和下雪。卡片使用扁平化风格，并使用CSS3帧动画来制作各种动画效果。

制作方法

HTML结构

该特效的HTML结构采用无序列表的HTML结构，其中每一个li.card元素代表一种卡片。

<ul class="card-list">

<li class="card">

<div class="card-color color-rain">

<div class="rain"></div>

</div>

<div class="card-info">

<p>63 ℉</p>

<p>low of 61 ℉</p>

</div>

</li>

......

</ul>

复制代码

CSS样式

首先给卡片一些基本样式。

.card {

1.1、nth-child(n)     父元素下的第n个子元素，n必须大于0，索引都是从1开始。

<div>

<p>多云转晴</p>

<p>多云转晴</p>

<p>多云转晴</p>

<p>多云转晴</p>

<p>多云转晴</p>

</div>

div p:nth-child(2){

background: skyblue

}

1.2、nth-child(odd)   父元素下的奇数子元素  等同于 nth-child(2n-1)

div p:nth-child(odd){

background: skyblue

}

1.3、nth-child(even)  父元素下的偶数子元素 同样区分子元素类型   等同于nth-child(2n)

div p:nth-child(even){

background: skyblue

}

二、nth-of-type  匹配属于父元素的特定类型的第 N 个子元素的每个元素 忽略不是该类型的元素的存在

<div>

<h3>天气</h3>

<p>多云转晴</p>

<p>多云转晴</p>

<p>多云转晴</p>

<p>多云转晴</p>

<p>多云转晴</p></div>

div p:nth-of-type(1){

background: skyblue

}

文章来源于网络，望采纳

如何在空间里加上天气预报2006/12/29 19:15其实只需要在自定义模板后面加上

{height:190pxbackground:url(http://firetear.com/weather/weather.aspx) no-repeat 10pxbackground-color:#FFF }

步骤:首先要打开你的自定义模板4，在高级设置那里。这里就不用详细说了。

1、打开设置

2、模板设置

3、编辑自定义模板

4、找到#m_mylink4

5、在后面加入{height:190pxbackground:url(http://firetear.com/weather/weather.aspx) no-repeat 10pxbackground-color:#FFF }

完整的如下。

#m_mylink4 {height:190pxbackground:url(http://firetear.com/weather/weather.aspx) no-repeat 10pxbackground-color:#FFF }

直接把上面的代码加在CSS后面就行了