百度前端技术学院-task1.4源代码
2016-03-18 13:12
513 查看
任务描述
实现如 示例图(点击打开) 的效果灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。
任务注意事项
思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案。动手试一试各种情况的组合,父元素和子元素分别取不同的 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>
相关文章推荐
- js关闭当前页面 (窗口)的几种方式总结
- Js操作cookie
- 用JS获取Html中所有图片文件流然后替换原有链接
- jquery控制css
- Javascript 检查字符串是否是数字的几种方法
- 前端工程师面试题JavaScript部分(第五季)
- jstl fmt标签
- 关于高德LBS——Manifest的相关配置
- jQuery.width()和jQuery.css('width')的区别
- html
- JQuery小案例
- Angular.js中的指令——易懂全解析
- Ubuntu安装nodejs最新版4.4和npm
- .NET后台confirm对话框以及JS调用后台相关方法
- angular directive的compile和link
- jquery.validate 自学自写
- JavaEE框架Bootstrap、HTML5、jQuery、SpringMVC
- Js操作cookie
- JavaScript数组length的方便与痛
- 关于js跨域请求的问题