Skip to content

H
HTML-CSS-JS

好小子*··* / HTML-CSS-JS
与 Fork 源项目一致

Fork自 inscode / HTML-CSS-JS

通知 1
Star 0
Fork 1
H
HTML-CSS-JS
提交 e5e3db87 编写于 作者: 6 6434e391c9c5b664a3babdd7
浏览文件
操作

Auto commit

上级 e6db359a
隐藏空白更改
内联 并排
Showing with 60 addition and 14 deletion
index.html
浏览文件 @ e5e3db87
...@@ -8,10 +8,32 @@ ...@@ -8,10 +8,32 @@
<title>InsCode</title> <title>InsCode</title>
</head> </head>
<body> <body>
<div class="container">
<img src="src/assets/logo.svg" alt="InsCode"> <div class="flex-container-row">
<div>欢迎来到 InsCode</div> <div class="flex-item">1.刘邦</div>
</div> <div class="flex-item">2.吕雉</div>
<script src="script.js"></script> <div class="flex-item">3.项羽</div>
<div class="flex-item">4.虞姬</div>
</div>
<div class="flex-container-row-reverse">
<div class="flex-item blue">伯</div>
<div class="flex-item blue">仲</div>
<div class="flex-item blue">叔</div>
<div class="flex-item blue">季</div>
</div>
<div class="flex-container-column">
<div class="flex-item">金</div>
<div class="flex-item">银</div>
<div class="flex-item">铜</div>
</div>
<div class="flex-container-column-reverse">
<div class="flex-item blue">苏洵</div>
<div class="flex-item blue">苏轼</div>
<div class="flex-item blue">苏辙</div>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
style.css
浏览文件 @ e5e3db87
html, .flex-container-row {
body { display: flex;
height: 100%; flex-direction: row;
width: 100%; }
}
.flex-container-row-reverse {
.container { display: flex;
text-align: center; flex-direction: row-reverse;
padding: 64px; }
.flex-container-column {
display: flex;
flex-direction: column;
}
.flex-container-column-reverse {
display: flex;
flex-direction: column-reverse;
}
.flex-item {
border:1px solid #fff;
height:60px;
width:60px;
text-align:center;
line-height:60px;
background: #f66;
color:white;
}
.flex-item.blue {
border:1px solid #fff;
background: #33f;
} }
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或