how2j.cn

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

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


步骤 1 :

练习-综合练习1

练习-综合练习1


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


问答区域    
2018-12-24 交作业
BeanGo



第一次交作业,请多指教
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>综合练习1</title>
	<style >
		.top{
			width: 20px;
			float: left;
			margin-top: 10px
		}
		.line{
			border-bottom-color: gray;
			border-bottom-style: solid;
			border-bottom-width: 1px; 
		}
		#toppic{
			display: table-cell;
			vertical-align: middle;
			height: 50px;
			width: 800px;
		}
		.right{
			width: 20px;
			float: right;
		}
		.box{
			height: 250px;
			width: 800px;
			border-bottom-color: gray;
			border-bottom-style: solid;
			border-bottom-width: 1px;   
		}
		.relativepostion{
			position: relative;
			left: 30px;
			top: 10px;
			width: 770px;
		}
		#font{
			font-size: 15px;
			color: grey;

		}
		#link{ 
			color: blue;

		}
		div:link{
			color: blue

		}
		a.nounderline{
			text-decoration: none;
		}
		.po{
			position: absolute;
			left: 0px
			top:0px;
			margin-left: 3px
		}
		.relative2{
			position: relative;
			left: 0px;
			top: 0px; 
			margin-top: 5px
		}
		#font2{
			font-size: 15px;
			color: black;

		}
		.fmainpics{
			float: left;
			margin-right: 5px;
		}

		
		.bottomwpics{
			margin-left: 15px;
			margin-top: 25px;
			 
		}
		.bottomwords{
			color: lightgrey;
			margin-top: 25px;
			margin-left: 5px; 
		}
		div.bottom{
			height:70px;
			margin-top:30px;
			margin-left:30px;
		}
		.topspace{
			margin-top: 5px;
		}
		.leftspace{
			margin-left: 5px;
		}
	</style>
	
	<div id="toppic" class="line">
		<span><img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/1.png"></span>
		<span class="leftspace">最新动态</span>
        <span class="right"><img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/2.png"></span>
	</div>
	<div class="box">
		<div class="top" ><img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/4.png">
			<div class="relative2">
				<div id="font" class="po">6551</div>
				<img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/5.png">
			</div>
		</div>
        <div id="font" class="relativepostion" >
        	<span>热门回答,来自</span><span id="font" class="leftspace">机械</span>
			<a id="link" class="nounderline" href="http://www.baidu.com" class="leftspace">关注话题</a>
			<span class="right"><img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/3.png"></span>
				<div ><a id="link" class="nounderline" href="http://www.baidu.com">人类史上令人叹为观止的极限精度制造成果有哪些?</a>
				</div>
				<div id="font" class="topspace" ">
				<strong id="font2">Vincent Fu,</strong> Material Science, PhD
				</div>
				<div ><img class="fmainpics" src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/6.png"><p> 说到精度,就不得不提在材料学中最重要的一个方面:表征。要想研究一种材料性能,握在手里把玩时远远不够,就算你拿出放大镜离近了看,也只能看到表明的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深…<a id="link" class="nounderline" href="http://www.baidu.com">显示全部</a></p>			
				</div>
		</div>

		<div class="bottom">
			<img class="bottomwpics" src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/7.png"><span class="bottomwords">关注问题</span><img class="bottomwpics" src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/8.png"><span class="bottomwords">867条评论</span><img class="bottomwpics" src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/9.png"><span class="bottomwords">作者保留权利</span>
		</div>
	</div>	
</head>
<body>
	
</body>
</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-12-13 作业
asd32123



做了好久 还是跟答案的做的不一样, 看了一眼答案 差距还真是挺大的。。。。
<html>
  <head>
    <title>A.html</title>
	<meta charset="UTF-8">
	<style>
		.div2{
		width:530px;
		}
		.img1{
			float:right;
		}
		/* 下划线 */
		.div{
			border-bottom:1px solid gray;
		}
		span{
			display:inline-block;
		}
		.div1{
			margin-top:10px;
		}
		.c{
			margin-left:10px;
		}
		.background-image{
			background-image:url(img1/5.png);
			background-repeat:no-repeat;
		}
	</style>
  </head>
  	
  <body>
  <div class="div2">
  	<img alt="" src="img1/1.png">&nbsp
  	<span style="color:gray;font-weight:bold;font-size:77%">最新动态</span>
  	<span class="img1" style="font-size:77%">设置</span>
  	<img class="img1" style="margin-right:5px"src="img1/2.png">
  </div>
  <div class="div div2"style="margin-top:5px"></div>
  <div class="div1 div2"> 
	  <table>
	  	<tr>
	  		<td><img  src="img1/4.png"></td>
	  		<td width="100%">
	  			<span class="c" style="padding-bottom:0px;color:gray;font-size:65%;font-family: 宋体">热门回答,来自 机械 <span style="color:#6495ED"> 关注话题</span></span>
	  			<img class="img1"src="img1/3.png"><br>
	  			<span class="c" style="padding-top:4px;font-size:70%;font-weight:bold;color:#008080;vertical-align:top;">人类史上令人叹为观止的极限精度制造成果有哪些?</span>
	  		</td>
	  	</tr>
	  	<tr>
	  		<td class="background-image" style="font-size:65%;text-align:center;color:gray">6551</td>
	  		<td >
	  			<div  style="margin-left:10px;font-size:65%;font-family:宋体"><span style="font-weight:bold">Vincent Fu</span>,Marwerials Serience,PhD</div>
	  		</td>
	  	</tr>
	  	<tr>
	  		<td></td>
	  		<td>
	  		<div class="c" ><img style="float:left" src="img1/6.png"></div>
	  			<div style="margin-left:220px;font-size:65%;letter-spacing:1px;line-height:180%;font-family:宋体">说到精度,就不得不提在材料学中最重要的一个方面:表征。要项研究一种材料性能,握在手里把玩时远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深...<span style="color:#6495ED">&nbsp显示全部</span></div>
	  			</td>
	  	</tr>
	  	<tr style="margin-top:10px">
	  		<td></td>
	  		<td style="font-size:65%;font-family:宋体;color:gray"><div style="margin-left:10px"><img src="img1/7.png">&nbsp关注问题&nbsp<img src="img1/8.png">&nbsp867条评论&nbsp<img src="img1/9.png">&nbsp作者保留权力</div></td>
	  	</tr>
	  </table>
  	
  </div>
  <div class="div2 div" style="margin-top:10px"></div>
  </body>
</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





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

上传截图