仿站--php中文网移动端首页--2019年9月10日22时30分

综合前几节课所学知识，模仿PHP中文网移动站

HTML源

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- <link rel="stylesheet" href="css/init.css"> -->
	<!-- <link rel="stylesheet" href="css/style1.css">-->
<style>
body{
	min-width: 320px;
    max-width: 768px;
    margin: 0 auto;
    background: #edeff0;
    overflow-y: initial;
    position: relative;

    /*禁用水平滚动条*/
    overflow-x:hidden;

    /*（移动端上）有事件监听的元素被点击的时候会被高亮显示*/
   -webkit-tap-highlight-color:transparent; 
}

a {
	text-decoration: none;
}


ul{
	margin:0;
	padding: 0;
	list-style: none;
}

.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%);

	display: flex;
}

.top img:first-of-type,
.top img:last-of-type{
	width: 25px;
	height: 25px;
	margin-top: 8px;
}

.top img:first-of-type{
	border-radius: 50%;
	margin-left: 5px;
}

.top .logo{
	text-align: center;
	flex: 1;
}

.top .logo img{
	width: 94px;
	height: 45px;
	margin-top: -2px;
}
/*banner*/
.banner{
	display: flex;
}

.banner img{
	width: 100%;
	height: 200px;
}

/*导航*/
.nav{
	height: 170px;
	background-color: white;
	box-sizing: border-box;
}
.nav ul{
	/*margin: 0;*/
	padding: 6px;
	display: flex;
}

.nav ul li{	
	text-align: center;
	height: 75px;
	flex: 1;
}

.nav ul li a{
	text-align: center;
	color: gray;	
}

.nav ul li img{
	width: 45px;
	height:45px;
}

/*推荐课程区CSS*/
h3{
	color: gray;	
}

.courses{
	/*height: 346px;*/
	color: gray;
	margin-bottom: 20px;
}

.courses ul{
	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;

	display: flex;
	justify-content: flex-start;
}

.courses div img{
	width: 100%;
	height: 90px;
}

.courses div a{
	color: gray;
	flex: 0.45;
}

.courses div p{
	color: gray;
	margin-left: 15px;
	flex: 0.55;
}

.courses div p span:first-of-type{
	font-size: 0.8em;
	background-color: black;
	color: white;
	border-radius: 30%;
	padding: 0 2px;
}

.courses div p span:last-of-type{
	font-size: 0.7em;
}

/*最新更新*/

.zxgx{
	margin-bottom: 20px;
}
.zxgx ul li{
	height: 90px;
	margin-bottom: 20px;
    padding: 9px 0px;
    background: #fff;
    padding-left: 10px;

    display: flex;
}

.zxgx ul img{
	width: 100%;
	height: 90px;
}

.zxgx ul a{
	flex: 0.45;
}

.wb{
	color: gray;
	margin-left: 15px;
	flex: 0.55;
}
.wb a{
	color: gray;
	font-size: 1em;
}

.wb p:first-of-type{
	color: #888;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	font-size: 0.5em
}

.wb p:first-of-type{
	color: #888;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	font-size: 0.5em
}

.wb p:last-of-type{
	/*设置flex*/
	display: flex;
	justify-content: space-between;

}
.wb p:last-of-type span:first-of-type{
	font-size: 0.8em;
	background-color: black;
	color: white;
	border-radius: 30%;
	padding: 0 2px;
}

.wb p:last-of-type span:last-of-type{
	font-size: 0.7em;
}

/*最新文章*/
.zxwz{
	margin-bottom: 20px;
}
.zxwz li{
	height: 65px;
	margin-bottom: 10px;
    padding: 5px;
    background: #fff;
    padding-left: 10px;

    display: flex;
}

.zxwz li a:first-of-type {
    margin-top: 14px;
    color: gray;
    /*font-weight: bolder;*/
    flex: 0.65;
}

.zxwz li a:first-of-type span{
	color: #777;

	font-size: 0.6em;
}


.zxwz li a:last-of-type {
    flex: 0.35;
}


.zxwz li a:last-of-type img{
    width: 100%;
    height: 65px;   
}
.zxwz .more{
	display: block;
    margin: 0 auto;   
    line-height: 10px;
    text-align: center;
    background: #fff;
    padding: 10px 0;
}

.zxbw{
	margin-bottom: 20px;
}

.zxbw li{
	height: 30px;
	margin-bottom: 10px;
    padding: 5px;
    background: #fff;
    padding-left: 10px;
}

.zxbw li a{
	color: gray;
	font-weight: bolder;
	overflow: hidden;
}

.zxbw li a span{
	font-size: 0.8em;
	float: right;
}
.zxbw .more{
	display: block;
    margin: 0 auto;   
    line-height: 10px;
    text-align: center;
    background: #fff;
    padding: 10px 0;
}

.zxwd{
	margin-bottom:80px;
}

.zxwd li{
	height: 30px;
	margin-bottom: 10px;
    padding: 5px;
    background: #fff;
    padding-left: 10px;
}

.zxwd li a{
	color: gray;
	font-weight: bolder;
	overflow: hidden;
}

.zxwd li a span{
	font-size: 0.8em;
	float: right;
}
.zxwd .more{
	display: block;
    margin: 0 auto;   
    line-height: 10px;
    text-align: center;
    background: #fff;
    padding: 10px 0;
}
/*底部*/
.footer{
	border-top: 1px solid gray;
	position: fixed;
	bottom:  0;
	background: #edeff0;
	width: 100%;
	height: 42px;

	min-width: 320px;
	max-width: 768px;
	left:50%;

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

}

.footer ul{
	display: flex;
	text-align: center;
}

.footer ul img{
	width: 20px;
	height: 20px;
}

.footer ul a{
	color: gray;
}

.footer ul li{
	flex: 1;
}
</style>
	<title>PHP中文网手机端--首页</title>
</head>
<body>
<!-- 固定定位：顶部 -->
<div class="top">
		<img src="img/user-pic.jpeg" alt="用户头像">
		<div class="logo">
			<img src="img/logo.png" alt="php中文网">
		</div>
		<img src="img/user-nav.jpg" alt="导航">
</div>
<!-- banner -->
<div class="banner">
	<img src="img/banner.jpg" alt="入门教程">
</div>

<!-- 导航 -->
<div class="nav">
	<ul>
		<li><a href=""><img src="img/html.png" alt=""><br>HTML/CSS</a></li>
		<li><a href=""><img src="img/JavaScript.png" alt=""><br>JavaScript</a></li>
		<li><a href=""><img src="img/code.png" alt=""><br>服务端</a></li>
		<li><a href=""><img src="img/sql.png" alt=""><br>数据库</a></li>
	</ul>
	<ul>
		<li><a href=""><img src="img/app.png" alt=""><br>移动端</a></li>
		<li><a href=""><img src="img/manual.png" alt=""><br>手册</a></li>
		<li><a href=""><img src="img/tool2.png" alt=""><br>工具</a></li>
		<li><a href=""><img src="img/live.png" alt=""><br>直播</a></li>
	</ul>
</div>
<!-- 推荐课程 -->
<h3>推荐课程</h3>
<div class="courses">
	<ul>
		<li>
			<a href=""><img src="img/tjkc1.jpg" alt="推荐课程"></a>
		</li>
		<li>
			<a href=""><img src="img/tjkc2.jpg" alt="推荐课程"></a>
		</li>
	</ul>

	<div>
		<a href=""><img src="img/tjkc3.jpg" alt=""></a>
		<p><a href="">CI框架30分钟极速入门</a>
			<br>
			<span>中级</span><span>49791次播放</span>
		</p>
	</div>
	<div>
		<a href=""><img src="img/tjkc4.jpg" alt=""></a>
		<p><a href="">2018前端入门教程</a>
			<br>
			<span>初级</span><span>20123次播放</span>
		</p>
	</div>
</div>

<h3>最新更新</h3>
<div class="zxgx">
	<ul>
		<li>
			<a href=""><img src="img/zxgx1.jpg" alt=""></a>
			<div class="wb">
				<a href="">Laravel 5.8 中文文档手册</a>
				<p>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》     手册简介：Laravel 5.8 在 Laravel 5.7 的</p>
				<p>
					<span>中级</span>
					<span>7307次播放</span>
				</p>
			</div>
		</li>
		<li>
			<a href=""><img src="img/zxgx2.jpg" alt=""></a>
			<div class="wb">
				<a href="">JavaScript极速入门</a>
				<p>《本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了，让你学习0压力，适合新手观看学习......</p>
				<p>
					<span>初级</span>
					<span>7102次播放</span>
				</p>
			</div>
		</li>
		<li>
			<a href=""><img src="img/zxgx3.jpg" alt=""></a>
			<div class="wb">
				<a href="">第七期_直播体验课</a>
				<p>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广大PHP开发爱好者，了解本期的课程，特安排了直播开放课，感兴趣的小伙伴不要错过哟！ 晚 20:00-22:00直播 ，报名qq：88526（猪哥）。七期线上班详情：http://www.php.cn/k.html</p>
				<p>
					<span>初级</span>
					<span>6681次播放</span>
				</p>
			</div>
		</li>
		<li>
			<a href=""><img src="img/zxgx4.jpg" alt=""></a>
			<div class="wb">
				<a href="">CSS3 极速入门</a>
				<p>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们再来学习本章节的css，将会获得更好的学习体验。课程内容非常有节奏的安排，知识点简单明了，让你从头到尾学习毫无压力……快来学习吧……</p>
				<p>
					<span>初级</span>
					<span>6647次播放</span>
				</p>
			</div>
		</li>
		<li>
			<a href=""><img src="img/zxgx5.jpg" alt=""></a>
			<div class="wb">
				<a href="">HTML5 极速入门</a>
				<p>在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布局，非常适合HTML5零基础入门，整个轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力！</p>
				<p>
					<span>初级</span>
					<span>5607次播放</span>
				</p>
			</div>
		</li>
		<li>
			<a href=""><img src="img/zxgx6.jpg" alt=""></a>
			<div class="wb">
				<a href="">nodejs开发基础教程</a>
				<p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。Node.js 使JavaScript 可以在浏览器之外上运行。非常适合前端人员想学习后端技术的同学。</p>
				<p>
					<span>初级</span>
					<span>4860次播放</span>
				</p>
			</div>
		</li>
	</ul>
</div>

<h3>最新文章</h3>
<div class="zxwz">
	<ul>
		<li><a href=""><b>HTML表单元素</b><br><span>发布时间：2019-09-11</span></a>
			<a href=""><img src="img/zxwz1.jpg" alt=""></a>
		</li>
		<li><a href=""><b>php值得学吗</b><br><span>发布时间：2019-09-11</span></a>
			<a href=""><img src="img/zxwz2.jpg" alt=""></a>
		</li>
		<li><a href=""><b>php中if和switch的区别</b><br><span>发布时间：2019-09-11</span></a>
			<a href=""><img src="img/zxwz3.jpg" alt=""></a>
		</li>
		<li><a href=""><b>php中strtotime什么意思</b><br><span>发布时间：2019-09-11</span></a>
			<a href=""><img src="img/zxwz4.jpg" alt=""></a>
		</li>
		<li><a href=""><b>php中的接口是什么</b><br><span>发布时间：2019-09-11</span></a>
			<a href=""><img src="img/zxwz5.jpg" alt=""></a>
		</li>
	</ul>
	<div class="more">
		<a href="">更多内容</a>
	</div>
</div>

<h3>最新博文</h3>
<div class="zxbw">
	<ul>
		<li><a href="">mysql查询时间戳和日期的转换<span>2019-09-07</span></a></li>
		<li><a href="">小程序实现复制文本内容<span>2019-09-06</span></a></li>
		<li><a href="">js获取url链接中的域名部分<span>2019-09-07</span></a></li>
		<li><a href="">小程序实现头像图片裁剪<span>2019-09-03</span></a></li>
		<li><a href="">《悦帮到家》小程序<span>2019-09-03</span></a></li>
	</ul>
	<div class="more">
		<a href="">更多内容</a>
	</div>
</div>

<h3>最新问答</h3>
<div class="zxwd">
	<ul>
		<li><a href="">多选框写进数据库怎么写<span>2019-09-11</span></a></li>
		<li><a href="">localhost打不开?<span>2019-09-11</span></a></li>
		<li><a href="">php之免费常用快递物流api查询接口的使用教程<span>2019-09-10</span></a></li>
		<li><a href="">控制台<span>2019-09-10</span></a></li>
		<li><a href="">为什么我播放不了<span>2019-09-10</span></a></li>
	</ul>
	<div class="more">
		<a href="">更多内容</a>
	</div>
</div>
<!-- 底部 -->
<div class="footer">
	<ul>
		<li><a href=""><img src="font-icon/zhuye.png" alt=""><br>主页</a></li>
		<li><a href=""><img src="font-icon/video.png" alt=""><br>视频</a></li>
		<li><a href=""><img src="font-icon/luntan.png" alt=""><br>社区</a></li>
		<li><a href=""><img src="font-icon/geren.png" alt=""><br>我的</a></li>
	</ul>

</div>
</body>
</html>

运行实例 »

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

完成效果：

PHP中文网手机端--首页.jpg

小结：

通过这两节课的学习，基本掌握了Flex弹性布局的基本操作，了解了什么是容器，什么是项目，以及它们的属性

容器属性

flex-direction属性决定主轴的方向（即项目的排列方向）

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap如果一条轴线排不下，如何换行

nowrap（默认）：不换行。
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

flex-flow它是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

项目属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-selff属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

实例

相关文章