CSS微信静态页面制作代码
/* 定义全局样式 */
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI','Helvetica Neue',Arial,'PingFang SC','Hiragino Sans GB','Microsoft Yahei',sans-serif;
background-color: #f2f2f2;
}
/* 导航栏 */
nav {
height: 45px;
background-color: #1aad19;
color: #fff;
}
nav ul {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
padding: 0 12px;
list-style: none;
}
nav li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
/* 页面主要内容 */
.container {
display: flex;
justify-content: space-between;
margin: 10px;
}
.left {
flex-basis: 68.5%;
background-color: #fff;
padding: 10px 20px;
border-radius: 5px;
Box-shadow: 0 0 10px rgba(0,0.15);
}
.right {
flex-basis: 30%;
padding-left: 20px;
}
.card {
background-color: #fff;
margin-bottom: 10px;
border-radius: 5px;
Box-shadow: 0 0 10px rgba(0,0.15);
padding: 10px 15px;
}
.card img {
max-height: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.card-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.card-info {
color: #999;
margin-bottom: 10px;
}
.card-description {
margin-bottom: 10px;
}
/* 页脚 */
footer {
/* 让页脚始终在底部 */
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #ccc;
text-align: center;
color: #666;
line-height: 50px;
}
以上是CSS微信静态页面的制作代码,通过使用flex布局、边框阴影等属性,使得页面看起来更加美观,交互更加友好。