CSS系列教材（二十九）- 练习

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

工具版本兼容问题

用到的图片在右侧

纠

步骤 1 :

练习-综合练习1

edit 顶折

纠问

CSS系列教材（二十八）- 布局 - 块之间的空格

CSS系列教材（三十）- 练习 - 综合性练习2

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

问答区域

2020-09-16 class="show1"为什么加个1，整个边框颜色都不见了

forestfire

关于前端部分-CSS-综合性练习1 的提问

求大佬解答

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-08-26 做了快2小时

白枫

关于前端部分-CSS-综合性练习1 的提问

效果应该挺接近了

<!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 我不知道我怎么凑出来的，哈哈

asdhiodhw

关于前端部分-CSS-综合性练习1 的提问

我不知道我怎么凑出来的，哈哈

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<html>
<body>

<style>
div.top_nav{
margin-left:20;
width:60%;
padding-bottom:15;
border-bottom:1px solid gray;
}
div.right{
margin-left:700;
}
div.left{
float:left
}
div.middle{
position:relative;
}
div.im{
position:position;
padding:15 20;
}
div.im1 font{
width:20;
padding:2 5;
margin-left:20;
background-color:#E0FFFF;
font-size:80%;
}
div.rig{
position:relative;
top:15;
left:0;

}
div.cc{
float:left;
}
img.rightI{
margin-left:458;
}
div.blue{
margin-left:50;
color:LightSeaGreen;
font-weight:bold ;
font-size:90%
}
div.name{
font-size:80%;
}
img.ff{
float:left;
margin-right:20px;
}
div.te{
width:770;
margin-left:20;
line-height:1.5;
}
div.bot{
margin-top:20;
margin-left:70;
}
span.aw{
margin-left:10;
}
div.ver{
margin-left:70;
margin-top:40;
width:700;
border:solid 1px Gainsboro;
}
</style>

<div class="top_nav">
<div class="left">
<img src="1.png"/>
<span><font><strong>最新动态</strong></font></span>
</div>

<div class="right">
<img class="top_right" src="2.png"/>
<span class="top_right"><font>设置</font></span>
</div>
</div>

<div class="middle">
<div class="cc">
<div class="im">
<img class="top_right" src="4.png"/>
</div>

<div class="im1">
<font>6533</font>
</div>
</div>

<div class="rig">
<span>热门回答，来自 机械 关注话题</span>
<img class="rightI" src="3.png">
<div class="blue">人类史上令人叹为观止的极限精度制造成果有哪些？</div>
<div class="name"><b>Vincent Fu</b>,Materials  Science,PhD</div>
<img class="ff" src="6.png">
<div class="te">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，
握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，
而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
<a href="#nowhere" style="color:MediumAquaMarine; text-decoration:none; ">显示全部</a></div>
<div class="bot">
<img  src="7.png"><span class="aw">关注问题</span>
<img  src="8.png"><span class="aw">3824条评价</span>
<img src="9.png"><span class="aw">坐着保留权利</span>
</div>

<div class="ver">
</div>
</div>

</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-07-07 终于做出来了

2667227335f

关于前端部分-CSS-综合性练习1 的提问

看着还行

<html>
<head>
<meta type="text/html" charset="UTF-8">
	<style>
		div.v0{
		font-family:"宋体";
		border:solid 2px lightgray;
		width:650px;
		margin:0 auto;
		}
		div.v1{
		margin:0 auto;
		width:600px;
		height:30px;
		border-bottom:solid 2px lightgray;
		}
		
		span.s1,s2{
		float:left
		padding:5 0;
		}
		span.s3{
		float:right;
		padding:5 0;
		}
		span.s4{
		float:right;
		padding:10 0;
		}
		
		div.v2{
		position:relative;
		margin:0 auto;
		width:600px;
		height:80px;
		
		}
		span.s5{
		position:absolute;
		color:gray;
		}
		span.s6{
		position:absolute;
		left:200;
		color:lightblue;
		}
		span.s7{
		color: rgb(12, 130, 177)
		}
		span.s8{
		position:absolute;
		top:45;
		left:0;
		}
		span.s9{
		position:absolute;
		top:45;
		left:0;
		color:lightblue;
		}
		p.p1{
		position:absolute;
		top:30;
		left:50;
		}
		
		div.v3{
		position:relative;
		margin:0 auto;
		width:600px;
		height:140px;
		font-family:宋体;
		}
		div.v3_1{
		float:left;
		margin:0 20 0 0;
		}
		div.v3_2{
		line-height:150%;
		font-size:13px;
		overflow:hidden;
		
		
		}
		
			div.v4{
		position:relative;
		margin:0 auto;
		width:600px;
		height:50px;
		color:lightgray;
		text-align:center;
		}
		
	</style>
</head>
<body>
<div class="v0">

	<div class="v1">
		<span class="s1">
			<img src="1.png"/>
		</span>
		<span class="s2">&nbsp&nbsp&nbsp最新动态</span>
		<span class="s3">&nbsp&nbsp&nbsp设置</span>
		<span class="s4">
			<img src="2.png"/>
		</span>
	</div>
	
	<div clear="both"></div>
	
	<div class="v2">
		<span><img src="4.png"/></span>
		<span class="s5">热门回答，来自机械</span>
		<span class="s6">关注话题</span>
		<span class="s7">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
		<span class="s8"><img src="5.png"/></span>
		<span class="s9">6511</span>
		<p class="p1">Vincent	Fu,	<b>Materials  Science</b>, PhD</p>
	</div>
	
	<div class="v3">
		<div class="v3_1"><img src="6.png"/></div>
		<div class="v3_2">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a href="#" style="text-decoration:none">显示全部</a></div>
	</div>
	
	<div clear="both"></div>
	
	<div class="v4" >
		<span class="s10">
			<img src="7.png"/>关注问题&nbsp&nbsp&nbsp&nbsp
			<img src="8.png"/>867条评论&nbsp&nbsp&nbsp&nbsp
			<img src="9.png"/>作者保留权利
		</span>
	</div>
	
</div>

</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

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

上传截图