/ 初始化样式表 /
@import url(lnitialize.css);
/ 网页页眉 /
.header {
background: #ce001f;
color: #fff;
height: 4.4rem;
/ 采用固定定位，把页眉定位到顶端 /
position: fixed;
top: 0;
right: 0;
left: 0;
font-size: 1.4rem;
}
/ 网页主体 /
.main {
background: #fff;
font-size: 1.4rem;
/ 采用绝对定位定位到中间部位 /
position: absolute;
top: 4.4rem;
right: 0;
bottom: 4.4rem;
left: 0;
}
/ 网页页脚 /
.footer {
background: #ccc;
color: #fff;
height: 4.4rem;
font-size: 1.4rem;
/ 采用固定定位，定位到底部 /
position: fixed;
right: 0;
bottom: 0;
left: 0;
}
3.页眉设置样式，采用字体图标和flex布局
这是设置html页眉的字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>页眉</title>
<link
rel="stylesheet"
href="style/css/my-key tubiao/font123/iconfont.css"
/>
<style type="text/css">
@import url(style/css/index.css);
@import url(style/css/header.css);
</style>
</head>
<body>
<!-- 网页页眉 -->
<div class="header">
<!-- 字体图标菜单 -->
<div class="menu iconfont icon-category"></div>
<!-- logo和放大镜和搜索框 -->
<div class="search">
<div class="logo">JD</div>
<div class="glass iconfont icon-search"></div>
<input type="text" class="words" value="立式空调柜" />
</div>
<!-- 登录按钮 -->
<div class="login"><a href="" class="login">登录</a></div>
</div>
<!-- 网页主体 -->
<div class="main">main</div>
<!-- 网页页脚 -->
<div class="footer">footer</div>
</body>
</html>
这是页眉的css样式
/ 获取到页眉的类，可以模块化选择子元素 /
.header {
display: flex;
align-items: center;
}
/ 菜单和搜索框还有登录按钮分区域 /
/ 菜单一份 /
.header .menu {
flex: 1;
text-align: center;
font-size: 3rem;
}
/ 设置菜单的触摸样式 /
.header .menu:hover {
cursor: pointer;
}
/ 搜索框六份 /
.header .search {
flex: 6;
display: flex;
/ 设置背景颜色为白色 /
background: rgb(255, 255, 255);
/ 定义背景圆角 /
border-radius: 3rem;
/ 设置内边距 /
padding: 0.3rem;
}
/ 设置logo样式 /
.header .search .logo {
color: #e43130;
font-size: 2rem;
flex: 0 1 4rem;
text-align: center;
/ 设置字体型号 /
font-family: “Franklin Gothic Medium”, “Arial Narrow”, Arial, sans-serif;
}
/ 设置放大镜样式 /
.header .search .glass {
color: #ccc;
flex: 0 1 4rem;
font-size: 2rem;
/ 设置左边框 /
border-left: 1px solid;
text-align: center;
}
/ 搜索框样式 /
.header .search .words {
border: none;
outline: none;
color: #ccc;
flex: 0 0 auto;
}
/ 登录1份 /
.header .login {
flex: 1;
/ 设置字体颜色 /
color: rgb(255, 255, 255);
/ 设置居中 /
text-align: center;
/ 设置文本加粗 /
font-weight: 600;
设置页脚样式
这是设置html页脚的字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>页脚</title>
<link
rel="stylesheet"
href="style/css/my-key tubiao/font123/iconfont.css"
/>
<link rel="stylesheet" href="style/css/my-key tubiao/iconfont.css" />
<style type="text/css">
@import url(style/css/index.css);
@import url(style/css/header.css);
@import url(style/css/footer.css);
</style>
</head>
<body>
<!-- 网页页眉 -->
<div class="header">
<!-- 字体图标菜单 -->
<div class="menu iconfont icon-category"></div>
<!-- logo和放大镜和搜索框 -->
<div class="search">
<div class="logo">JD</div>
<div class="glass iconfont icon-search"></div>
<input type="text" class="words" value="立式空调柜" />
</div>
<!-- 登录按钮 -->
<div class="login"><a href="" class="login">登录</a></div>
</div>
<!-- 网页主体 -->
<div class="main">main</div>
<!-- 网页页脚 -->
<div class="footer">
<div>
<div class="iconfont icon-smile"></div>
<span>首页</span>
</div>
<div>
<div class="iconfont icon-all-fill"></div>
<span>分类</span>
</div>
<div>
<div class="iconfont icon-gift"></div>
<span>惊喜</span>
</div>
<div>
<div class="iconfont icon-cart-Empty"></div>
<span>购物车</span>
</div>
<div>
<div class="iconfont icon-account-fill"></div>
<span>未登录</span>
</div>
</div>
</body>
</html>
这是页脚的css样式
.footer {
display: flex;
background: rgb(250, 250, 250);
color: #666;
flex: 1 1 auto;
/ 设置再主轴方向分散对齐 /
justify-content: space-around;
/ 设置交叉轴居中对齐 /
align-items: center;
}
/ 设置div子元素 /
.footer > div {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
/ 设置首页图标样式 /
.footer .iconfont {
font-size: 2.5rem;
}
/ 设置字体大小 /
.footer div span {
font-size: 1rem;
}
