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

<!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. QML MultiPointTouchArea

    MultiPointTouchArea为qml中的多点触摸提供了最基本.最重要的支持,它与TouchPoint及相关域结合,可以说是qml中多点触摸的基石. MultiPointTouchArea是不 ...

  2. 面试题：android用户注册代码 密码需要加密传输吗

    答案是肯定的,至少比明文好 客户端注册和登录的时候:一个可行的方法是,客户端提交 md5(password) 密码(如上所述,此方法只是简单保护了密码,是可能被查表获取密码的). 注册的时候:服务端数 ...

  3. 人大金仓KCI

    #include "bin/libkci.h" static void exit_nicely(KCIConnection *conn) { KCIConnectionDestor ...

  4. MySQL查询优化一例——也说说 Using intersect

    生产上面有一条sql查询很慢,需要7到8秒左右,简化之后的sql如下所示: SELECT mingxi.* FROM ( SELECT btjc01.id, department.`name` AS ...

  5. Linux内存含义

    关于Linux的内存,首先要先知道各个部分的含义 1. 命令:  free -m     // Mb 显示 1,total:物理内存实际总量2,used:这块千万注意,这里可不是实际已经使用了的内存哦 ...

  6. centos7利用acme.sh获取Let's Encrypt的永久免费ssl证书并配置网站域名https访问

    acme.sh介绍:https://github.com/Neilpang/acme.sh/wiki/%E8%AF%B4%E6%98%8E github:https://github.com/Neil ...

  7. mysql数据库之事务和隔离级别

    事务和并发执行目的: 1.提高吞吐量,资源利用率 2.减少等待时间 连接管理器:接受请求/创建线程/认证用户/建立安全连接 并发控制:任何时候,只要有两个以上的用户试图读写同时一个文件/数据,都会带来 ...

  8. mysql基础知识之数据类型与约束

    一.约束 作用: 保证数据的完整性和一致性表的设计 1.not null 和 default not null 是放在最后用来约束 前面 数据类型的 (在原有基础上本来可以主键后面可以为空,但是一旦在 ...

  9. 修改opencart extension插件代码后无法重新安装的解决办法

    有时我们在为opencart安装一些插件后,发现有些地方需要细微的调整,然后去修改插件代码重新安装,但是却没有成功.开始有点怀疑是不是不能修改代码,但也不至于啊,不然开发者怎么制作插件.应该是哪里出了 ...

  10. nginx 设置反向代理

    一.多个路径指向同一ip的不同服务 参考地址:https://www.cnblogs.com/hanmk/p/9289069.html 编辑nginx.conf配置文件,新增加一个server模块,或 ...