3news

最新推荐文章于 2024-08-21 14:09:37 发布
deersum
最新推荐文章于 2024-08-21 14:09:37 发布
阅读量41
点赞数
文章标签： javascript 前端开发语言
本文链接：https://blog.csdn.net/deersum/article/details/132667276
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function setRootFontSize(){
        var rootHtml = document.documentElement;
        var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
        rootHtml.style.fontSize = rem + "px";
        }
        setRootFontSize();   //网页首次载入时执行一 次
        window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
        window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
        
		</script>
		<style>
			body{
				margin: 0;
				background-color: #f0f0f0;
			}
			#header{
        		background-color: #e66c05;
        		height: 1.32rem;
        		position: fixed;
        		width: 100%;
        	}
			.header_left{
        		float: left;
        		background-image: url("icon.png");
        		width: 1.8rem;
        		height: 1.32rem;
        		background-repeat: no-repeat;
        		background-position: 0.3rem 0.22rem;
        		background-size: 1.2rem 1rem;
        		
        	
        	}
        	.header_left img{
        		width: 1.17rem;
        		height: 0.7rem;
        	}
        	.header_right{
        		float: right;
        		width: 0.5rem;
        		height: 1.2rem;
        		background-image:url("sub_more.png");
        		background-position: 0.22rem 0.38rem;
        		background-size: 0.55rem 0.55rem;
        		background-repeat: no-repeat;
        	    padding-right: 0.5rem;
        		padding-left: 0;
        		margin-left: 0;
        	}
        	.header_cright{
        		float: right;
        		width: 1.16rem;
        		height: 1.2rem;
        		
        		background-image:url("message.png");
        		background-position: 0.46rem 0.36rem;
        		background-size: 0.6rem 0.6rem;
        		background-repeat: no-repeat;        	
        		}
        	 .header_center{
        		
        		background: #FFFFFF;
        		border: 0px solid #FFFFFF;
        		
        		border-radius:100px 100px 100px 100px ;
        		height: 0.65rem;
        		width: 6.55rem;
        		margin-left: 1.88rem;
        		margin-top: 0.3rem;
        
        	}	
        	#header_search{
        	    float: left;
        		height: 0.38rem;
        		width: 0.38rem;
        		margin-top: 0.15rem;
        		margin-left: 0.25rem;
        	}
        	#header_placeholder{
        		float: left;
        		font-size: 0.28rem;
        		border: none;
        		padding-top: 0.17rem;
        		padding-left: 0.2rem;        		
        		width: 4.6rem;
        	}
        	input {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
          

        		
        	 .radius_area,.radius_area2{
        		float: left;
        		width: 10.49rem;
        		height: 1.92rem;
        		background-color: #FFFFFF;
        		margin-top: 1.49rem;
        		margin-left: 0.15rem;
        		border-radius:30px ;
        		
        	}
        	.radius_area2 .testTXT{
        		float: left;
        		margin-top: 0.35rem;
        		width: 7.15rem;
        	    font-size:0.31rem;
        	    margin-left: 0.3rem;
        		letter-spacing: 0.02rem;
        	}
        	
        	.radius_area2{
        		
        		margin-top: 0.22rem;
        		margin-left: 0.15rem;
        	}
        	
        	.radius_area .testTXT{
        		float: left;
        		margin-top: 0.35rem;
        		width: 7.15rem;
        	    font-size:0.31rem;
        	    margin-left: 0.3rem;
        		letter-spacing: 0.02rem;
        	}
        	
        	.testMIN_left{
        		float: left;
        		font-size: 0.26rem;
        		margin-top: 0.23rem;
        		color: #727272;
        		
        		
        	}
        	
        	.testMIN_right{
        		float: right;
        		font-size: 0.26rem;
        		margin-top: 0.23rem;
        		color: #727272;
        	}
        	
        	 .testIMG img{
        		float: right;
        		width: 2.22rem;
        		height: 1.47rem;
        		margin-top: 0.22rem;
        		margin-right: 0.21rem;
        	}
        	
        	body{
        		font-family: simsun;
        	}
        	
		</style>
	</head>
	<body>
		<div id="header">
			<div class="header_left"></div>
		    <div class="header_right"></div>
		    <div class="header_cright"></div>
		    <div class="header_center"  ><img id="header_search" src="search.png"><input id="header_placeholder"  type="text" placeholder="天价锂矿争夺大戏落幕！宁德时代截胡成功，豪掷超60亿控股斯诺威矿业"/> </div>
		</div>
		
		<div id="mainArea">
			<div class="radius_area">
				<div class="testTXT">天价锂矿争夺大戏落幕！宁德时代截胡成功，豪掷超60亿控股斯诺威矿业<br>
				    <div class="testMIN_left">时代财经</div>
				    <div class="testMIN_right">2023年03月06日 22:42</div>
			    </div>
                <div class="testIMG"><img src="news01.jpg"></div>
		    </div>
		    
		    <div class="radius_area2">
				<div class="testTXT">茅台再上新，惊蛰节气酒发布！夏系列也在酝酿中……<br>
				    <div class="testMIN_left">酒业内参</div>
				    <div class="testMIN_right">2023年03月07日 00:02</div>
			    </div>
                <div class="testIMG"><img src="news02.png"></div>
		    </div>
		     <div class="radius_area2">
				<div class="testTXT">超300万人围观！张兰淘宝首秀赢“麻”了？<br>
				    <div class="testMIN_left">证券时报</div>
				    <div class="testMIN_right">2023年03月07日 00:02</div>
			    </div>
                <div class="testIMG"><img src="news03.png"></div>
		    </div>
		     <div class="radius_area2">
				<div class="testTXT">开发供应链、收购美工厂，富士康紧锣密鼓拓展电动车业务？<br>
				    <div class="testMIN_left">环球网</div>
				    <div class="testMIN_right">2023年03月07日 06:38</div>
			    </div>
                <div class="testIMG"><img src="news04.jpg"></div>
                
		    </div>
		    <div class="radius_area2">
				<div class="testTXT">成本攀升、增长乏力，低价白酒老村长，会走上高端涨价之路吗？<br>
				    <div class="testMIN_left">酒业内参z</div>
				    <div class="testMIN_right">2023年03月08日 09:37</div>
			    </div>
                <div class="testIMG"><img src="news05.png"></div>
                
		    </div>
		     <div class="radius_area2">
				<div class="testTXT">A股女大佬，你只知道董明珠？316个女董事长14个90后，最小才24岁<br>
				    <div class="testMIN_left">媒体滚动</div>
				    <div class="testMIN_right">2023年03月08日 13:20</div>
			    </div>
                <div class="testIMG"><img src="news06.jpg"></div>
                
		    </div>
		    <div class="radius_area2">
				<div class="testTXT">数字经济概念满屏飘红！怎么布局？<br>
				    <div class="testMIN_left">市场资讯</div>
				    <div class="testMIN_right">2023年03月08日 12:48</div>
			    </div>
                <div class="testIMG"><img src='news07.jpg'></div>
                
		    </div>
		    
		     <div class="radius_area2">
				<div class="testTXT">中国金融监管体系大变革！机构改革六大举措释放了什么信号<br>
				    <div class="testMIN_left">澎湃新闻</div>
				    <div class="testMIN_right">2023年03月08日 06:54</div>
			    </div>
                <div class="testIMG"><img src="news08.jpg"></div>
                
		    </div>
		      <div class="radius_area2">
				<div class="testTXT">百亿补贴终燃“战火”：京东补贴遭拼多多狙击，阿里承压？<br>
				    <div class="testMIN_left">新浪科技</div>
				    <div class="testMIN_right">2023年03月08日 08:07</div>
			    </div>
                <div class="testIMG"><img src="news09.png"></div>
                
		    </div>
		    
		     <div class="radius_area2">
				<div class="testTXT">21万汽车降价9万！“史上最强补贴”来袭？这一车企强势涨停！影响有多大<br>
				    <div class="testMIN_left">市场资讯</div>
				    <div class="testMIN_right">2023年03月08日 01:02</div>
			    </div>
                <div class="testIMG"><img src="news10.jpg"></div>
                
		    </div>
		    
		    

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