li*5 ;连续5个li标签
li*5>a ;连续5个带有<a>标签的li标签
li*5.a ;连续5个class为a的标签
按住alt按键 可以实现多行同时修改同样的东西
1 index 英语释义是索引,指示,标志,在这里是 首页 的意思,老师开始不是写了三个样式表嘛,reset.css(清除网页中默认样式)common.css(公共样式,就是说一个网站会有很多网页,这些网页一起使用这些样式)index.css(首页的样式)
2 banner 英语解释是 横幅 在本节课中就是导航下面的图片部分
3 panel 英语解释是 面板,就是 展示区下面那几个版块
用这些单词是为了标签语义化。一个作用是让人看到这些标签就明白div中放的是什么内容,另一个作用是为了方便搜索引擎查找。 其他的语义化标签有:
头 header
内容:content/container
尾:footer
导航:nav
侧栏:slidebar
栏目:column
页面外围
控制整体布局宽度:wrapper
左中右 left right center
登陆条:loginbar
标志:logo
广告: banner
广告主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
版权:copyright
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:register
状态:status
投票:voat
合作伙伴:partner
同级的元素最好都统一是块状元素或内联元素
每一个模块都需要一个居中容器,用来让网页内容居中(根据需求而定)
先把页面结构规划出来
块级元素下都是块级元素或者内联元素
PS操作:
1.选中框选区域,按F8查看区域信息。
index大体结构
li*5>a 按tab键即可创建5项列表
<li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li>
不能让内联元素和块级元素处于同一级,要么都是内联元素,要么都是块级元素
<div> <a class="header-logo"></a><div class="header-logo"></div> <ul class="header-nav"></ul> </div>
内联不占行,如input,span,a,你会发现写多个input的时候,它们都排在同一行 块状元素,占行,如div,p。你会发现写多个div的时候,它们都各自占一行。