web前端开发2

接下来我们要进行一些实例

遵循由大到小依次构建的原则

据图片我们可以知道,我们要用div先构建上面的绿色盒子

又因为div为块标签,所以当我们在写div标签时会出现在绿色盒子下面

然后我们在调节下面的盒子,用margin(外边距)改变左边与上边的距离使盒子居与正中间

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="green"></div>
<div id="content"></div>
</body>
</html>
#green {
    width: 100%;
    height: 360px;
    background: #00b38a;
}

#content {
    width: 700px;
    height: 400px;
    background: #fff;
    margin: -200px auto 60px;
    border: 1px lightgrey solid;
}

然后我们继续完成拉勾图片的设置

因为拉勾图片位于绿色盒子内,所以我们可以直接在绿色盒子内插入图片,然后再调节它的距离

但这只是我们当前网页的位置,当网页缩小时.图片的位置也会相应的改变

所以该方式错误

我们可以在中间盒内插入该图片,此时图片会出现在白色盒子左上角,然后直接让图片上浮就可以实现

三种定位
      固定定位:相对于浏览器窗口定位,翻页时位置不变
      相对定位:相对于原本文档流中的位置定位,仍然占据原位置
      绝对定位:相对于离它最近的已定位父级进行定位,一直找到浏览器窗口为止
根据上面定位的定义,我们可以知道绝对定位最适合实现
我们可以先在content内加入定位,然后就可以绝对定位,相对于content定位
又因为图片为行内标签,所以我们要加入(inline-block),使它能调节宽高
#content {
    width: 700px;
    height: 400px;
    background: #fff;
    margin: -200px auto 60px;
    border: 1px lightgrey solid;
    position: relative;
}

#logou {
    display: inline-block;
    width: 300px;
    height: 30px;
    background: lightblue;
    position: absolute;
    top: -85px;
}

然后我们在content中构建2个盒子来写登录与注册的代码

#contentL {
    width: 290px;
    height: 277px;
    /*background: lightcoral;*/
    position: absolute;
    left: 70px;
    top: 44px;
}
#contentR {
    width: 150px;
    height: 150px;
    background: lightpink;
    position: absolute;
    right: 55px;
    top: 130px;
}

中间在加入分割线,可以直接使它的宽度为0,直接设置边框

分割线中间的or可以通过span标签设置

然后通过定位,改变它的上下距离

#or {
    width: 0;
    height: 326px;
    border: 1px dashed lightgrey;
    position: absolute;
    left: 420px;
    top: 44px;
}

#or > span {
    position: absolute;
    left: -8px;
    top: 150px;
    background: #fff;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="green"></div>
<div id="content">
    <a href="" id="logou"><img
            src="https://lagou-zhaopin-fe.lagou.com/fed/lg-passport-fed/image/20210628/1624876721800.png"></a>
    <div id="contentL">
    </div>
    <div id="or"><span>or</span></div>
</div>
</body>
</html>

拉勾网的整体框架就基本构成了

 
posted @ 2021-11-08 19:35  吴萌  阅读(33)  评论(0)    收藏  举报