1 .命名
1 .头部区域——头部
头部区域位于整个网页的顶部，通常用于设置网页标题和网页徽标。
2 .菜单导航栏——topnav
菜单导航栏包含允许用户浏览其他页面的链接。
3 .内容领域
column——专栏
sidemenu——侧栏
4 .底部区域——footer
底部区域位于网页底部，一般包含版权信息和联系方式等。
2 .创建导航栏样式：
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width，initi a padding: 0px； } .topnav { margin: 0px 150px； 背景色： # 777777； Overflow :隐藏； /*请消除浮动。 否则，父母水平就会崩溃。 *.top navul { list-style-type : none； } .topnav ul li a { float: left； padding: 15px； 文本修饰：无； color:白色； }.topnavullia : hover {背景色： black； }.topnavullia.active { background-color : #4caf 50； }/stylebodydivclass=' top nav ' ulliahref=' # home ' class=' active '主页/a/li lia href='#news '新闻/a/Lili
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width，initi a } body { font-family : sans-serif； font-size: 16px； 背景色： # dede de； }.top nav {背景色： # 333333； Overflow :隐藏； } .topnav img { float: left； width: 50px； height: 50px； margin: 10px 30px； }.top nav.top menu { list-style-type : none； 浮点：轻型； /*集团向右浮动*/}.top nav.top menu Li { float : left； /*左浮动*/}.top nav.top menu lia { text-decoration 3360 none； color:白色； display :在线区块； line-height: 70px； /*定心效果*/margin-right: 20px； }.top nav.top menu lia : hover { opacity :5； }/style/headbodydivclass=' top nav ' img src=' ./images/1.jpg ' alt=' ' ul class=' top menu ' lia href=' # # #