手机端项目动态页面

最新推荐文章于 2023-01-13 17:34:06 发布

begin 专注

最新推荐文章于 2023-01-13 17:34:06 发布

阅读量142

点赞数

文章标签： css3 前端

本文链接：https://blog.csdn.net/qq_61718994/article/details/123778912

版权

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css" />
 <link rel="stylesheet" href="css/index.css" />
		<title>项目动态</title>
	</head>
	<body>
		<h1>项目动态</h1>
	   <div class="banner"><img src="img/tu1.png" alt="" /></div>
    <div class="nav">
    	<h2>项目</h2>
    	<div class="nav-common">
    		<div class="nav-items">
    			<a href="#"></a>
    			<a href="#"></a>
    		</div>
    	</div>
    	<div class="nav-common1">
    		<div class="nav-items1">
    			<a href="#"></a>
    			<a href="#"></a>
    		</div>
    	</div>
    	<div class="nav-common2">
    		<div class="nav-items2">
    			<a href="#"></a>
    			<a href="#"></a>
    		</div>
    	</div>
    </div>
   <div class="xiankuang"></div>
   <div class="xiankuang1"></div>
	</body>
</html>

css代码：

* {
	margin: 0;
	padding: 0;
}
body {
	width: 100%;
	min-width: 320px;
	max-width: 1280px;
	margin: 0 auto;
}
h1 {
height: 28px;
font-size: 24px;
line-height: 28px;
text-align: center;
color: #000000;
}
.banner {
	margin: 2%;
}
.banner img {
	width: 100%;
}
.nav {
	
	margin: 2% ;
}
.nav h2 {
	/*font-weight: 400;*/
	font-size: 24px;
	line-height: 28px;
	text-align: center;
	color: #000000;
}
.nav-common,
.nav-common1,
.nav-common2 {
	margin-top: 8px;
	height: 300px;
	background-color: white;
	display: flex;
}
.nav-items,
.nav-items1,
.nav-items2 {
	flex: 1;
	display: flex;
	height: 300px;
}
.nav-items a,
.nav-items1 a,
.nav-items2 a {
	flex: 1;
	text-align: center;
	line-height: 32px;
	color: #fff;
	font-size: 14px;
	/*文字阴影*/
	text-shadow: 1px 1px rgba(0,0,0,.2);
}
.nav-items a:nth-child(1),
.nav-items1 a:nth-child(1),
.nav-items2 a:nth-child(1) {
	border: 0;
	background: url(../img/t2.png) no-repeat;
	background-size: 100%;
}
.nav-items a:nth-child(2),
.nav-items1 a:nth-child(2),
.nav-items2 a:nth-child(2) {
	border: 0;
	background: url(../img/t2.png) no-repeat;
	background-size: 100%;
	border-left: 2px solid #fff;
}
.xiankuang {
	margin: 32px;
}
.xiankuang:after {
	content:'';
	display:block;
	width: 96%;
	margin: auto;
	margin-top:32px;
	border-bottom:2px solid lightgrey;
}
.xiankuang1 {
	margin: 32px;
}
.xiankuang1:after {
	content:'';
	display:block;
	width: 80%;
	margin: auto;
	margin-top:32px;
	border-bottom:2px solid lightgrey;
}

页面效果展示:

begin 专注

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机端项目动态页面

html代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" hre
复制链接

扫一扫