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

<!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. Android 可单选多选的任意层级树形控件

    花了几天研究了下鸿扬大神的博客<Android打造任意层级树形控件,考验你的数据结构和设计>,再结合公司项目改造改造,现在做个笔记. 先看看Demo的实现效果.首先看的是多选效果 再看看单 ...

  2. 锁、分布式锁、无锁实战全局性ID

    1.为什么要使用锁 当发生并发时,会产生多线程争夺一个资源,为保证资源的唯一性. JVM锁:对象锁,死锁,重入锁,公平锁,偏向锁 分布式锁:数据库 nosql .zookeeper 面试题:如何排查死 ...

  3. 给easyui datebox扩展一个清空按钮,无侵入

    /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.ext ...

  4. ML-逻辑回归推导

    认识 是一个经典的二元(y=0 或 y=1) 分类算法, 不是回归 输入特征还是线性回归, 输出是 [0,1] 的一个概率值, 其判别函数的形式为: \(P(y=1|x) = \frac {1}{1+ ...

  5. spring mybatis错误问题该怎么解决

    1.org.apache.ibatis.exceptions.PersistenceExc org.apache.ibatis.exceptions.PersistenceException: ### ...

  6. python 的 encode 、decode、字节串、字符串

    一.摆个图 DJ  DJ  DJ   Decode. J 解码 首先得知道字符串有哪些编码格式,至于为什么会有这么多的编码格式,以后再了解更新. 1.ASCII 占1个字节,只支持英文 2.GB231 ...

  7. MySQL 加锁和死锁解析

    目录 产生死锁的必要条件 锁是加在那里的? 操作与加锁的对照关系 Insert Delete Update GAP锁 什么时候加next-key lock? Insert Intention Lock ...

  8. linux系统启动报错：[contains a file system with errors, check forced]的解决方法参考

    1.解决参考一Press enter for maintenance(or type Control-D to continue):/dev/sda3 contains a file system w ...

  9. 如何关闭/禁用.NET JIT调试对话框

    当.NET程序有未处理的异常时,您可能会希望关闭出现的调试对话框.下面有两个选项: 1.启用JIT调试的注册表项 对于包含托管代码的应用程序,公共语言运行库将显示类似于JIT附加调试器的对话框.控制此 ...

  10. 2090. 「ZJOI2016」旅行者 分治，最短路

    2090. 「ZJOI2016」旅行者 链接 loj 思路 \((l,mid)(mid+1,r)\).考虑跨过mid的贡献. 假设选的中间那条线的点为gzy,贡献为\(dis(x,gzy)+dis(g ...