task_1_3_1

最新推荐文章于 2022-11-03 10:47:16 发布

classmonster

最新推荐文章于 2022-11-03 10:47:16 发布

阅读量327

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/classmonster/article/details/68934653

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task_1_3_1</title>
    <link type="text/css" rel="stylesheet" href="task_1_3_1.css" media="all">
</head>
<body>
    <div>
        <section id="part1">
            <img src="grouplogo.jpg" alt="logo" id="group">团队名称
        </section>
        <div id="tableContainer">
            <div id="tableRow">
            <article id="part2">百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。
                学院组织了一批百度在职工程师，精心编写了数十个实践编码任务，将技术知识点系统有机地串联在各个充满趣味与挑战的任务中，同学们通过实际地编码练习来掌握知识，再辅以互相评价、学习笔记等方式，加深对于学习内容的理解。
                在过去的三年中，百度前端技术学院累积吸引了上万名同学参加，并且有数十名同学在学习后，顺利加入了百度，成为了百度的前端工程师。
                2017年新学期，我们在保留原有的已经经历过实践历练的模式下，又加入了更多的工程师导师资源，以及新的内容，希望能够帮助有志于通过技术改变生活的同学们掌握到希望学到的技术。</article>

            <aside id="part3">
                <img src="individuallogo.jpg" alt="logo" class="individual">
                <img src="individuallogo.jpg" alt="logo" class="individual">
                <img src="individuallogo.jpg" alt="logo" class="individual">
                <img src="individuallogo.jpg" alt="logo" class="individual">

            </aside>

        </div>
    </div>
</body>
</html>

CSS

/*body{*/
    /*background:#eee;*/
/*}*/
div{
    margin:20px 20px 20px 20px;
    background:#eee;
    border:#999 thin solid ;
}
#part1
{
    position:absolute;
    padding:20px 0 20px 20px;
    margin:20px 20px 20px 20px;
    /*border:#999 thin solid ;*/
    width:200px;
    height:120px;
    background: white ;
}
#group{
    float:left;
    margin-right:20px;
}
#tableContainer
{
    border-spacing:20px;
    margin:0 20px 20px 20px;
    display:table;
    position:relative;
    left:240px;
    border:none;
}
#tableRow
{
    display:table-row;
}
#part2
{
    /*float:top;*/
    display:table-cell;
    width:auto;
    margin:20px 20px 20px 20px;
    padding:20px 20px 20px 20px;
    background:white top left;
    border:#999 thin solid ;
}


#part3
{
    display:table-cell;
    margin:20px 20px 20px 20px;
    background:white top left;
    border:#999 thin solid ;
    width:120px;
}

.individual
{
    padding:20px 20px 20px 20px;
}