HTML第七章作业

最新推荐文章于 2025-05-18 11:15:54 发布

刘宪君

最新推荐文章于 2025-05-18 11:15:54 发布

阅读量3.6k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43071303/article/details/84227767

本次作业涵盖了HTML布局的各种方法，包括清除浮动的多种方式，对比了display:inline-block和float布局的特点与注意事项。同时，设计并实现了摄影社区热门小镇、名人名言、彩妆热卖产品列表等页面，运用了<div>、无序列表、float属性、结构元素如header、article等，以及CSS样式美化，包括导航菜单、标题层级、颜色和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.清除浮动的方法有哪几种？分别如何实现？
1）浮动元素后面加空div
2）设置父元素的高度
3）父级添加overflow属性
4）父级添加伪类
2.使用display：inlink-block或float布局页面有什么区别？需要注意什么？
1）display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格，IE 6、IE 7上不支持
2）float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
3.制作摄影社区热门小镇页面（页面效果及页面中的图片、字体颜色等参见提供的作业素材），要求如下。
使用<div和无序列表相结合的方法布局HTML文档。
使用float属性创建横向多列排版网页元素。在这里插入图片描述

4.制作名人名言页面（完整的页面效果图参见提供的作业素材）。要求如下。
使用headder、article、section、nav、footer等结构元素布局。
使用float属性创建横向多列布局。
使用无序列表制作导航菜