今天我们共同制作了一个页面,本周的主要任务就是页面制作。在页面制作过程中,我们所使用的HTML标记和CSS属性其实是很有限的。总结一下:
1、HTML标记:
(1)利用<div></div>标记对实现布局容器。
(2)利用<a></a>标记对实现链接。
(3)利用<img />标记对实现图片。
(4)利用<ul></ul>标记对实现无序列表和导航条。
(5)偶尔利用<h1></h1>或其他等级的标题标记对实现标题。
2、CSS属性:
(1)只要遇到<div></div>标记对,就一定要设置宽度和高度。
(2)通栏效果的<div></div>标记对宽度设置为100%。
(3)宽度或高度如果能够继承父元素的大小,可以取值为inherit。
(4)块级元素相对于父元素的水平居中:margin:0 auto;
(5)内联元素在容器中水平居中:text-align:center;
(6)块级元素在一行内显示:float:left;
(7)将块级元素转换为内联元素:display:inline;
(8)将内联元素转换为块级元素:display:block;
(9)将块级元素/内联元素转换为内联块元素:display:inline-block;
(10)单行文本在容器中垂直居中:将line-height属性设置为容器的高度值。
(11)为块级元素设置下边框虚线:border-bottom:dashed 1px #ffff00;
(12)设置元素的圆角效果:border-radius:5px;
其实我们今天也就用到了上述标记和属性,希望大家抓紧时间做页面,争取明天上午我们能完成第一个页面。
1、HTML标记:
(1)利用<div></div>标记对实现布局容器。
(2)利用<a></a>标记对实现链接。
(3)利用<img />标记对实现图片。
(4)利用<ul></ul>标记对实现无序列表和导航条。
(5)偶尔利用<h1></h1>或其他等级的标题标记对实现标题。
2、CSS属性:
(1)只要遇到<div></div>标记对,就一定要设置宽度和高度。
(2)通栏效果的<div></div>标记对宽度设置为100%。
(3)宽度或高度如果能够继承父元素的大小,可以取值为inherit。
(4)块级元素相对于父元素的水平居中:margin:0 auto;
(5)内联元素在容器中水平居中:text-align:center;
(6)块级元素在一行内显示:float:left;
(7)将块级元素转换为内联元素:display:inline;
(8)将内联元素转换为块级元素:display:block;
(9)将块级元素/内联元素转换为内联块元素:display:inline-block;
(10)单行文本在容器中垂直居中:将line-height属性设置为容器的高度值。
(11)为块级元素设置下边框虚线:border-bottom:dashed 1px #ffff00;
(12)设置元素的圆角效果:border-radius:5px;
其实我们今天也就用到了上述标记和属性,希望大家抓紧时间做页面,争取明天上午我们能完成第一个页面。