案例——新闻快报模块布局实现

最新推荐文章于 2024-08-20 14:20:38 发布

但缓且不息

最新推荐文章于 2024-08-20 14:20:38 发布

阅读量330

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_49930465/article/details/123708776

注意：

标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p
margin和padding大部分情况下可以进行混用，两者各有优缺点，最好根据实际情况，采取简单的方法实现，比如说，在没有设置宽度属性时，指定左右内边距不会撑开盒子大小，但是不管有没有设置高度属性，指定上下内边距总会撑开盒子大小，如果我们此时要避免撑开盒子的大小，我们可以采取margin-top
布局的时候，最好逐层的去实现，不要想到什么写什么，这样会造成写的样式结构很混乱，逐层实现写的时候思路会更加清晰！
在我们具体的实现过程中，很多参数最好使用工具根据设计图测量出来，这样有利于我们今后的开发！

我们来实现一个简单的新闻快报模块，这是实现效果：

具体的代码：

里面写好了注释，不懂的地方可以自己看看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>