1 Star 2 Fork 0

hm1024/W3school

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.css 4.97 KB
一键复制 编辑 原始数据 按行查看 历史
hm1024 提交于 2022-04-12 11:07 . W3school的模拟实现
* {
box-sizing: border-box;
}
/* body 样式 */
body {
font-family: '微软雅黑';
font-size:14px;
background-color: #fdfcf9;
}
.main-index {
margin-left: 10%;
margin-right: 10%;
}
/* 标题 */
.header {
text-align: left;
color: #fdfcf9;
}
#go{
background-color: #AE4141;
color: white;
}
#form{
float: right;
margin-top: 20px;
}
/* 导航 */
.navbar {
/* overflow: hidden; */
display: block;
background-color: #e8e7e4;
}
/* 导航栏样式 */
.navbar a {
display: block;
color: #a09e9e;
font-size: 16px;
font-family:"微软雅黑" ;
padding: 14px 17px;
text-decoration: none;
}
.navbar table {
border: 0;
width: 100%;
box-align: center;
}
/* 鼠标移动到链接的颜色 */
.navbar th:hover {
background-color: black;
color: #deddda;
text-align: center;
}
/* 列容器 */
.row {
display: grid; /*使用网格布局*/
grid-template-columns: 15% 70% 15%;
}
/* 创建两个列 */
/* 边栏 */
.side {
flex: 30%;
background-color: #fdfcf9;
padding: 20px;
border-left-style: solid;
border-right-style: solid;
border-color: #dad7d7;
border-width: 1px;
}
dl {
font-size: 10px;
line-height:24px; /*行间距*/
}
dd {
margin-left: 0px;
}
h2 {
font-size: 16px;
margin-left: -10px;
line-height:10px; /*行间距*/
}
/* 主要的内容区域 */
.main {
flex: 70%;
background-color: #fdfcf9;
padding: 20px;
}
body#index div#rows div#m1 {
text-align: center;
margin-top: 37px;
margin-bottom: 40px;
}
.message h1{
font-size: 23px;
color: #3f3f3f;
}
.message p{
font-size: 18px;
}
body#index div#rows div#m2 {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
overflow: hidden;
min-height: auto;
border-top-style:solid;
border-color: #bdb9b9;
border-width: 1px;
margin-top: 37px;
margin-bottom: 35px;
}
.picture {
margin-left: 50px;
margin-right: 12px;
}
.picture img {
width: 50px;
}
.words {
text-align: left;
margin-left: 10px;
}
.words h3 {
font-size: 25px;
line-height:10px; /*行间距*/
}
.words p {
font-size: 15px;
}
body#index div#rows div#m3 {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
overflow: hidden;
border-top-style:solid;
border-color: #bdb9b9;
border-width: 1px;
margin-top: 37px;
margin-bottom: 35px;
}
body#index div#rows div#m4 {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
overflow: hidden;
min-height: auto;
border-top-style:solid;
border-color: #bdb9b9;
border-width: 1px;
margin-top: 37px;
margin-bottom: 35px;
}
body#index div#rows div#m5 {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
overflow: hidden;
min-height: auto;
border-top-style:solid;
border-color: #bdb9b9;
border-width: 1px;
margin-top: 37px;
margin-bottom: 35px;
}
body#index div#rows div#m6 {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
overflow: hidden;
min-height: auto;
border-top-style:solid;
border-color: #bdb9b9;
border-width: 1px;
margin-top: 37px;
margin-bottom: 35px;
}
body#index div#rows div#m7 {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
overflow: hidden;
min-height: auto;
border-top-style:solid;
border-color: #bdb9b9;
border-width: 1px;
margin-top: 37px;
margin-bottom: 35px;
}
body#index div#rows div#m8 {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
overflow: hidden;
min-height: auto;
border-top-style:solid;
border-color: #bdb9b9;
border-width: 1px;
margin-top: 37px;
margin-bottom: 35px;
}
.partner a {
color: black;
font-size: 15px;
}
body#index div#rows div#m9 {
display: flex;
align-items: center;
justify-content:center;
text-align: left;
overflow: hidden;
margin-top: 37px;
margin-bottom: 70px;
margin-left: -20px;
}
.m91 {
margin-left: 7px;
margin-right: 8px;
line-height:5px; /*行间距*/
}
.m91 h4 {
color: #aaaaa6;
}
/* 底部 */
.footer1 {
padding: 9px;
text-align: center;
background: #e8e7e4;
}
.f1 {
font-size: 10px;
}
.footer2 {
padding: 8px;
text-align: center;
background: #fdfcf9;
}
.f2 a {
color: black;
margin-inline: 5px;
}
/* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/hm1024/w3school.git
git@gitee.com:hm1024/w3school.git
hm1024
w3school
W3school
master

搜索帮助