html切换城市页面,HTML5 响应式城市介绍网页模板

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Audiowide);

* {

margin: 0px;

padding: 0px;

box-sizing: border-box;

}

html,

body {

background: #eee;

font: 14px Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;

border: none;

width: 100%;

height: 100%;

}

.container {

display: flex;

}

.column {

display: flex;

flex-direction: column;

width: 50%;

}

.tile {

display: flex;

flex: 1;

position: relative;

width: 100%;

}

.tile h1 {

flex-shrink: 0;

display: block;

padding: 20px 0px;

background: #0e4452;

color: #fafafa;

font: 16px 'Audiowide', cursive;

text-transform: uppercase;

text-align: center;

width: 140px;

}

.tile .content {

padding: 20px;

background: #fafafa;

}

.tile .content h2 {

margin-bottom: 8px;

padding-bottom: 8px;

font: 14px 'Audiowide', cursive;

text-transform: uppercase;

border-bottom: 1px #25aa72 solid;

}

.tile .content button {

display: block;

margin: 20px 0px 0px auto;

padding: 8px 20px;

background: #25aa72;

color: #fafafa;

font: 12px 'Audiowide', cursive;

text-transform: uppercase;

border: none;

cursor: pointer;

}

.image-tile {

flex-grow: 0;

/* Calculate the height of the image based on the width of the view port and the height-width ratio of the image */

flex-basis: calc(50vw * 2/3);

height: calc(50vw * 2/3);

}

.image-tile img {

max-width: 100%;

}