4-3练习，老师请看看还有没有哪里可以优化

首页课程实战体系课手记专栏慕课教程

4-3练习，老师请看看还有没有哪里可以优化

来源：4-3 编程练习

qq_找回我丢失的记忆_0

2017-12-18 14:18:13

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>4-3</title>

<style type="text/css">

*{margin: 0;padding: 0;}

html body{width:100%;height:100%;}

.per{width:100%;

height:4043px;

background:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png") no-repeat top center;

}

.ldui{width:220px;

height:260px;

background:red;

text-align:center;

position: fixed;

top:50%;

bottom: 50%;

margin-top:-130px;

font-family: "微软雅黑";

color: white;

}

.rdui{

width:220px;

height:260px;

background:blue;

text-align:center;

position: fixed;

right: 0;

top: 0;

bottom: 0;

margin: auto 0;

font-family: "微软雅黑";

color: white;

}

h1{text-align: left;}

h1:nth-child(2){margin-bottom:15px;}

p{text-align: left;

margin-top: 15px;}

.le{width: 95%;

position: absolute;/*相对于最近定位祖先元素进行移动*/

top: 25px;

left: 12px;}

</style>

</head>

<body>

<div class="per">

<div class="ldui">

<div class="le">

<h1>Web</h1>

<h1>前端工程师</h1>

<hr>

<p>职业路径 ></p>

</div>

</div>

<div class="rdui">

<div class="le">

<h1>Java</h1>

<h1>工程师</h1>

<hr>

<p>职业路径 ></p>

</div>

</div>

</div>

</body>

</html>

写回答

1回答

小于飞飞

小于飞飞

2017-12-18

已采纳

根据作业要求，完成不错，加油！.le 也可不适用定位，使用padding或margin来实现。

0

hq_找回我丢失的记忆_0

h 非常感谢！

h017-12-18

共1条回复

0 学习 · 36712 问题

相似问题

4-3编程练习老师请看看代码有没有哪里可以优化的

回答 2

4-3编程练习请老师帮助完善

回答 7

4-3练习

回答 3

4-3编程练习麻烦老师检查下看看还有没有能优化的地方

回答 1

老师看看我的为什么没有剧中啊？

回答 3

打开慕课网App查看更多内容