百度前端技术学院-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 ...
随机推荐
- elk 7.2
Elasticsearch 7.0开始内置了Java环境 1.jvm.options配置建议 Xmx和Xms设置成一样 Xmx不要超过机器内存的50% 不要超过30GB https://www.ela ...
- [Linux] nginx的try_files指令实现隐藏index.php的重写
1.nginx的try_files指令 ,核心功能是替代rewrite,并且比rewrite更强大的是可以按顺序查找文件是否存在,如果文件都找不到才会执行最后的重定向解决的问题是,如果一个网站的部署是 ...
- C语言三种参数传递方式
值传递.指针传递.引用传递 只有在函数调用时,才会为形参分配内存空间,调用结束便会释放. 值传递和指针传递,传递的都是实参的一份拷贝. C语言在线编译器:http://www.dooccn.com/c ...
- Spring Junit 测试样例
SpringMVC 框架下的junit测试方式 package com.sixeco.user.controller; import org.apache.logging.log4j.LogManag ...
- 201871010133-赵永军《面向对象程序设计（java）》第十三周学习总结
201871010133-赵永军<面向对象程序设计(java)>第十三周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
- mwArray和cv::Mat转化函数 20170812
不是新东西了,但是有必要专门把这两个函数拿出来记录一下. 需要注意的是,Mat2mwArry函数的输入Mat类型是 CV_8UC1,灰度图. 如果要传递多通道图像的话,需要先cv::split()成多 ...
- （day38）元类+ORM
目录 一.exec模块的补充 二.元类 (一)什么是元类 (二)通过class关键字创建类 (三)自定义元类控制类的创建 三.ORM 一.exec模块的补充 python的内置模块,可以把" ...
- Python 包：
分享一波油藏描述方面的Python开源包 前一阵去捷克参加了数学地质年会(IAMG2018),听完汇报,发现在数学地质领域用python的越来越多了,他们的很多成果都是用python做出来的.不管喜不 ...
- VIJOS-P1045 Kerry 的电缆网络
JDOJ 1229: VIJOS-P1045 Kerry 的电缆网络 https://neooj.com/oldoj/problem.php?id=1229 Description K ...
- nodejs的一些基操
Nodejs 是基于 CHrome V8 引擎的 JaveScriptnpm: node 包管理器为我们提供了: nodejs 运行时,javascript 代码运行时的环境 提供了核心模块,具体会在 ...