how2j.cn

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

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


步骤 1 :

练习-综合练习1

练习-综合练习1


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


问答区域    
2018-07-17 感觉我写的有点多……几乎每个地方都用DIV套住了
JGD



看看写的可不可以……
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link href="style/test1.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div id="d">
		
		<div id="dh">
			<img src="image/1.png"><p>最新动态</p>
			<div id=dhr>
				<img src="image/2.png">
				<p>设置</p>
			</div>
		</div>
		
		<div id="db">
			<div id="dbl">
				<img src="image/4.png">
				<div id="dblb">6551</div>
			</div>
			<div id="dbr">
				<div id="huati">
					<span>热门回答,来自 机械</span>
					<a href="#">关注话题</a>
				</div>
				<div id="title">人类史上令人叹为观止的极限精度制造成果有哪些?
				</div>
				<div id="jianjie">
				<strong>Vincent Fu,</strong>
				<span>Materials Science, PhD</span>
				</div>
				<div class="neirong">
					<img src="image/6.png">
					<div>说到精度,就不得不提在材料学中最重要的一个方面:表征。要想研究出一种材料性能,握在手里把玩是远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深. . <a href="#">显示全部</a></div>
				</div>
				<div style="clear:both"></div>
				<div id="dbrb">
					<img src="image/7.png">
					<a href="#">关注问题</a>
					<img src="image/8.png">
					<a href="#">867条评论</a>
					<img src="image/9.png">
					<a href="#">作者保留权利</a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>



div{
	font-size:13px;
}

#d{
	width: 650px;
	height:800px;
}
#dh{
}

#dh p{
	display: inline;
	
	margin-left: 10px;
	color:#666666;
	font-weight: bold;
}

#dhr{
	float:right;
}
#dhr img{
	position: relative;
	top:1px;
}
#dhr p{
	margin-left: 5px;
	font-weight: normal;
}


#db{
	height:250px;
	border-top: 1px solid #C0C0C0;
	border-bottom:1px solid #DDDDDD; 
	margin-top: 10px;
	padding-top: 15px;
}

#dbl{
	width:50px;
	float:left;
}
#dblb{
	width:40px;
	background-color:#EFF6FA;
	color:#666666;
	text-align: center;
	margin-top: 7px;
	height:23px;
	line-height: 23px;
}

#dbr{
	overflow: hidden;
	}
#huati{
	font-size: 13px;
	color:#666666;
}
#huati a{
	text-decoration: none;
	color:#336699;
}
#title{
	color:#336699;
	font-weight: bold;
	margin-top:4px;
}
#jianjie{
	margin-top:10px;
}
.neirong{
	padding-top: 16px;
	
}
.neirong img{
	float:left;
}
.neirong div{
	float:right;
	width:377px;
	line-height: 23px;
}
.neirong div a{
	text-decoration: none;
	color:#336699;
}
#dbrb{
	margin-top:20px;
	}
#dbrb a{
	text-decoration: none;
	color:#A9A9A9;
	margin-right:5px;
	margin-left:2px;
}

							






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





2018-06-18 不知道写的怎么样,还可以如何简便些
trap



不知道写的怎么样,分很多选择器感觉有点乱,还可以如何简便些。 使用a:link的时候总是改变不了超链里的字体颜色和大小,不知道为什么,干脆就没用。 老师大佬评价一下
<div class="top">
	<img src="1.png"/>
   	<a href="#"><strong><span>最新动态</span></strong></a>
	<a href="#" class="r"><span>设置</span></a>
	<img class="r" src="2.png"/>
</div>
<hr>
 	<img class="l" width="50" height="50" src="4.png">
  	<span>热门问答,来自</span> 
  	<span>机械</span>  	
  	<img class="r" src="3.png">
	<a href="#">关注话题</a>
<div id="abs">
	<a style="color:blue" href="#"><strong>人类史上令人叹为观止的极限精度制造成果有哪些?</strong></a>
	<br><br>
	<div class="sp">
		<span><b>Vincent Fu,</b></span>
		<span>Materials Science,Phd</span>
	</div>
</div>
	<img width="50" src="5.png"/>
	<p class="h1">6551</p>	

<div class="center">
	<img class="l" width="300" height="168" src="6.png">
	<span>说到精度,就不得不提在材料学中最重要的一个方面:表征。要
	研究一种材料性能,握在手里把玩是远远不够的,就算你拿出
	放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓
	一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),
	如果要获得更深...</span>
	<a href="#">显示全部</a>
</div>
<div class="bottom">
	<img src="7.png">
	<span>关注问题</span>
	
	<img src="8.png">
	<span>867条评论</span>

	<img src="9.png">
	<span>作者保留权力</span>
</div>
<hr>

<style>

	a{text-decoration:none;}
 	.top a{
		color:black;
		font-size:10px;
		font-family:宋体;
	}

 	img{margin-right:10px;}

  	.l{
   		 float:left;
  	}
 	 .r{
  		  float:right;
  	}
	#abs{
		margin-top:6px;
		font-size:80%;
  	}
	.sp{
		position:absolute;
		left:72px;
	}

	.h1{
		position:absolute;
		top:98px;
		left:15px;	
	}
	.center{
		height:180px;
           	width: 100%;
		margin-top:-10px;
		margin-left:70px;
	}
	.bottom{
		color:grey;
		font-size:5px;
		margin-left:70px;
	}
	.bottom img{ 
		margin-top:5px;
		margin-left:10px;
		margin-right:5px;
	}
</style>

							






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





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

上传截图