360首页产品推荐

最新推荐文章于 2024-06-26 22:59:42 发布

雕琢时光纸戆

最新推荐文章于 2024-06-26 22:59:42 发布

阅读量463

点赞数

本文链接：https://blog.csdn.net/TISRNW/article/details/101069302

版权

在这里插入图片描述
css写一个这样的简单样式。
大体上就分为一个head和body
head写标题，body写下面的八个快快。
首先那个最边上的小竖杠，我们可以用boder-left写也可以用一个span标签来写

	<span id="green-line">
					
				</span>

.box .head #green-line{
				position: absolute;
				top: 4.5px;
				color: rgb(35,172,56);
				display: inline-block;
				width: 2px;
				height: 18px;
				background-color: rgb(35,172,56);
			}

接下来写下面我们只要写好一个就可以复制粘贴就行，因为样式是一样的在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>360产品推荐</title>
		
		<style type="text/css">
			/*.box{
				width: 100%;
				
			}*/
			.box .head {
				height: 27px;
				position: relative;
			}
			.box .head a{
				color: rgb(35,172,56);
				font-size:18px ;
				font-weight: 400;
				text-decoration: none;
				padding-left: 10px;
		        /*border-left: solid rgb(35,172,56) 2px;*/
				
				
			}
			.box .head #green-line{
				position: absolute;
				top: 4.5px;
				color: rgb(35,172,56);
				display: inline-block;
				width: 2px;
				height: 18px;
				background-color: rgb(35,172,56);
			}
			.box .body{
				height:734px ;
				width:608px;
				box-sizing: border-box;
				border: solid rgb(229,229,229) 1px;
				margin-left: -1px;
			}
			.box .body .item{
				float: left;
				width: 303px;
				height: 141px;
				box-sizing: border-box;
				border: solid rgb(229,229,229) 1px;
				border-top: none;
				border-right: none;
				padding: 24px 0px;
				position: relative;
				
			}
			.box .body .item .pic{
				display: inline-block;
				width: 60px;
				height: 60px;
				margin: 16px 20px 0px 30px;
			}
			.box .body .item .text{
				display: inline-block;
				margin-top: 10px;
				position: absolute;
				top: 24px;
			}
			.box .body .item .text .title1{
				font-size: 18px;
				font-weight: 400;
				height: 36px;
				line-height: 36px;
			}
			.box .body .item .text .download .dl-link{
				display: inline-block;
				width: 68px;
				height: 28px;
				border: solid rgb(229,229,229) 1px;
				text-decoration: none;
				font-weight: 400;
				font-size:14px ;
				color: rgb(51,51,51);
				line-height: 28px;
				text-align: center;
				margin-right: 10px;
				border-radius: 3px;
			}
		</style>
		
	</head>
	<body>
		<div class="box">
			
			<div class="head">
				<span id="green-line">
					
				</span>
				<a href="" >360安全软件</a>
			</div>
			<div class="body">

				<div class="item">
					<div class="pic">
						<a href=""><img src="https://p3.ssl.qhimg.com/t0128439c6143122bad.png"/></a>
					</div>
					<div class="text">
						<div class="title1">
							360安全卫士
						</div>
						<div class="download">
							<a href="" class="dl-link">下载</a>
							<a href="" class="dl-link">论坛</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="pic">
						<a href=""><img src="img/shadu.png"/></a>
					</div>
					<div class="text">
						<div class="title1">
							360杀毒
						</div>
						<div class="download">
							<a href="" class="dl-link">下载</a>
							<a href="" class="dl-link">论坛</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="pic">
						<a href=""><img src="img/第三.png"/></a>
					</div>
					<div class="text">
						<div class="title1">
							360安全浏览器
						</div>
						<div class="download">
							<a href="" class="dl-link">下载</a>
							<a href="" class="dl-link">论坛</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="pic">
						<a href=""><img src="img/第四真.png"/></a>
					</div>
					<div class="text">
						<div class="title1">
							360急速浏览器
						</div>
						<div class="download">
							<a href="" class="dl-link">下载</a>
							<a href="" class="dl-link">论坛</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="pic">
						<a href=""><img src="img/第五.png"/></a>
					</div>
					<div class="text">
						<div class="title1">
							360手机卫士
						</div>
						<div class="download">
							<a href="" class="dl-link">下载</a>
							<a href="" class="dl-link">论坛</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="pic">
						<a href=""><img src="img/第四.png"/></a>
					</div>
					<div class="text">
						<div class="title1">
							360手机助手
						</div>
						<div class="download">
							<a href="" class="dl-link">下载</a>
							<a href="" class="dl-link">论坛</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="pic">
						<a href=""><img src="img/第七.png"/></a>
					</div>
					<div class="text">
						<div class="title1">
							360驱动大师
						</div>
						<div class="download">
							<a href="" class="dl-link">下载</a>
							<a href="" class="dl-link">论坛</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="pic">
						<a href=""><img src="img/最后.png"/></a>
					</div>
					<div class="text">
						<div class="title1">
							360免费WiFi
						</div>
						<div class="download">
							<a href="" class="dl-link">下载</a>
							<a href="" class="dl-link">论坛</a>
						</div>
					</div>
				</div>
				
			</div>
			
		</div>
		
	</body>
</html>

我们写好之后进行复制粘贴，用float属性来让他让他漂浮，这样就可以完成了。在这里插入图片描述