百度前端技术学院-task1.4源代码
任务描述
- 实现如 示例图（点击打开） 的效果
- 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。
任务注意事项
- 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。
- 动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
- 注意测试不同情况，尤其是极端情况下的效果。
- 调节浏览器宽度，灰色元素始终水平居中。
- 调节浏览器高度，灰色元素始终垂直居中。
- 调节浏览器高度和宽度，黄色扇形的定位始终准确。
- 其他效果图中给出的标识均被正确地实现，错一项扣一分。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="task4" />
<meta name="author" content="sjq,fm,qcl" />
<title>task4-center</title>
<style>
html.body{margin: 0px;padding: 0px;height: 100%} .rect {
width: 400px;
height: 200px;
background-color: #ccc;
position: absolute;
top:50%;left: 50%;
margin: -100px 0px 0px -200px;;
}
.rect1 {
width: 50px;
height: 50px;
border-top-left-radius:50px;
background-color: #fc0;
position: absolute;
top:150px;left: 350px;
}
.rect2 {
width: 50px;
height: 50px;
border-bottom-right-radius:50px;
background-color: #fc0;
position: absolute;
top:0px;left: 0px;
} </style>
</head>
<body>
<div class="rect">
<div class="rect1"></div>
<div class="rect2"></div>
</div>
</body>
</html>
百度前端技术学院-task1.4源代码的更多相关文章
- 百度前端技术学院-task1.3源代码
因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...
- 百度前端技术学院-task1.8源代码以及个人总结
通过这次任务的练习我学到了很多,现将所学到的以及遇到的问题总结如下. 源码地址:http://pan.baidu.com/s/1kVB2VZL 下面出现的代码,都是摘自这个上面的源码 1.终于明白了a ...
- 百度前端技术学院-task1.10源代码
任务十的源代码,其实有github的,但就是不知道怎么弄,近期会学会的.在IE和firefox上检测运行良好. <!DOCTYPE html> <html lang="en ...
- 百度前端技术学院-task1.8源代码
主要是不采用bootstrap实现网格. 遇到的困难及注意点如下: 1.[class*='col-'],这个是选择col-开头的类,第一次用,以前也只是看到过: 2.媒体查询,总觉得容易理解错误.@m ...
- 百度前端技术学院task1.10
任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...
- 百度前端技术学院task1 总结
1.居中:当使用text-align或者vatical-align无法达到居中的时候,如果知道元素的大小,可以采用先设为left或right为50%,再设置margin-left或者margin-ri ...
- 百度前端技术学院（IFE）2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 通过Github Pages在线查看百度前端技术学院完成的任务成果
前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...
随机推荐
- AD读取Excel新建客户邮箱的测试环境部署有感
现有AD的账户操作所有服务几乎用WebApi方式,此 方法是便于搭建和部署,做到了前后端的分离 ,其中验证Exchange邮箱转发模块时发现foxmail的exchange本地邮箱配置极其简单,以此记 ...
- 【原】Spring测试类代码
package test; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.bea ...
- 白话SCRUM之五：四种会议
在SCRUM方法中定义了4种会议活动: Sprint planning Daily meeting Sprint review Sprint retrospective 除去开发活动外这4种会议构成了 ...
- Linux Workqueue【转】
转自:http://kernel.meizu.com/linux-workqueue.html 21 August 2016 Workqueue 是内核里面很重要的一个机制,特别是内核驱动,一般的 ...
- Linux framebuffer deferred io机制【转】
转自:https://www.cnblogs.com/vedic/p/10722514.html 一.总体框架 deferred io机制主要用于驱动没有实现自刷新同时应用层又不想调用FBIOPAN_ ...
- ubuntu 16.04 实现远程图形界面连接
一.在操作系统中用管理员权限安装以下软件 1. 安装xrdp: sudo apt-get install xrdp 2. 安装vnc4server: sudo apt-get install vnc4 ...
- mysql udf提权实战测试
根据前天对大牛们的资料学习,进行一次mysql udf提权测试. 测试环境: 受害者系统:centos 7.7 ,docker部署mysql5.6.46, IP:192.168.226.128 攻击者 ...
- Linux---进程控制类命令
1.查看系统中的进程命令 (1)ps (2)top 2.控制系统中的进程命令 (1)kill (2)killall (3)nice (4)renice 3.进程后台运行命令 (1)& 4.进程 ...
- HBuilder创建app
一.app登录注册实现 1.首先进行布局,mhead,mbody 在app index.html内创建一个 a链接通过mui.openWindow跳到登录页面 <a class="mu ...
- JS高阶---闭包缺点（内存溢出与泄露）
[大纲] [主体] (1)闭包优缺点 .延长局部变量的生命周期2.外部访问函数内部变量 闭包的优点同时也是它的缺点,就是 (2)解决方案 .能不用闭包就不用(很难做到,因为应用较多) .及时释放--- ...