因为其中有图片，所以就给有图片的位置加了边框和设置了大小，这样哪怕图片不显示也可以知道在哪里。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

        <title>Task1-3</title>

        <link rel="shortcut icon" href="/sjq_ico.png" />

    <style type="text/css">

        html,body,div{margin:0;padding: 0px; }

        #main_page{border: solid 1px #999;background-color: #eee;overflow: auto; zoom:1;position: relative;margin: 20px;padding: 20px 0px 20px 20px;}

        #main{width:100%; float:left;}

        #main #body{margin:0px 160px 0px 220px; border: solid 1px #999;background-color: #fff;}

        #left{width:200px; float:left; margin-left:-100%;background-color: #fff;border: solid 1px #999;}

        #right{margin-left:-140px;float:left;width: 120px; border: solid 1px #999;background-color: #fff;}

        #body .team_de{ padding: 20px;}

        .image3{ padding: 20px 20px 0 20px;}

        .image3 img {margin-bottom: 20px;}

        .left_image{float: left;margin: 0px 20px 20px 20px;}

        .left_text{ float: left;}

        .left_1{padding-right: 20px;}

        img{display:block;border: solid 1px #999;width: 80px;height: 80px;}

    </style>

</head>

<body>

    <div id="main_page">

        <div id="main">

            <div id="body">

                <div class="team_de">

                    <h1>团队简介<h1>

                    <h2>队名:<em>小明</em></h2>

                    <p>刚开始只是想随便起一个名字用下，因为起名字真是一个很累的技术活。比如要好听啊，潮啊，能体现个性啊等等，所以就先用队友的小名：小明好了。队员人数达标之后，我一激动，就点击了创建团队......当我发现队名不能更改的时候，我的内心是无比的悲痛的，这名字太俗了吧...

                    </p>

                    <h2>队友</h2>

                    <p>因为我太想参加百度前端技术学院了，但是人数又不够，所以就拉了两个人，嘿嘿...一个是我师弟，一个是我的好友.在此感谢他们的加盟 </p>

                    <i>we are coming!</i>

                </div>

            </div>

        </div>

        <div id="left">

            <div class="left_1">

                <div class="left_image"><img src="img/lena.png" alt="team logo"/></div>

                <div class-"left_text"><p>we are the best! Go! Go! </p></div>

            </div>

        </div>

        <div id="right">

            <div class="image3">

                <img src="img/parrot.png" alt="team logo"/>

                <img src="img/camera.png" alt="team logo"/>

                <img src=" " alt="team logo"/>

            </div>

        </div>

    </div>

</body>

</html>

百度前端技术学院-task1.3源代码的更多相关文章

  1. 百度前端技术学院-task1.8源代码以及个人总结

    通过这次任务的练习我学到了很多,现将所学到的以及遇到的问题总结如下. 源码地址:http://pan.baidu.com/s/1kVB2VZL 下面出现的代码,都是摘自这个上面的源码 1.终于明白了a ...

  2. 百度前端技术学院-task1.10源代码

    任务十的源代码,其实有github的,但就是不知道怎么弄,近期会学会的.在IE和firefox上检测运行良好. <!DOCTYPE html> <html lang="en ...

  3. 百度前端技术学院-task1.8源代码

    主要是不采用bootstrap实现网格. 遇到的困难及注意点如下: 1.[class*='col-'],这个是选择col-开头的类,第一次用,以前也只是看到过: 2.媒体查询,总觉得容易理解错误.@m ...

  4. 百度前端技术学院-task1.4源代码

    任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案. 动手 ...

  5. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

  6. 百度前端技术学院task1 总结

    1.居中:当使用text-align或者vatical-align无法达到居中的时候,如果知道元素的大小,可以采用先设为left或right为50%,再设置margin-left或者margin-ri ...

  7. 百度前端技术学院（IFE）2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  8. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  9. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

随机推荐

  1. 英语pyrophane火欧珀pyrophane单词

    pyrophane火欧泊产量稀少,以至于大多数采到宝石的矿主不愿意将它进行切割,即便随形的切割技巧比刻面需要更多的经验也要将其加工成随形,因为这种琢型最能保重.但是与黑欧泊为了保证火彩只能切割成蛋面和 ...

  2. jQuery Validate验证框架详解，提交前验证

    现在都用h5表单进行验证了,以下方式仅做回忆 https://www.runoob.com/jquery/jquery-plugin-validate.html <!DOCTYPE HTML P ...

  3. Odoo报表的report标签和报表格式定义

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826329.html 一:Report标签     report标签可用于定义一条报表记录.属性有: 1) ...

  4. Nginx Rewrite相关功能-ngx_http_rewrite_module模块指令

    Nginx Rewrite相关功能-ngx_http_rewrite_module模块指令 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  5. 十九、Python之socket编程

    socket(套接字)就是建立连接,发送,接收.大部分网络协议都是建立在socket之上的,例如:http,ftp,smtp等等     socket用于描述IP地址和端口,是一个通信链的句柄.应用程 ...

  6. springmvc多环境配置-profiles

    1 pom.xml 添加 profiles 标签 <profiles> <!--pro 线上环境--> <profile> <id>hdapp_pro& ...

  7. 调试CEF3程序的方法

    CEF3多进程模式调试时按F5只会启动调试Browser进程,要调试Renderer进程就要让进程在启动时就暂停并附加进程. 所幸google早就想到了这一点,chrome的命令行参数就可以办到, - ...

  8. Resource Site

    GameDevMarket.net Collection of Music, Sound effects (sfx), 2D/3D/GUI Art. http://gaurav.munjal.us/U ...

  9. 【java异常】Unexpected error occurred in scheduled task. java.lang.StackOverflowError: null

    可能是栈溢出(StackOverFlow) 背景:我用定时器new东西 原因:频率太快了好像!

  10. Android 开发基础入门篇: 复制一个工程作为一个新的工程

    说明 咱们做项目很多时候都需要复制一份工程出来作为一个新的工程 把第一节的工程拷贝到这一节 修改工程名字 打开软件导入此工程 修改包名 第一节的时候说了,一个APP一个包名 自行添加修改 自行修改 自 ...