文件结构
这里作为演示我把html.css,图片它们都放一起了。
文件结构.PNG
avatar.jpg
宽屏效果
窄屏效果
简短的代码实现分栏博客页面
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="diy.css">
<title>DIY</title>
</head>
<body>
<header class="app-header">
<a href="#">
<img class="app-header-avatar" class="app-header-avatar" src="avatar.jpg" alt="没有头像">
</a>
<p>个性签名：hhhhhhhhhhhhhhhhhhhhhhhha</p>
<div class="app-header-social">链接</div>
</header>
<main class="app-container">
<h1>XX的文章</h1>
<article>
<ul>
<li>
article1
</li>
<li>
article1
</li>
<li>
article1
</li>
</ul>
</article>
</main>
</body>
</html>
css页面
*{
box-sizing: border-box
}
/* 标题 */
.app-header {
padding: 2.5em;
background: #242930;
text-align: center
}
/* 头像 */
.app-header-avatar {
max-width: 15rem;
max-height: 15rem;
border-radius: 100%;
border: .5rem solid #57cc8a
}
body {
/* margin: 0;
font-family: sans-serif; */
background: #353b43;
color: #afbac4
}
/*控制页面适应屏幕变化*/
@media(min-width:940px) {
.app-header {
position: fixed;
top: 0;
left: 0;
width: 20rem;
min-height: 100vh
}
.app-container {
max-width: 65rem;
margin-left: 20rem
}
}
如此，一个基本的大致“框架”就写好了。
网友评论