how2j.cn

下载区
文件名 文件大小
img.rar 41k
answer.rar 42k

工具版本兼容问题
用到的图片在右侧



步骤 1 :

练习-综合练习1

edit
练习-综合练习1


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-09-16 class="show1"为什么加个1,整个边框颜色都不见了
forestfire




求大佬解答
加载中

							

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-08-26 做了快2小时
白枫




效果应该挺接近了
加载中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice</title>
<style>
	
	/*划定一个整体的框架,所有内容都放在框架中*/
	div#topdiv{
		width:630px;
		height:400px;
		/*框架内文字大小都调整到80%*/
		font-size:80%;
	}
	/*粗体字类*/
	.bold{
		font-weight:bold;
	}
	/*左右浮动类*/
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	/*把两条分隔线内的都做到一张表格里*/
	table{
		/*表格外边距*/
		margin-top:10px;
		/*表格内边距*/
		padding-top:10px;
		padding-bottom:20px;
		/*与整体框架同宽*/
		width:100%;
		/*上边框设置为2px的实线*/
		border-top:2px solid lightgray;
		/*下边框设置为1px的实线*/
		border-bottom:1px solid lightgray;
	}
	/*设置表格两列的宽度*/
	.td1{
		width:8%;
		text-align:center;
		
	}
	.td2{
		width:92%
	}

	/*全局超链接取消下划线*/
	a {text-decoration:none;}
	a:visited {color:#1E90FF;}
	
	#i1{
		text-align:center;
		background-image:url(img/5.png);	
	}
	
	#i2{
		line-height:180%;
	}
	
	#i3{
		color:lightgrey;
	}
	
	#i4{
		margin-right:10px;
	}
</style>
</head>
<body>
	<div id="topdiv">
		<span class="left" ><img src="img/1.png"/><span class="bold"> 最新动态</span></span>
		<span class="right"><img src="img/2.png"/>设置</span>
		<!-- 分隔浮动效果,后续元素不再紧跟 -->
		<div style="clear:both"></div>
		<table>
			<tr>
				<td class="td1"><img src="img/4.png"/></td>
				<td class="td2">
					<div class="left">热门回答,来自 机械 </div>				
					<a href=""> 关注话题</a>
					<div class="right"><img src="img/3.png"/></div>
					<br>
					<span class="bold"><a href="">人类史上令人叹为观止的极限精度制造成果有哪些?</a></span>
				</td>
			</tr>
			<tr>
				<td><div id="i1">6551</div></td>
				<td>
					<div><span class="bold">Vincent Fu, </span>Materials Sciencs, PhD</div>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<div>
						<div class="left" id="i4"><img src="img/6.png"/></div>
						<div id="i2">说到精度,就不得不提在材料学中最重要的一个方面:表征。要想研究一种材料性能,握在手里把玩是远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深...<a href="">显示全部</a></div>
					</div>
				</td>
			</tr>
			<tr>
				<td></td>
				<td id="i3">
					<img src="img/7.png"/>
					关注问题
					<img src="img/8.png"/>
					867条评论
					<img src="img/9.png"/>
					作者保留权利				
				</td>
			</tr>			
		</table>
	</div>
</body>
</html>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-07-14 我不知道我怎么凑出来的,哈哈
2020-07-07 终于做出来了
2020-07-03 为啥 设置 "width:367px" 后,x 就会放到最右边,没有这个设置,就挨着左边的放?


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 44 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-综合性练习1 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 635924385
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图