HTML5+CSS3 制作不规则形状
-
HTML5+CSS3
制作不规则形状
通过本章的学习，
用户了解了
HTML
5
中，
怎么使用
transform<
/p>
功能对图像或文
字进行旋转、缩放、倾斜及移动等变形处理。
在本练习中，将使用
transform
功能配合其它标签，制作一个企业网站首页，
帮助用户更好的了
解
transform
功能的应用及含义。
操作步骤：
（
1
）创建页面的页头。页头被放置在
DIV
层中，使用
ul
列表为
页头添加导航
条。
id=
（
2
< br>）为页头添加
CSS
样式，包括
Div
层、导航列表
ul
和列表项
li
的样式。
#topNav{
}
#topNav img{
}
#topNav ul{
background:url(images/top_ul_) no-
repeat 0 8px;
width:503px; height:23px;
padding:8px 0 0 8px;
margin:0 0 0 217px;
}
#topNav ul li{
}
float:left;
color:#0B0B0B;
background-
color:#FDF9EE;
font:normal 12px/16px
border:none; float:left; margin:0 34px
0 0;
width:728px; position:relative;
margin:0 auto;
padding:8px 0 0 50px;
（
3
）为页头中的超链接添加样式，包括链接的基础设置及鼠标离开时，链接
的颜色。
#topNav ul
li a{
}
background-
color:#E1DBC7; color:#0B0B0B;
font:bold
11px/23px
text-transform:uppercase;
text-align:center; text-
decoration:none;
width:65px;
height:23px;
display:block;