Html_Task4(知识点:水平居中+垂直居中/position…
2018-06-24 01:15:25来源:未知 阅读 ()
任务四:定位和居中问题
任务目标
实践HTML/CSS布局方式
深入了解position等CSS属性
任务描述
实现如 示例图(点击打开) 的效果
灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。
任务注意事项
思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案。
动手试一试各种情况的组合,父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义,尤其是 absolute 究竟是相对谁而言的。
注意测试不同情况,尤其是极端情况下的效果。
调节浏览器宽度,灰色元素始终水平居中。
调节浏览器高度,灰色元素始终垂直居中。
调节浏览器高度和宽度,黄色扇形的定位始终准确。
其他效果图中给出的标识均被正确地实现,错一项扣一分。
参考资料
HTML和CSS高级指南之二——定位详解:大漠老师手把手教你,这次彻底搞懂定位问题
Centering in CSS: A Complete Guide:完整讨论了不同情况下的居中方案,建议自己思考之后再看答案
Get HTML & CSS Tips In Your Inbox:有人写了一个作弊工具生成居中代码,但是看着代码你明白为什么吗
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>task4</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .dd{ 12 width: 400px; 13 height: 200px; 14 background-color:#ccc; 15 position: absolute; 16 left:50%; 17 top:50%; 18 margin-top: -100px; 19 margin-left: -200px; 20 /*要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。*/ 21 } 22 .lefttop{ 23 background-color: #fc0; 24 width: 50px; 25 height: 50px; 26 float: left; 27 border-bottom-right-radius: 50px; 28 } 29 .rightbottom{ 30 background-color: #fc0; 31 width: 50px; 32 height: 50px; 33 float: right; 34 position: relative; 35 bottom: -150px; 36 border-top-left-radius: 50px; 37 } 38 </style> 39 </head> 40 41 <body> 42 <div class="dd"> 43 <div class="lefttop"></div> 44 <div class="rightbottom"></div> 45 46 </div> 47 </body> 48 </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash