大体效果我已经实现了，还有一些想法想问一问
来源：4-13 编程练习
TeacherZhe
2020-10-08 09:17:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网</title>
<style>
p{
line-height:20px;
/*text-align: justify;*/
}
#img01{
float:left;
width:1280px;
height:256px;
}
#img02{
float:right;
width:1280px;
height:256px;
}
#div_all{
border: dashed;
padding: 60px
}
#content{
width: 1350px;
/*align-self: center;*/
}
</style>
</head>
<body>
<div id="div_all">
<div id="content">
<img src="http://climg.mukewang.com/59c8742e0001bc9607120172.jpg" id="img01">
<p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
<p>慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。</p>
<p>4月2日，国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解，在此次上线的版本中，慕课网新增了课程历史记录、相关课程推荐等四大功能，为用户营造更加丰富的移动端IT学习体验。</p>
<img src="http://climg.mukewang.com/59c874560001779307120172.jpg" id="img02">
<p>老师来自于各大IT公司重要技术岗位，拥有丰富的实战经验。语言平实、通俗易懂，更接地气，传授最有价值的经验之谈。课程内容注重实用性，不仅让学员通过学习能够做出产品，而且学习过程中掌握的方法技巧在实际工作中用得上，能够切实帮助学员提升工作技能。<p>
<p>慕课网的绝大多数课程都经过了专业的后期制作，为课程内容匹配了个性化的视觉效果，帮助学员更好地理解课程内容，增加学习的乐趣。</p>
</div>
</div>
</body>
</html>
这是我的代卖，我花了很多时间去调图片的尺寸，来让文字不至于一下全显示在图片右边。这样子调整是不是太过愚蠢？有其他设置方法吗？然后div_all的margin:60px这个参数也是调了半天才让content左右上下都对称，有没有什么好办法高效完成？
1回答
-
时间，
2020-10-09
同学，你好。
1、可以设置margin:0 auto值使content实现居中效果
2、不需要设置图片的大小，使用默认大小即可，content的width为810px，并设置border值
参考代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网</title> <style type="text/css"> .content{ width:810px; border: 1px grey solid; padding: 10px; line-height: 1.7em; text-align: justify; margin: 0 auto; } .img01{ float: left; margin: 5px; } .img02{ float: right; margin: 5px; } </style> </head> <body> <div class="content"> <img src="http://climg.mukewang.com/59c8742e0001bc9607120172.jpg" alt="" class="img01"> 慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。<br/><br/> 慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。<br/><br/> 4月2日，国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解，在此次上线的版本中，慕课网新增了课程历史记录、相关课程推荐等四大功能，为用户营造更加丰富的移动端IT学习体验。<br/><br/> <img src="http://climg.mukewang.com/59c874560001779307120172.jpg" alt="" class="img02"> 老师来自于各大IT公司重要技术岗位，拥有丰富的实战经验。语言平实、通俗易懂，更接地气，传授最有价值的经验之谈。课程内容注重实用性，不仅让学员通过学习能够做出产品，而且学习过程中掌握的方法技巧在实际工作中用得上，能够切实帮助学员提升工作技能。<br/><br/> 慕课网的绝大多数课程都经过了专业的后期制作，为课程内容匹配了个性化的视觉效果，帮助学员更好地理解课程内容，增加学习的乐趣。 </div> </body> </html>如果我的回答解决了你的疑惑，请采纳！祝学习愉快~~~~
0
相似问题