Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿jd手机端
Blogger Information
Blog 52
fans 1
comment 1
visits 38858
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿jd手机端
小丑0o鱼
Original
626 people have browsed it

/ 初始化样式表 /
@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;
}

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post