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

<!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. 响应式开发 纯CSS实现隐藏菜单栏

    // 将要隐藏的菜单设置 display: block; // 然后在菜单上面设置一个点击选项,如“菜单”<label for="toggle-checkbox" id=&q ...

  2. vue+element 表格按需合并

    这个功能难度感觉一般般吧,记录一下,以后碰到了直接来复制,懒得再写了 效果如下: 前6列是合并,后面的有几行,动态显示几行 重点是在数据处理上面做文章,合并列大家都会,数据处理呢?这样来处理, 我们拿 ...

  3. 完整的房间类游戏解决方案AiJ

    介绍 AiJ是一套完整的房间类游戏解决方案,支持无限水平扩展来满足更大的人数承载,并且提供了良好的调试接口. 主要模块包括: 注册中心 大厅服务 游戏服务 亲友圈服务 运营管理系统 CocosCrea ...

  4. 外汇盈利EA

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  5. 未能加载文件或程序集“Spire.Pdf, Version=4.8.8.2020, Culture=neutral, PublicKeyToken=663f351905198cb3”或它的某一个依赖项。未能授予最小权限请求

    问题:运行程序执行到代码报错:未能加载文件或程序集“Spire.Pdf, Version=4.8.8.2020, Culture=neutral, PublicKeyToken=663f3519051 ...

  6. RMAN笔记

    Rman常用命令 Preview选项 1)    显示用于还原system表空间数据文件的备份文件 RMAN> restore datafile 2 preview; 2)    显示用于还原特 ...

  7. ETL DAG调度策略

    1.目前etl的fetch task策略是基于任务子孙任务数和任务优先级获得task list 2.然后遍历task list 查看任务是否具备执行条件 集群资源校验(yarn/hdfs)<如果 ...

  8. eclipse自定义自动补全语句

    1. Windows-->preferences 2. 弹出框选择, Java-->Editor-->Templates-->New 3. 弹出框输入, 1.Name--名字, ...

  9. Ajax请求设置csrf_token

    方式1 通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送. $.ajax({ url: "/cookie_ajax/", type: ...

  10. win10锁屏壁纸文件夹位置

    Win10默认系统下载的壁纸怎么下载?在哪里找出来呢?首先我们要把系统的锁屏壁纸要设置为Windows聚焦才会自动从微软的服务器上去下载壁纸.这些都是随机下载的.每个人的都Win10 都有可能不一样. ...