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

Home > List of blog posts > 仿站--php中文网移动端首页--2019年9月10日22时30分

Blogger Information

Blog 9

fans 1

comment 1

visits 6337

Special Recommendation

More>

Related recommendations

实例

<!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。

Correction status：qualified

Teacher's comments：写得非常棒, 加油

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

本地开发环境（phpstudy）的安装与本地主机的配置-2019年8月29日20时30分

2019-08-29 22:59:08