PHP仿写网站,手机网站仿写0910

最近有点儿忙，这个作业交的有点儿晚了，但这个作业是看了老师讲解后一口气写出来的代码，不像以前的作业要反复的看老师的课件才完成的。通过这一段前端知识的学习我最大的收获就是学会用开发者工具去看一个网站的代码了，可以看懂大多数的网页的静态代码了，会逐步的分析一个网站的某部分内容，把它用在自己的代码中。

本次m.php.cn的网站首页的仿写从头部导航开始

响应式网站，设置某一些容器的高度，宽度采用自适应即可。一些属性值可采用rem或em来进行定义。rem是相对html的字体的比值，em是相对父级元素的比值。

视块级元素为盒子，用盒子套盒子，通过定位、对齐与排列实现整体的布局。

一、头部导航区：

需要注意的是头部采用绝对定位后，其脱离文档流，后续的内容会钻到头部导航区的下面，造成下面的banner图区域的内容有一部分被遮挡需通过设置banner区的margin-top留出头部区域的高度，防止内容被遮挡。

三个导航的图标采用列表形式，设置ul为flex盒子，让子元素li在主轴方向平均分配间隔，同时使用text-align进行对齐操作。

二、banner图区

没有过多设置，需考虑消除头部导航绝对定位的影响

三、 导航图标区

本区采用一个div容器来包裹两个ul-li列表，ul设置为flex盒子，子元素li设置flex: 1让li元素平均分配空间，进行等距排列，文字、图标和a标签设置text-align :center采用居中对齐

四、推荐课程区

用一个div容器.course-list将整个推荐课程区包起来，设置margin-top/bottom，制造与其它区域的外边距；设置padding值内边距，使内容区内收；

区域内的每一行内容分别设置div容器进行包裹，使用flex盒子布局，下面的内容再用div等块级元素进行包裹，使用flex属性来分配两个容器的空间占比，达到水平布局的要求。

五、最新更新区

基本上拷贝“四”的作法与模式，只是在右侧增加了div容器，内部采用三个p标签实现布局，第三个p标签设置为flex盒子，内两个span标签采用两端对齐

六、最新文章

整体的实现与前面相似，仅作一些细节上的调整即可，在最下面的“更多内容”链接处将a标签设置display: block属性变为块级元素，宽度设为100%占满一行，再设置它的bgc，color，text-algin等属性

七、最新博文

八、底部导航

与顶部导航一样，采用绝对定位后，需将导航区域上面的最新博文区设置margin-bottom留出footer的高度，防止内容被遮罩。

网页代码：

实例

• HTML/CSS
• JavaScript
• 服务端
• 数据库

• 移动端
• 手册
• 工具
• 直播

推荐课程

CI框架30分钟极速入门

中级 49786次播放

2018前端入门_HTML5

初级 210219次播放

最新更新

Laravel 5.8 中文文档手册

《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58

中级  7386次播放

JavaScript极速入门

本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编

初级  7158次播放

第七期_直播体验课

php中文网第七期线上***今晚(2019.7.1)正式开课啦~~！为了让

初级  6706次播放

CSS3 极速入门

html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程

初级  6704次播放

HTML5 极速入门

在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布

初级  5639次播放

nodejs开发基础教程

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对

初级  4898次播放

最新文章

PHP之十六个魔术方法详解(总结)

发布时间：2019-07-29

PHP生成折线图和饼图等

发布时间：2019-08-02

PHP实现动态规划之***问题

发布时间：2019-08-13

ThinkPHP6源码：从Http类的实例化看依赖注入是如何实现的

发布时间：2019-08-16

PHP7中php.ini、php-fpm和www.conf 配置

发布时间：2019-08-23

更多内容

最新博文

mysql查询时间戳和日期的转换

2019-09-07

小程序实现复制文本内容

2019-09-06

js获取url链接中的域名部分

2019-09-07

小程序实现头像图片裁剪

2019-09-03

《悦帮到家》小程序

2019-09-03

更多内容

首页

视频

社区

我的

运行实例 »

点击 "运行实例" 按钮查看在线实例

主要CSS样式，初始化CSS样式不另列出

实例

.header {

position: fixed;

top: 0;

background-color: #222;

width: 100%;

height:42px;

min-width: 320px;

max-width: 768px;

/*水平居中*/

left: 50%;

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

transform: translateX(-50%);

display: flex;

}

/*顶部导航栏*/

.header ul {

display: flex;

width: 100%;

padding: 6px;

}

.header ul li {

flex: 1;

height: 42px;

line-height: 42px;

justify-content: space-evenly;

}

.header ul .user img{

width: 25px;

height: 25px;

border-radius: 50%;

}

.header ul .logo {

text-align: center;

}

.header ul .logo img {

width: 94px;

height: 45px;

}

.header ul .menu {

text-align: right;

}

/*轮播区*/

.banner {

display: flex;

margin-top: 40px;

}

.banner a {

width: 100%;

}

.banner img {

width: 100%;

height: 160px;

}

/*导航图标区*/

.nav {

/*width: 100%;*/

height: 170px;

background-color: white;

box-sizing: border-box;

}

.nav ul {

width: 100%;

padding: 6px;

display: flex;

}

.nav li {

text-align: center;

height: 75px;

flex: 1;

}

.nav ul li a {

color: gray;

font-weight: bold;

text-decoration: none;

text-align: center;

}

.nav ul li img {

width: 45px;

}

/*推荐课程区*/

/*course-list为板块容器*/

.course-list {

/*设置上下边距*/

margin: 20px 0;

/*向内收10px,比nav窄一点儿*/

padding: 10px;

/*border: 1px dashed black;*/

}

/*版区标题*/

.course-list h3 {

/*减少上方间距*/

margin-top: 0;

/*与下面内容错开距离*/

margin-bottom: 10px;

}

/*推荐课程区样式*/

.course-list .courses-box1 {

width: 100%;

box-sizing: border-box;

}

.course-list .courses-box1 > ul {

display: flex;

}

.course-list .courses-box1 ul li:first-child {

padding-right: 5px;

}

.course-list .courses-box1 ul li:last-child {

padding-left: 5px;

}

.course-list .courses-box1 ul img {

width: 100%;

height: 90px;

}

.course-list .courses-box2 {

background-color: white;

margin-top: 20px;

padding: 10px;

display: flex;

}

.course-list .courses-box2 img {

width: 100%;

height: 80px;

}

.course-list .courses-box2 a {

text-decoration: none;

font-size: 1.2rem;

color: gray;

flex: 0.45;

}

.course-list .courses-box2 p{

margin-left: 20px;

flex: 0.55;

}

.course-list .courses-box2 span:first-of-type{

background-color: black;

color: white;

font-size: 0.8rem;

border-radius: 20%;

}

.course-list .courses-box2 span:last-of-type {

color: gray;

font-size: 0.75rem;

}

/*最新更新区样式*/

.course-list .courses-box3 {

background-color: white;

margin-top: 20px;

padding: 10px;

display: flex;

}

.course-list .courses-box3  a img {

width: 100%;

height: 80px;

}

.course-list .courses-box3 a:first-of-type{

flex: 0.45;

}

.course-list .courses-box3 .line-1st a {

text-decoration: none;

font-size: 1.2rem;

color: gray;

}

.course-list .courses-box3 .right-content{

margin-left: 20px;

padding-right: 5px;

flex: 0.55;

}

.course-list .courses-box3 .line-2nd {

font-size: 11px;

color: gray;

}

.course-list .courses-box3 .line-3rd{

display: flex;

justify-content: space-between;

}

.course-list .courses-box3 .line-3rd span:first-of-type{

background-color: black;

color: white;

font-size: 0.8rem;

border-radius: 20%;

}

.course-list .courses-box3 .line-3rd span:last-of-type {

color: gray;

font-size: 0.75rem;

}

/*最新文章区样式*/

.course-list .courses-box4 {

background-color: white;

margin-top: 10px;

padding: 10px;

display: flex;

}

.course-list .courses-box4  a img {

width: 100%;

height: 65px;

}

.course-list .courses-box4 a:first-of-type{

flex: 0.30;

}

.course-list .courses-box4 .line-1st{

margin-bottom: 10px;

font-size: .8rem;

font-weight: bold;

}

.course-list .courses-box4 .line-1st a {

text-decoration: none;

color: gray;

}

.course-list .courses-box4 .right-content{

flex: 0.70;

}

.course-list .courses-box4 .line-2nd {

font-size: .75rem;

color: gray;

}

.course-list > a {

display: block;

width: 100%;

font-size: 0.8rem;

text-align: center;

text-decoration: none;

color: gray;

background-color: white;

margin-top: 10px;

padding: 5px 0;

}

/*最新博文区域样式*/

.course-list .courses-box5 {

background-color: white;

margin-top: 10px;

padding: 10px;

display: flex;

justify-content: space-between;

}

.course-list .courses-box5 .line-1st{

margin-bottom: 10px;

font-size: .8rem;

font-weight: bold;

}

.course-list .courses-box5 .line-1st a {

text-decoration: none;

color: gray;

}

.course-list .courses-box5 .line-2nd {

font-size: .75rem;

color: gray;

}

/*底部导航*/

footer {

display: flex;

position: fixed;

bottom: 0;

width: 100%;

height:42px;

min-width: 320px;

max-width: 768px;

left: 50%;

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

transform: translateX(-50%);

padding-top: 5px;;

border-top: 1px solid #222;

justify-content: space-evenly;

background-color: #edeff0;

}

footer a {

text-align: center;

text-decoration: none;

color: gray;

}

footer img {

width: 16px;

text-align: center;

}

footer span {

text-align: center;

text-decoration: none;

font-size: 0.75rem;

}

footer br {

margin: 0;

padding: 0;

}

/*设置最后一个course-list最新博文区块与footer的间距*/

body > .course-list:last-of-type {

margin-bottom: 50px;

}

/*设置阴影效果*/

.courses-box4, .courses-box5 {

box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);

}

运行实例 »

点击 "运行实例" 按钮查看在线实例