dv+css实现天气预报卡片布局效果代码
代码语言:html
所属分类:布局界面
代码描述:dv+css实现天气预报卡片布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/weather-icons.min.css"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); body { background: linear-gradient(90deg, #754d8b 0%, #4e5992 100%); font-size: 18px; } h1, h2, h3, h4, h5 { font-weight: normal; margin: 0; padding: 0; } .widget { height: 300px; width: 450px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .weatherIcon{ background-color: #f0f8fa; height: 70%; width: 100%; position: absolute; left: 0; top: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; } .weatherIcon:before{ display: block; content:"\f002"; color: #818b8d; font-family: weathericons; font-size: 110px; position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); } .weatherData { background-color: #2e3336; height: 30%; width: 100%; position: absolute; left: 0; bottom: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } h1 { color: #c5cdcf; font-family: 'Open Sans'; font-weight: 200; font-size: 2.9375em; line-height: 2.9375em; position: absolute; left: 6%; top: 50%; transform: translate(0, -50%); } h2 { color: #8f9b9d; font-family: 'Open Sans'; font-weight: 200; font-size: 1.1875em; line-height: 1.1875em; position: absolute; top: 24%; left: 27%; } h3 { color: #c5cdcf; font-family: 'Open Sans'; font-weight: 400; font-size: 0.8125em; line-height: 0.8125em; position: absolute; bottom: 25%; left: 27%; } h4 { color: #fff; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0