慕课网 前端就业班 float浮动 编程练习 3-5

3-5 编程练习

我们学习了浮动的知识,那么我们来实现图文混排的效果如下图所示:
慕课网 前端就业班 float浮动 编程练习 3-5_第1张图片
图片素材:
图1
图2

任务

1、首先给大的容器content设置基本样式,宽度为810px,高度自适应,居中显示,字体为微软雅黑,行高为24px,边距、边框等设置。
2、想要实现文字环绕图片,实现图文混排的形式,我们给图片实现浮动,很明显我们可以给第一个图片添加左浮动,第二个图片实现右浮动。
3、到这一步我们虽然实现了图文混排的效果,但是字体离图片还是太近了,所以需要添加一些边距来美化一下页面。

参考代码


<html>
<head>
    <meta charset="utf-8">
    <title>慕课网title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.content{
			width: 810px;
			margin:0 auto;
			border: 1px #000 solid;
			font-family: "微软雅黑";
			line-height: 24px;
			padding: 10px;
		}
		.img01{
			float: left;
			margin-right: 10px;
		}
		.img02{
			float: right;
			margin-left: 10px;
		}
	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>

你可能感兴趣的:(其他)