Html_Task4(知识点：水平居中+垂直居中/position/float/border-radius)
任务四：定位和居中问题
任务目标
实践HTML/CSS布局方式
深入了解position等CSS属性
任务描述
实现如 示例图（点击打开） 的效果
灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。
任务注意事项
思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。
动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
注意测试不同情况，尤其是极端情况下的效果。
调节浏览器宽度，灰色元素始终水平居中。
调节浏览器高度，灰色元素始终垂直居中。
调节浏览器高度和宽度，黄色扇形的定位始终准确。
其他效果图中给出的标识均被正确地实现，错一项扣一分。
参考资料
HTML和CSS高级指南之二——定位详解：大漠老师手把手教你，这次彻底搞懂定位问题
Centering in CSS: A Complete Guide：完整讨论了不同情况下的居中方案，建议自己思考之后再看答案
Get HTML & CSS Tips In Your Inbox：有人写了一个作弊工具生成居中代码，但是看着代码你明白为什么吗
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>task4</title>
<style>
*{
margin: 0;
padding: 0;
}
.dd{
width: 400px;
height: 200px;
background-color:#ccc;
position: absolute;
left:50%;
top:50%;
margin-top: -100px;
margin-left: -200px;
/*要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。*/
}
.lefttop{
background-color: #fc0;
width: 50px;
height: 50px;
float: left;
border-bottom-right-radius: 50px;
}
.rightbottom{
background-color: #fc0;
width: 50px;
height: 50px;
float: right;
position: relative;
bottom: -150px;
border-top-left-radius: 50px;
}
</style>
</head> <body>
<div class="dd">
<div class="lefttop"></div>
<div class="rightbottom"></div> </div>
</body>
</html>
Html_Task4(知识点：水平居中+垂直居中/position/float/border-radius)的更多相关文章
- css 水平居中垂直居中的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
- CSS水平居中/垂直居中的N个方法
我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...
- 图片垂直居中 和 float
//图片垂直居中, display:table-cell; vertical-align:middle; 不能和 css (float)元素共存,可以在元素外面多加一个层 css .th-left ...
- CSS的position/float/display
一.position position属性取值:static(默认).relative.absolute.fixed.inherit. postision:static:始终处于文档流给予的位置.它可 ...
- 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中
一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center ...
- css_css 盒子水平居中 垂直居中
1.盒子垂直居中---常用3种方法 方法2: 2.盒子水平居中 3.垂直水平都居中 之前学过 1.结合上面的知识 2.flex布局可以做到 3.css3 translate 定位
- 007-li标签CSS水平居中垂直居中
水平居中是text-align:center垂直居中 一般是用 line-height比如你li的高度是80px 那你设置 line-height:80px 文字就垂直居中
- css的position,float属性的理解
我们知道,html是按照普通流来加载的,这个时候我们有些需求就不好实现.因此出现了非普通流: 1.普通流:按照顺序正常的排列,长度或不够就往下挤.position默认的static 2.非普通流:脱离 ...
随机推荐
- 微信jssdk分享链接给好友，图标只能自己看到，对方看不到！
问题描述:调用微信jssdk分享接口时,所有参数均正常的情况下(排除参数错误的情况),分享给好友后,其中的小图标自己看得到,接收到分享的好友看不到小图标! (如上图所示!) 出现上述问题的原因:本人猜 ...
- 计算机网络——DNS协议的学习与实现
1. 主要内容 不说废话,直接进入正题.先说说本文本文的主要内容,好让你决定是否看下去: 介绍DNS是干什么的: 介绍DNS是如何工作的: 介绍DNS请求与响应的消息格式: 编程实现一个简单的DNS服 ...
- Web前端相关资源
Web前端相关 GRUNT: js task runner Sea.js: js模块化 knockout.js:MVVM开发前台,绑定技术 Angular.js: 使用超动感HTML & JS ...
- 获取camera截屏图片
Camera camera; SpriteRenderer sprRender; Texture2D t2d = New Texture2D(1300, 760, TextureFormat.RGB2 ...
- CSAcademy Beta Round #4 Swap Pairing
题目链接:https://csacademy.com/contest/arhiva/#task/swap_pairing/ 大意是给2*n个包含n种数字,每种数字出现恰好2次的数列,每一步操作可以交换 ...
- react基于nodejs简单的搭建与开发方法
只需安装babel命令,即可将react的jsx写法转换成浏览器认识的js写法 1.安装nodejs(百度下载安装即可,自带npm) 2.cmd打开命令行,cd进入在自己的文件夹下 执行命令: npm ...
- 排序算法合集 python
直接选择.插入排序 直接选择排序和直接插入排序类似,都将数据分为有序区和无序区,所不同的是直接播放排序是将无序区的第一个元素直接插入到有序区以形成一个更大的有序区,而直接选择排序是从无序区选一个最小的 ...
- php超时任务处理
首先,不知道fastcgi_finish_request是啥的点这里. 一直知道php有个fastcgi_finish_request可以用来针对web应用处理耗时任务,但我一直以为直接fastcg ...
- 一文读懂 HTTP/2 特性
HTTP/2 是 HTTP 协议自 1999 年 HTTP 1.1 发布后的首个更新,主要基于 SPDY 协议.由互联网工程任务组(IETF)的 Hypertext Transfer Protocol ...
- [ext4]07 磁盘布局 - 块/inode分配策略
Ext4系统从设计上就认为数据局部性是文件系统的文件系统的一个理想品质. 在机械硬盘上,相关联的数据存放在相近的blocks上,可以使得在访问数据时减少磁头驱动器的移动距离,从而加快IO访问. 在SS ...