php中文网安卓版,仿PHP中文网手机版首页

最新推荐文章于 2022-10-22 11:37:43 发布

weixin_39781186

最新推荐文章于 2022-10-22 11:37:43 发布

阅读量46

点赞数

文章标签： php中文网安卓版

实例

html>

仿PHP手机端首页

/*******************/

body , footer{

box-sizing: border-box;

min-width: 320px;

max-width: 768px;

margin: 0 auto;

background: #edeff0;

position:relative;

color: grey;

overflow-x:hidden;

/*不要出现水平滚动条*/

-webkit-tap-highlight-color: transparent;

/*点击链接跳转时出现高亮设置为透明:iOS/iPad*/

}

/*设置全部图片自适应父容器响应式显示*/

img{

width: 100%;

}

ul , li {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

text-decoration: none;

color: grey;

}

/*********头部样式************/

header {

position: fixed;

top:0;

/*固定定位*/

width:100%;

height: 42px;

background: #444;

color: white;

/*固定定位元素必须设置宽高度*/

min-width:320px;

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:first-of-type{

border-radius: 50%;

}

header > img{

width: 94px;

}

/**********轮播图***********/

.banner {

display: flex;

height: 200px;

}

/**********导航区***********/

nav {

background-color: white;

display: flex;

flex-flow: column nowrap;

/*主轴为垂直方向不换行*/

}

nav 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 nowrap;

/*图片文本垂直排列*/

align-items: center;

/*交叉轴居中*/

margin: 15px;

/*外边距设置使菜单项之间不拥挤*/

}

nav ul li a span {

margin-top: 6px;

/*设置文本与图标之间的间隙*/

}

/************主体区************/

/*推荐课程*/

main {

height: 1000px;

}

main h3 {

padding-left: 5px;

}

main > .recommend > section:first-of-type{

display: flex;

flex-flow: row nowrap;

/*图片主轴水平排列不换行*/

}

main > .recommend > section:first-of-type > a {

height: 90px;

margin: 5px;

/*增加外边距空隙*/

flex: 1;

/*图片均分全部空间 */

}

main > .recommend > section:first-of-type > a > img {

height: 90px;

}

/*设置垂直排列的推荐课程*/

main > .recommend > section:last-of-type{

display: flex;

flex-flow: column nowrap;

}

main > .recommend > section:last-of-type > div {

background-color: #fff;

margin: 5px;

display: flex;

/*flex-flow: row nowrap;*/

}

main > .recommend > section:last-of-type > div img {

width: 250px;

height: 90px;

}

main > .recommend > section:last-of-type > div > span {

display: flex;

flex-flow: column nowrap;

/*文本垂直排列*/

margin-top: 8px;

padding-left: 10px;

}

main > .recommend > section:last-of-type > div > span span {

font-size: 11px;

margin-top: 10px;

}

main > .recommend > section:last-of-type > div > span i {

width:20px;

font-style: normal;

background-color: #333;

color: white;

border-radius: 10px;

padding: 0 5px;

font-size: 10px;

/*字体大小更小的*/

}

/************页脚区***********/

footer {

position: fixed;

bottom: 0;

width: 100%;

height: 60px;

min-width: 320px;

max-width: 768px;

background-color:#eee;

}

footer img {

width: 20px;

margin-top: 12px;

}

footer > ul {

display: flex;

border-top: 1px solid #ccc;

}

footer ul li {

flex: 1;

}

footer ul li a {

display:flex;

flex-flow: column nowrap;

align-items: center;

}

footer ul li a span {

font-size: 13px;

margin-top: 2px;

}

HTML/CSS
JavaScript
服务端
数据库

手册
工具
直播
移动端