how2j.cn

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

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



步骤 1 :

练习-综合练习1

edit
练习-综合练习1


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


问答区域    
2019-11-25 这个line-height:170%是怎么算出来的,
汤达人




第二次跟着答案做了一遍,有俩个问题,这个line-height:170%是怎么算出来的, 还有style里为什么要写这个边框线 .show{ border:1px solid red; } div1{ border:1px solid green; } 望老师解答!!!
加载中
<!DOCTYPE html>
<html>
	<head>
		<style>
		body{
			font-family: "宋体";
			font-size:13px;
			color:#666666;
			width:643px; 
		}	
		.bold{
			font-weight:bold;
		}		
		div.topdiv{
			border-bottom-style:solid;
			border-bottom-color:silver;
			border-bottom-width:1px;
			padding-bottom:10px;
			margin-bottom: 15px;
		}
		.floatright{
			float:right;
		}
		.floatleft{
			float:left;
		}
		.show{
			border:1px solid red;
		}
		div1{
			border:1px solid green;
		}
		a{
			text-decoration: none;
			color:#336699;
		}
		.text{
			color:rgb(51,51,51);
		}
		div#thirDiv span{
			color:rgb(169,169,169);
		}
		div.clearleft{
			clear:left;
		}
		</style>

		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="topdiv">
			<img style="margin-right:5px" src="../img/作业图像/1.png"/>
			<span class="bold">最新动态</span>
			<span class="floatright">设置</span>
			<img style="margin-right:5px" class="floatright" src="../img/作业图像/2.png"/> 
		</div>
		<div class="floatleft" style="margin-right:15px">
			<img src="../img/作业图像/4.png"/>
		</br>
		</br>
			<span style="background-image:url(../img/作业图像/5.png); padding:5px">6651</span>
		</div>
		<div class="floatleft show1">
			<div style="margin-bottom:5px">
				<span>热门回答,来自 机械</span>
				<a href="#">关注话题</a>
				<img src="../img/作业图像/3.png"/>
			</div>
			<a class="bold">人类史上令人叹止的极限精度制造成果有哪些?</a>
			<p class="text">
				<b>Vincent  Fu,</b>
				Materrials Science, PhD
			</p>
			<img class="floatleft text" src="../img/作业图像/6.png"/>
			<div class="floatleft text" style="line-height:170%;margin-left:15px;width:367px">
				说到精度,就不得不提在材料学中最重要的一个方面:表征。要项研究一种材料性能,握在手里把玩时远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深...
				<a href>显示全部</a>
			<br>
			
			&nbsp;
			
			</div>
			<div id="thirDiv">
				<img src="../img/作业图像/7.png"/>
				<span>关注问题</span>
				<img src="../img/作业图像/8.png"/>
				<span>867条评论</span>
				<img src="../img/作业图像/9.png"/>
				<span>作者保留权利</span>
			</div>			
		</div>
		<div class="clearleft">			
		</div>
		<div id="bottom" style="margin-top:20px;border-top-style:solid;border-top-width:1px;border-top-color:silver;"></div>
	</body>
</html>

							





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





2019-11-24 答案里padding-bottom:10px; 为什么是10px; 我用PS 量了尺寸,但不是10px呀?
汤达人




作业是做出来了,但是看了答案,没有答案写得精简 没有懂答案里的 padding-bottom:10px; 为什么是10px; 我用PS 量了尺寸,但不是10px呀? 望老师解答
加载中
<!DOCTYPE html>
<html>
	<head>
		<style>
			section{
				width:645px;

			}
			.right{
				float:right;
				font:bold 15px "楷体";
				color:rgb(102,102,102);
							}
			.left{
				float:left;				
			}		
		    .center{		    	
		    	margin:0px 15px; 
		    	font:bold 13px "宋体";
		    	color:rgb(102,102,102);
		    }
		    .box1{
		    	border-bottom:1px solid rgb(221,221,221);
		    	height:30px;		    			    	
		    }
		    .box2{
		    	border-bottom:1px solid rgb(221,221,221);
		    	height:260px;		    			    	
		    }
		    div.a{
		    	color:rgb(102,102,102);
		    	font-size:13px;
		    	font-family:"宋体";
		    	position:absolute;
		    	left:11px;
		    	top:107px;
		    }
		    div.b{
		    	color:rgb(102,102,102);
		    	font:12px "宋体";
		    	position: absolute;
		    	left:58px;
		    	top:52px;
		    }
		    a.no_underline1{
		    	text-decoration: none;
		    	color:rgb(51,102,153);
		    	}
		    a.no_underline2{
		    	text-decoration: none;
		    	color:rgb(51,102,153);		    	
		    }	
		    div.c{	
		    	color:rgb(51,102,153);    	
		    	font-size:12px;
		    	font-weight:bold;
		    	font-family:"宋体";
		    	position:absolute;
		    	left:58px;
		    	top:72px;	    	
		    }
		    div.d{	    	
		    	font-size:13px;
		    	font-family:"Times New Roman";
		    	position:absolute;
		    	left:58px;
		    	top:102px;	    	
		    }
		    div.e{	    	
		    	position:absolute;
		    	left:58px;
		    	top:128px;	    	
		    }
		    div.f{	    	
		    	font-size:13px;
		    	font-family:"宋体";
		    	line-height:20px;
		    	position:absolute;
		    	left:273px;
		    	top:132px;	    	
		    }
		    div.g{
		    	color:rgb(169,169,169);
		    	font-size:12px;
		    	font-family:"宋体";
		    	display:inline;
		    	position:absolute;
		    	left:56px;
		    	top:262px;
		    }
		    div.h{
		    	color:rgb(169,169,169);
		    	font-size:12px;
		    	font-family:"宋体";
		    	display:inline;
		    	position:absolute;
		    	left:132px;
		    	top:262px;
		    }
		    div.i{
		    	color:rgb(169,169,169);
		    	font-size:12px;
		    	font-family:"宋体";
		    	display:inline;
		    	position:absolute;
		    	left:219px;
		    	top:262px;
		    }
		    
		  
		</style>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<section>
		<div class="box1">
			<img class="left" valign="middle" src="../img/作业图像/1.png"/>
			<span class="center" valign="middle">最新动态</span>
			<span class="right" valign="middle"><img src="../img/作业图像/2.png"/>  设置</span>			
		</div>
		<div class="box2">
			<p><img src="../img/作业图像/4.png"/></p>
			<div class="a">6551</div>
			<div class="b">热门回答,来自 机械 <a class="no_underline1" href="1.html">关注话题</a></div>
			<div class="c"><a class="no_underline2" href="1.html" >人类史上令人叹为观止的极限精度制作成果有哪些?</a></div>
			<div class="d"><b>Vincent  Fu,</b>  Materrials Science, PhD</div>
			<div class="e"><img src="../img/作业图像/6.png"/> </div>
			<div class="f">说到精度,就不得不提在材料学中最重要的一个方面:表征。要<br/>项研究一种材料性能,握在手里把玩时远远不够的,就算你拿出<br/>放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓<br/>一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),<br/>如果要获得更深...<a class="no_underline1" href="1.html">显示全部</a></div>
			<div class="g"><img src="../img/作业图像/7.png"/>  关注问题</div>
			<div class="h"><img src="../img/作业图像/8.png"/>  867条评论</div>
			<div class="i"><img src="../img/作业图像/9.png"/>  作者保留权利</div>
			
		</div>
		
		</section>
	</body>
</html>

							





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





2019-11-14 作业
2019-10-22 提交作业
2019-10-18 作业
2019-10-17 交作业
2019-10-16 交作业
2019-09-27 交作业
2019-09-23 交作业
2019-09-17 交作业
2019-09-02 什么时候用id 什么时候用class?
2019-08-26 练习-综合练习1
2019-08-01 查看答案后有个地方很不解
2019-07-28 交作业
2019-07-25 交作业
2019-07-23 ZZ交作业 CSS-综合性练习1
2019-07-23 ZZ交作业 CSS-综合性练习1
2019-07-23 ZZ交作业 CSS-综合性练习1
2019-07-22 。。。。
2019-07-15 综合练习1
2019-06-08 写作业
2019-06-04 交作业
2019-05-29 提交作业,有点粗糙,还是交了吧
2019-05-27 交作业
2019-05-27 交作业
2019-04-23 来交一次作业
2019-04-21 提问
2019-04-18 代码详解(自己看的)
2019-03-23 交作业
2019-03-14 第一次交作业,好紧张
2019-02-28 建的CSS写的 基本上全是用的相对定位布局 不知道怎么写将就把
2019-02-25 我知道知乎这个剑桥材料学博士。。。
2019-02-18 交作业啦
2019-01-24 大概也就这个意思 调着太麻烦 这也不对那也不对
2018-12-24 交作业
2018-12-13 作业
2018-12-04 交作业
2018-11-28 感觉CSS代码太乱了,而且取class名很头痛
2018-11-26 交作业!
2018-11-20 为什么和答案差不多,但是确实这样的结果?
2018-11-15 交作业
2018-11-14 交作业
2018-10-01 交作业
2018-09-19 第一次交作业
2018-09-03 交作业
2018-08-26 全用div硬撸出来的,看来我不适合搞前端
2018-08-25 id="left'什么意思?
2018-08-02 第一次交作业
2018-08-02 给各种div起名真的好烦
2018-07-17 感觉我写的有点多……几乎每个地方都用DIV套住了
2018-06-18 不知道写的怎么样,还可以如何简便些
2018-06-02 作业
2018-04-24 做的不好大家将就看看,哈哈
2018-04-12 终于做了个样子
2018-03-13 作业做的不对,求指点
2018-03-08 交作业
2018-02-24 交作业 写的好乱 全是DIV没事么...
2018-01-29 这个div怎么不在左边
2018-01-29 这个div怎么不在左边
2018-01-29 怎么嵌套两个div这个布局就不对了
2018-01-18 怎么才能随浏览器的大小进行自适应?
2017-12-25 关于边框模型的问题
2017-12-21 交作业。。 菜鸟一只 做了两个小时
2017-12-15 交作业啦
2017-12-15 交作业啦
2017-11-24 请老师检阅一哈
2017-11-24 不熟练花了3小时吧
2017-11-20 花了一小时写的 希望能让老师满意
2017-11-20 本菜鸟写的
2017-09-17 为什么右边的部分是靠 width:367px撑起来的?
2017-09-09 写了一个小时 请批改作业啊老师
2017-09-07 图片和文字不在同一水平
2017-08-21 改变了body的宽度为800px后,为什么只有第一个div改变宽度,其他的不变啊。
2017-08-10 插入img,img默认显示位置不贴着边
2017-08-04 写了一晚上,感觉写的很乱,div套div
2017-06-04 <div style="clear:left;"></div><br>加和不加的区别
2017-06-02 对span元素设置margin-right为什么没有效果?
2017-06-01 关于代码的问题
2017-06-01 line-height=170%是什么意思
2017-06-01 站长,你这个边距是用什么测的啊,还有颜色
2017-05-12 class的问题
2017-04-13 内联元素能直接设置margin和padding吗?
2017-03-19 端技术-CSS-综合性练习1 -练习-综合练习1 的提问
2016-06-02 关于阶段练习的答案




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

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

上传截图