HTML前端布局元素与CSS基础教程
"HTML前端系列教程中的CSS第一课,主要涉及网页布局结构元素和常见的中文字体,以及CSS选择器的应用。" 在HTML5中,网页的基本布局结构通常由以下几个部分组成: 1. **头(Header)**:页面顶部,通常包含网站的logo、导航链接等。 2. **内容(Content/Container)**:页面的主要内容区域,可以包含多个板块或模块。 3. **尾(Footer)**:页面底部,通常包括版权信息、联系方式等。 4. **导航(Nav)**:用于引导用户在网站内进行导航的元素。 5. **侧栏(Sidebar)**:常用于放置辅助信息,如侧边菜单、广告或最新文章列表。 6. **栏目(Column)**:内容区域的细分,可以是多列布局的一部分。 7. **页面外围控制整体布局宽度(Wrapper)**:包裹整个页面,用于设定页面宽度和居中显示。 8. **左右中(LeftRightCenter)**:常见于三栏布局,左栏、右栏和中间主要内容区。 9. **登录条(Loginbar)**:提供用户登录功能的小型表单。 10. **标志(Logo)**:网站的品牌标识。 11. **广告(Banner)**:通常出现在页面的显著位置,用于展示广告信息。 12. **页面主体(Main)**:主要内容的核心部分,一般包含文章、产品介绍等。 13. **热点(Hot)**:显示当前热门或流行的内容。 14. **新闻(News)**:发布新闻或更新信息的区域。 此外,HTML5中定义了一些中文字体的英文名称及其Unicode编码,便于在CSS中使用: - **宋体(SimSun)**:\5B8B\4F53 - **新宋体(NSimSun)**:\65B0\5B8B\4F53 - **黑体(SimHei)**:\9ED1\4F53 - **微软雅黑(Microsoft YaHei)**:\5FAE\8F6F\96C5\9ED1 - **楷体_GB2312(KaiTi_GB2312)**:\6977\4F53_GB2312 - **隶书(LiS)**:\96B6\4E66 在CSS中,我们可以利用不同的选择器来更精确地定位和设置元素样式。这里提到了两种常用的选择器: 1. **子代选择器(Child Selector)**:用`>`分隔,如`div > p`,它只会选择`div`元素的直接子元素`p`,并应用相应的CSS规则。在这个例子中,所有直接位于`div`内的`p`元素文字颜色将被设为红色。 2. **属性选择器(Attribute Selector)**:通过元素的属性来设置样式,例如`p[class][id]`会选择所有具有`class`和`id`属性的`p`元素,并将文字颜色设为红色。这意味着`p`元素必须同时具有`class`和`id`属性,无论其值为何,才会应用该样式。 通过这些基础知识,开发者可以更好地理解和构建符合标准的HTML5网页,同时利用CSS有效地控制页面的布局和视觉效果。
- 粉丝: 23
- 资源: 2万+
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 最优条件下三次B样条小波边缘检测算子研究
- 深入解析:wav文件格式结构
- JIRA系统配置指南:代理与SSL设置
- 入门必备:电阻电容识别全解析
- U盘制作启动盘:详细教程解决无光驱装系统难题
- Eclipse快捷键大全:提升开发效率的必备秘籍
- C++ Primer Plus中文版:深入学习C++编程必备
- Eclipse常用快捷键汇总与操作指南
- JavaScript作用域解析与面向对象基础
- 软通动力Java笔试题解析
- 自定义标签配置与使用指南
- Android Intent深度解析:组件通信与广播机制
- 增强MyEclipse代码提示功能设置教程
- x86下VMware环境中Openwrt编译与LuCI集成指南
- S3C2440A嵌入式终端电源管理系统设计探讨
- Intel DTCP-IP技术在数字家庭中的内容保护