php仿写网页,php中文网移动端首页仿写_2019/9/10作业

最新推荐文章于 2023-09-26 12:09:24 发布

狮心王546

最新推荐文章于 2023-09-26 12:09:24 发布

阅读量142

点赞数

文章标签： php仿写网页

实例

html>

php中文网首页-实战

/* 公共样式 */

body {

height: 100%;

min-width: 320px;

max-width: 768px;

margin: 0 auto;

background: #edeff0;

overflow-y: initial;

position: relative;

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

overflow-x: hidden;

/*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/

-webkit-tap-highlight-color: transparent;

}

/* 网站头部 */

.top {

position: fixed;

top: 0;

width: 100%;

height: 42px;

background-color: #444444;

min-width: 320px;

max-width: 768px;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.top {

display: flex;

}

.top img:first-of-type {

width: 25px;

height: 25px;

margin-top: 8px;

border-radius: 50%;

margin-left: 5px;

}

.top img:last-of-type {

width: 25px;

height: 25px;

margin-top: 8px;

margin-right: 15px;

}

.top .logo {

text-align: center;

flex: 1;

}

.top .logo img {

width: 94px;

height: 45px;

}

/*轮播图*/

.banner {

display: flex;

}

.banner img {

width: 100%;

height: 160px;

}

/* 导航区 */

.nav {

height: 170px;

background-color: white;

box-sizing: border-box;

}

.nav ul {

margin: 0;

padding: 6px;

display: flex;

}

.nav ul li {

list-style-type: none;

text-align: center;

height: 75px;

flex: 1;

}

.nav ul li img {

width: 45px;

height: 45px;

}

.nav ul li a {

text-align: center;

color: gray;

text-decoration: none;

}

/* 推荐课程去 */

h3 {

color: gray;

}

.courses {

height: 100%;

color: gray;

}

.courses ul {

margin: 0;

padding: 0;

list-style: none;

/*flex布局*/

display: flex;

}

.courses ul li {

padding: 5px;

}

.courses ul img {

width: 100%;

height: 90px;

}

.courses div {

background-color: white;

padding: 10px;

margin-top: 10px;

height: 90px;

/*flex布局*/

display: flex;

justify-content: flex-start;

}

.courses div img {

width: 100%;

height: 90px;

}

.courses div a {

text-decoration: none;

color: gray;

flex: 0.45;

}

.courses div p {

flex: .55;

margin-left: 15px;

}

.courses div p span:first-of-type {

font-size: 0.8rem;

background-color: black;

color: white;

border-radius: 30%;

padding: 0 2px;

}

.courses div p span:last-of-type {

font-size: 0.7rem;

}

/*底部样式*/

.footer {

position: fixed;

bottom: 0;

width: 100%;

height: 42px;

min-width: 320px;

max-width: 768px;

left: 50%;

border-top: 1px solid #ccc;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.footer ul {

display: flex;

margin: 0;

padding: 0;

list-style-type: none;

text-align: center;

}

.footer ul li img {

width: 20px;

height: 20px;

}

.footer ul li a {

color: gray;

text-decoration: none;

}

.footer ul li {

flex: 1;

}

/* 最新更新区 */

.zuixin {

height: 100%;

color: gray;

}

.zuixin div {

background-color: white;

padding: 10px;

margin-top: 10px;

height: 90px;

/*flex布局*/

display: flex;

justify-content: flex-start;

}

.courses div {

background-color: white;

padding: 10px;

margin-top: 10px;

height: 90px;

/*flex布局*/

display: flex;

]

}

.zuixin div img {

width: 100%;

height: 90px;

}

.zuixin div a {

text-decoration: none;

color: gray;

flex: 0.45;

}

.zuixin div p {

flex: .55;

margin-left: 15px;

}

.zuixin div p span:first-of-type {

font-size: 0.1rem;

padding: 0 2px;

}

.zuixin div p span:nth-of-type(2) {

font-size: 0.8rem;

background-color: black;

color: white;

border-radius: 30%;

padding: 0 2px;

}

.zuixin div p span:last-of-type {

font-size: 0.7rem;

position: relative;

left: 70%;

}

/* 最新文章 */

.zxwz div {

background-color: white;

padding: 10px;

margin-top: 10px;

height: 90px;

/*flex布局*/

display: flex;

flex-flow: row-reverse;

}

.zxwz div img {

width: 100%;

height: 90px;

}

.zxwz div a {

text-decoration: none;

color: rgb: 0;

flex: 0.35;

}

.zxwz div p {

flex: .65;

margin: 0;

margin-left: 15px;

margin-top: 5px;

}

.zxwz div p a {

margin-bottom: 10px;

color: #444444;

font-size: 14px;

font-weight: bold;

}

.zxwz div p span {

color: #888;

font-size: 12px;

}

/* 更多内容区 */

.gdnr {

margin: 10px 0px;

}

.gdnr a {

color: gray;

text-decoration: none;

display: block;

margin: 0 auto;

/* line-height: 30px; */

line-height: 10px;

text-align: center;

background: #fff;

padding: 10px 0;

}

/* 最新博文区 */

.zxbw div {

width: 100;

display: flex;

justify-content: space-between;

background-color: #fff;

margin: 10px 0;

}

.zxbw div p:nth-child(1) {

height: 29px;

margin-left: 15px;

font-size: 14px;

color: gray;

font-weight: bold;

}

.zxbw div p:nth-child(2) {

height: 29px;

font-size: 12px;

color: #888;

margin-right: 15px;

}

HTML/CSS
JavaScript
服务端
数据库

移动端
手册
工具
直播