div+css实现天气预报widget组件效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现天气预报widget组件效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; } a { color: #fff; } .credits { color: rgba(255,255,255,0.8); text-shadow: 0px 3px 0px rgba(0,0,0,0.4;) } body { background:url('//repo.bfw.wiki/bfwrepo/image/603da313cc16a.png') no-repeat; background-size: 100% auto; font-family: 'helvetica', sans-serif; } article { width: 220px; height: 80px; display: block; position: relative; margin: 80px auto; background: #fafafa; border-radius: 0px 3px 3px 0px; box-shadow: 0px 10px 0px rgba(0,0,0,0.2); } .date { background: #CF575F; height: 80px; width: 80px; border-radius: 3px 0px 0px 3px; position: relative; left: -80px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3),0px 10px 0px rgba(0,0,0,0.2); } .date span { display: block; text-align: center; } .month { color: rgba(255,255,255,0.4); text-shadow: 0px 1px 0px rgba(0,0,0,0.2); font-size: 10pt; padding-left: 12px; padding-top: 25px; position: relative; top: 4px; } .day { color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,0.2); font-weight: 600; } ul { list-style: none; position: relative; top: -50px; padding-left: 20px; } ul li { display: inline-block; padding-left: 20px; font-weight: bold; color: #3d3c3d; } ul li:nth-child(1), ul li:nth-child(5){ font-size: 10pt; color: #969396; } ul li:nth-child(2), ul li:nth-child(4){ font-size: 12pt; color: #595959; } ul li:nth-child(3){ font-size: 16pt; } figure { position: absolute; top: -10px; right: 40px; background: royalblue; width: 40px; height: 20px; border-radius: 20px 3px 10px 10px; z-in.........完整代码请登录后点击上方下载按钮下载查看
网友评论0