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

<!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. 自定义组件实现双向绑定v-model

    自定义组件实现 v-model 双向绑定,首先要先明白 v-model,这个指令到底实现了什么? v-model实际做的事情就是:传入一个value属性值,然后监听input事件返回一个值,用该返回值 ...

  2. SUCTF 2018——Anonymous（php匿名函数 \x00lambda_）

    题目地址:http://45.76.173.177:23334/ <?php $MY = create_function("","die(`cat flag.php ...

  3. VUE+ElementUI 搭建后台项目（一）

    前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...

  4. FTP服务搭建配置笔记

    1.什么是文件共享服务? 简单来说就是文件域存储块设备可以共享给他人使用. 1.1 实现文件共享服务的三种方式 FTP:属于应用层服务,可以跨平台使用 NFS:属于内核模式,不可以跨平台使用 Samb ...

  5. Linux的网络参数设置

    前面讲解了lLinux 的IP组成,下面就讲一下Linux的网络设置和数据传递. 其实这地方对运维的人员来说,不会要精通,但还是要了解.必要时刻还会用到的 电脑之间数据的传递: 数据的传递要分为下面几 ...

  6. 十六、python面向对象基础篇

    面向对象基础: 在了解面向对象之前,先了解下变成范式: 编程范式是一类典型的编程风格,是一种方法学 编程范式决定了程序员对程序执行的看法 oop中,程序是一系列对象的相互作用 python支持多种编程 ...

  7. 目标检测论文解读13——FPN

    引言 对于小目标通常需要用到多尺度检测,作者提出的FPN是一种快速且效果好的多尺度检测方法. 方法 a,b,c是之前的方法,其中a,c用到了多尺度检测的思想,但他们都存在明显的缺点. a方法:把每图片 ...

  8. 开始Golang之旅了

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

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

  10. PHP原生分页的编写

    <?php $link=mysql_connect("localhost","root","admin",'news')or die( ...