百度前端技术学院-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 ...
随机推荐
- oracle 创建表、删除表、添加字段、删除字段、表备注、字段备注、修改表属性
1.创建表 create table 表名( classid number() primary key, 表字段 数据类型 是否允许为空(not null:不为空/null:允许空) 默认值(defa ...
- SAP MM MIGO过账报错 - 用本币计算的余额 - 之对策
SAP MM MIGO过账报错 - 用本币计算的余额 - 之对策 使用MIGO事务代码对采购订单4500000191,执行收货,系统报错: 详细错误信息如下: 用本币计算的余额 消息号 F5703 诊 ...
- Leetcode 88：合并两个有序数组
Leetcode链接 : https://leetcode-cn.com/problems/merge-sorted-array/ 问题描述: 给定两个有序整数数组 nums1 和 nums2,将 n ...
- 第四篇Scrum冲刺博客
第四篇Scrum冲刺博客 一.站立式会议 提供当天站立式会议照片一张 二.每个人的工作 成员 已完成工作 明天计划完成的工作 遇到的困难 林剑峰 用户界面跳转到用户信息页面的按钮,设计用户信息页面 测 ...
- skipped obstructing working copy
svn update时报错,处理方法,将报错的文件夹压缩备份一下,然后删除报错的文件夹,重新update即可.
- rsync 服务端和客户端 简单配置
环境:Centos 6.9 两台服务器,A(192.168.223.129) 和 B(192.168.223.130).A 作为服务端,B作为客户端从A服务器同步目录.把A的/usr/src 目录下的 ...
- UGUI 逻辑以及实用性辅助功能
UGUI 有它的实用性, 可是也存在理解上的困难, 因为它在面板上的显示内容根据布局而变动, 如果不深入理解它的设计原理, 估计每次要进行程序上的修改都需要进行一次换算和测试过程. 1. 设置某UI的 ...
- 学习9：MongoDB知识
MongoDB学习笔记 1 基本介绍 基本概念 MongoDB**是一种面向文档的数据库管理系统,由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.2007年10月,MongoDB由10g ...
- linux (09) nginx反向代理,负载均衡
一.nginx域名分配 1.创建一个新的服务器 server server{ listen 80; server_name www.s15oumei.com; #定义访问域名 location / { ...
- 深入理解defer（上）defer基础
深入理解 defer 分上下两篇文章,本文为上篇,主要介绍如下内容: 为什么需要 defer: defer 语法及语义: defer 使用要点: defer 语句中的函数到底是在 return 语句之 ...