HTML+CSS 小练习写一个知乎小页面_用html设计知乎-CSDN博客

本文链接：https://blog.csdn.net/qq_41325698/article/details/102218332

最近复习了HTML和CSS，练习下

第一次写，可能排版有点乱。

先上效果图：

CSS：

.s1{
	margin: 20px 10px 15px 10px;
	width: 700px;
	height: 500px;
}
.my_img{
	position: absolute;
	left: 2px;
	top: 30px;
	z-index: 1;
	font-family: "微软雅黑";
}
.div1{
	position: relative;
	left: 0px;
	top: 5px;
	height: 280px;
}
.my_img1{
	position: absolute;
	top: 45px;
	
}
.div2{
	position: absolute;
	left: 60px;
	right: 15px;
}

.div3{
	font-family: "微软雅黑";
	position: relative;
	top: 5px;
	font-weight: bold;
	color:  darkblue;
}
.div_text{
	position: relative;
	top: 15px;
	font-family: "宋体";
	font-size: 15px;
}
.div4{
	position: relative;
	top: 30px;
}
.div5{
	position: relative;
	left: 17px;
	line-height: 22px;
	font-family: "宋体";
}
a.a1{
	text-decoration: none;
	color: mediumblue;
	font-family: "宋体";
}
.div6{
	position: relative;
	top:45px;
}
.txt{
	font:  normal  normal  17px  "宋体";
	color: darkgray;
	white-space: pre;
}
.pic{
	position: relative;
	top: -2px;
	
}
.line{
	position: relative;
	top: 200px;
}

HTML：

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body >
        <div class="s1">
		  	<div>
		  		<div style="float: left;">
		  			<img src="img/1.png" />
		  			<span style="font-family: '微软雅黑';"><b>    最新动态</b></span>
		  		</div>
		  		<div style="float: right;">
		  			<img src="img/2.png" />
		  			<span >设置</span>
		  		</div>
		  	</div>
		  	<div style="clear: both;"></div>
		  	<hr />
		  	<div class="div1">
		  		<div style="float: left;">
		  			<img src="img/4.png" />
		  			<br />
		  			<img class="my_img1"  src="img/5.png" />
		  			<p class="my_img">6551</p>
		  		</div>
		  		<div  class="div2">
		  			<div>
		  				<div style="float: left;">
		  					热门话题，来自&nbsp;    机械 &nbsp;&nbsp;&nbsp;关注话题 
		  				</div>
		  				<div style="float: right;">
		  					<img src="img/3.png" />
		  				</div>
		  			</div>
		  			<div style="clear: both;">
		  			</div>
		  			<div class="div3">
		  				<font >人类历史上令人叹为观止的极限精度制造结果有哪些？</font>
		  			</div>
		  			<div class="div_text">
		  				<b>Vincent Fu</b>, Materials Science, PhD
		  			</div>
		  			<div class="div4">
		  				<div style="float: left;">
		  					<img  src="img/6.png"/>
		  				</div>
		  				<div  class="div5">
		  					说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... 	
	                       <a class="a1">显示全部</a>
		  				</div>
		  			</div>
		  			<div style="clear:  both;">
		  			</div>
		  			<div class="div6">
		  				<img  class="pic" src="img/7.png"/>
		  				<span class="txt"> 关注问题 </span>
		  				<img class="pic" src="img/8.png" />
		  				<span class="txt"> 867条评论 </span>
		  				<img  src="img/9.png" />
		  				<span class="txt">作者保留权利</span>
		  			</div>
		  		   
		  			
		  		</div>
		  	
		  		
		  	</div>
		  	
		  		<div style="clear:both;"></div>
		  	 <hr color="gainsboro" />
		  	
		  	
	    </div>
	   
	</body>
</html>

我学东西很慢，但我不会放弃。