百度前端技术学院-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 ...
随机推荐
- webpack4 code splitting
demo 代码点此,webpack4 进行 code splitting 使用 split-chunks-plugin, 开始前先做点准备工作. start 安装: npm i -D webpack ...
- CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: ...
- 深入理解JVM虚拟机（一）：JVM运行时数据区
概述: JVM将内存的管理进行封装,使得开发人员不必关心内存申请.释放操作.但是在高级程序开发.复杂业务场景开发的时候,如果出现内存溢出的情况,对于开发人员而言就很难去分析出原因.所以还是很有必要去了 ...
- web文件上传的总结（二）改变Apache默认post值来提高文件上传大小
上传的文件大小大于2MB的解决方法 #默认apache 允许上大小2MB #技术经理-->修改apache默认配置 php.ini (授权) (1)复制 php.ini -> php1. ...
- HBuilder 云打包生成 .apk 文件所需的安卓证书如何获取以及文件打包前必须的设置
在 HBuilder 云打包功能中,生在 .apk 文件虽然平台提供了免费的 安卓证书,但如果有其它需求,比如想发布,那么就需要自己去申请各种类型的证书了,这里介绍几个工具,方便在线生成证书并配置到打 ...
- linux 网站目录权限设置
Linux下Apache网站目录读写权限的设置 网站目录文件权限的设置对网站的安全至关重要,下面简单介绍网站目录文件权限的基本设定. 我们假设http服务器运行的用户和用户组是www,网站用户为cen ...
- Django类
django 1.中间件 中间件一般做认证或批量请求处理,django中的中间件,其实是一个类,在请求和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法, 如请求过来 执行p ...
- 设备树的规范（dts）
设备树的官方文档: https://www.devicetree.org/specifications/ 一.理论部分 如何看下面这张图: 1)从根节点开始看起,即 / 2)在根节点中有属性以及设备节 ...
- 201871010117-石欣钰《面向对象程序设计（java）》第十五周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...
- pugixml 读取
xml <?xml version="1.0" encoding="utf-8" ?> <ROOT> <COMPANY>Te ...