2017百度前端技术学院习题-04

习题任务04

收获:

1.垂直水平居中的解决办法:绝对定位的方法.

2.对于浮动的理解

3.border-radius的作用及顺序

4.代码如下

04-main.css

.box{width: 400px;height: 200px;background-color: #ccc;position: absolute;top: 50%;margin-top: -100px;left: 50%;margin-left: -200px;
}
.circle01{width: 50px;height: 50px;background-color: #fc0;border-radius: 0 0 100% 0;
}
.circle02{position: relative;top: 50%;left: 100%;margin-left: -50px;width: 50px;height: 50px;background-color: #fc0;border-radius: 100% 0 0 0;
}

04.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位与居中问题</title><link rel="stylesheet" href="04-main.css">
</head>
<body><div class="box"><div class="circle01"></div><div class="circle02"></div></div>
</body>
</html>

2017百度前端技术学院习题-04相关推荐

2017百度前端技术学院习题-06
习题任务-06 收获: 1:排版的问题 2.更加熟练样式的设置代码如下(坚持下去) main.css body{background-color: #888; } .page{width: 980p ...
2017百度前端技术学院习题-05
习题任务-05 收获: 1:加深了对rem布局的认识(width设置用的百分比) 2.z-index的作用 3.加深对绝对定位的认识(位置依据浏览器左上角进行定位) 4.代码如下 05-reset.c ...
2017百度前端技术学院习题-03
习题任务03 收获: 1.定位与浮动的异同 2.注意编码的格式,及编码的名称 3.新知识: align-items布局,弹性布局 4.习题任务代码如下: 03-main.css html {font- ...
百度前端技术学院--零基础--第二天给自己做一个在线简历吧
百度前端技术学院–零基础–第二天给自己做一个在线简历吧课程目标通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念任务描述用code ...
学计算机前端技术学院,百度前端技术学院(任务)
百度前端技术学院这一期高档班的标题列表在:ife/2015_spring/taskatmaster·baidu-ife/ife·GitHub下面的高档班(趁便吐槽一下知乎的链接无法识别URL中文锚点 ...
百度前端技术学院—斌斌学院题库转载 cristina-guan
Cristina_Guan https://github.com/CristinaGuan 博客园首页新随笔联系订阅管理随笔 - 34 文章 - 3 评论 - 2 百度前端技术学院-斌 ...
百度前端技术学院—斌斌学院题库
任务一:零基础JavaScript编码(一) 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决 ...
百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

2017百度前端技术学院习题-04

习题任务04

收获:

2017百度前端技术学院习题-04相关推荐

最新文章

热门文章