仿php中文网手机端
实例
html>
防php中文网手机版首页
HTML/CSS
JavaScript
服务端
数据库
移动端
手册
直播
工具
推荐课程
CI框架30分钟极速入门
中级53004次播放
2018前端入门_HTML5
中级234913次播放
最新更新
2019python自学视频
本课程适合想从零开始学习 Python 编程语言的开发人员。..
初级
1921次播放
PHP开发免费公益直播课
主讲：php中文网-朱老师( Peter Zhu) 时间：...
初级
1671次播放
从零开始到WEB响应式布局
重点介绍了HTML、CSS、web布局前端核心技术...
初级
3148次播放
最新文章
vscode全屏怎么退出
发布时间：2019-11-08
PHP中接口与抽象类的异同点有哪些
发布时间：2019-11-08
更多内容
最新博文
PHP学习第一天:软件安装篇
2019-11-08
Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题
2019-11-08
首页
视频
社区
我的
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
body,footer{
/*手机端宽的设计*/
/*0-768 手机*/
/*768-982 平板电脑*/
/*982-1020 pc*/
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background:#edeff0 ;
/*网页无限向下*/
overflow-y: initial;
position: relative;
color: gray;
/*不显示水平条滚动*/
overflow-x: hidden;
/*设置点击链接跳转时出现高亮,设置为透明: ios ipad*/
-webkit-tap-highlight-color: transparent;
}
/*设置所有图片全部自适应父容器,响应式显示*/
img{
width: 100%;
}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/*取消链接线*/
a{
text-decoration: none;
color: gray;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
@import "0.css";
header{
/*固定定位*/
position: fixed;
top: 0;
/*固定定位元素必须设置宽度与高度*/
width: 100%;
height: 42px;
background-color: #444444;
color: white;
/**设置最小尺寸*/
min-width: 350px;
max-width: 768px;
display: flex;
justify-content: space-between;
align-items: center;
}
header > img:first-of-type,
header > img:last-of-type{
width: 26px;
height: 26px;
margin: 5px;
}
header > img:nth-of-type(2){
width: 94px;
}
header > img:first-of-type{
border-radius: 50%;
}
/*************** 轮播图设置 ***************/
.banner{
box-sizing: border-box;
display: flex;
height: 200px;
}
/*************** 导航区 ***************/
nav{
background-color: white;
display: flex;
flex-flow: column nowrap;
/*padding-top: 20px;*/
}
nav > ul >li>a> img {
width: 45px;
height: 49px;
}
nav > ul{
display: flex;
/*flex-flow: row nowrap;*/
}
nav >ul > li {
flex: 1;
}
nav > ul >li >a{
display: flex;
flex-flow: column wrap;
align-items: center;
margin: 10px;
}
nav > ul > li > a >span{
margin-top: 10px;
}
/*内容区*/
main{
display: flex;
flex-flow: column nowrap;
}
.recommend-first{
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.recommend-first >a{
margin: 5px;
flex: 1;
}
.recommend-first > a >img {
height: 90px;
}
.recommend-last {
display: flex;
flex-flow: column nowrap;
}
.recommend-last > div {
display: flex;
}
.recommend-last > div> a >img {
height: 90px;
width: 350px;
}
.recommend-last >div > span {
display: flex;
flex-flow: column nowrap;
margin-top: 5px;
padding-left: 10px;
}
.recommend-last > div >span > span >i{
font-style: normal;
background-color: #333333;
color: white;
border-radius: 4px;
padding: 0 5px;
font-size: smaller;
}
/*最新更新*/
.renew{
display: flex;
flex-flow: column nowrap;
background-color: white;
margin-top: 20px;
}
.renew > div {
display: flex;
}
.renew >div>a>img{
width: 295px;
height: 80px;
}
.renew > div > span{
display: flex;
flex-flow: column nowrap;
padding-left: 30px;
margin: 10px;
}
.renew > div > span > span {
display: flex;
flex: 1;
}
.renew > div > span > a{
font-size: 1.3rem;
margin-bottom: 10px;
}
.renew > div > span > span {
font-size: small;
}
.renew > div > span > span:last-of-type {
display: flex;
justify-content: space-between;
}
.renew > div > span > span:last-of-type>span:first-of-type{
background-color: #333333;
color:white ;
border-radius: 6px;
font-size: smaller;
padding: 0 5px;
}
/*最新文章*/
.article{
display: flex;
flex-flow: column nowrap;
background-color: white;
margin-top: 20px;
}
.article > div {
display: flex;
/*flex-flow: ;*/
justify-content: space-between;
}
.article >div>a>img{
width: 218px;
height: 70px;
}
.article > div >div>a {
display: flex;
flex-flow: column nowrap;
flex: 1;
padding-right: 30px;
}
.article > div >div>a>span:first-of-type{
padding-left: 20px;
margin-bottom: 10px;
}
.article > div >div>a>span:last-of-type{
padding-left: 20px;
}
.article-last > a{
display: flex;
flex: 1;
justify-content: center;
align-items: center;
/*margin: 20px;*/
margin-top: 30px;
background-color: white;
}
/*最新博文*/
.bowen{
display: flex;
flex-flow: column nowrap;
}
.bowen >a{
display: flex;
/*flex-flow: ;*/
justify-content: space-between;
background-color: white;
padding: 0 30px;
}
/*也是固定定位实现--*/
footer{
position: fixed;
bottom: 0;
display: flex;
/*flex-flow: column nowrap;*/
/*margin-top: 30px;*/
width: 100%;
height: 42px;
color: white;
}
footer > a > img {
width: 30px;
height: 30px;
}
footer > a {
display: flex;
flex-flow: column nowrap;
flex: 1;
padding-top: 10px ;
align-items: center;
}
footer > a >span {
margin-top: 10px;
}
footer > a:first-of-type > span{
color: red;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
经过这几天的学习，彻底改变了我对前端学习的认识，以前自己学习，就是知道这么写可以实现这个效果，但是不知道为什么，也就是所谓的知其然不知其所以然
但是经过老师的带领，让我更深层的了解了知识的使用，做到了学以致用举一反三
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
