布局：盒子模型综合练习

最新推荐文章于 2022-08-03 17:28:12 发布

媽呀

最新推荐文章于 2022-08-03 17:28:12 发布

阅读量440

点赞数 1

分类专栏：前端学习文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/qq_44729735/article/details/115379273

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

盒子模型综合练习

这边可以下源码和素材
样张
在这里插入图片描述

先打开ps（或者其他带标尺的看图软件）测量各个部分的大小

大概就这样那样搞一搞
核验测量数据（很重要，要不然错了代码打一半又要改一大堆数据）

开打

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 298px;
            height: 226px;
            border: #cccccc 1px solid;
            background: url("img/背景1.jpg");
            padding: 0 15px;
            margin: 100px auto;
        }
        .new{
            width:298px ;
            height: 26px;
            border-bottom: #cccccc 1px solid;
            font-size: 18px;
            padding-top: 17px;
            line-height: 26px;
            font-weight: bolder;
        }
        .d1{
            padding-top: 13px;
            background: url("img/图标.jpg") 5px 21px no-repeat;
        }
        .d2{
            padding-top: 3px;
            background: url("img/图标.jpg") 5px 12px no-repeat;
        }
        .d{
            width: 278px;
            height: 27px;
            border-bottom: #cccccc 1px dashed;
            font-size: 10px;
            line-height: 27px;
            padding-left: 20px;
        }
        a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="new">最新文章/New Articles</div>
    <div class="d d1"><a href="">北京招聘网页设计，平面设计，php</a></div>
    <div class="d d2"><a href="">体验javascript的魅力</a></div>
    <div class="d d2"><a href="">jquery世界来临</a></div>
    <div class="d d2"><a href="">网页设计师的梦想</a></div>
    <div class="d d2"><a href="">jquery中的链式编程是什么</a></div>
</div>
</body>
</html>

这边可以下源码和素材

媽呀

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
布局：盒子模型综合练习

盒子模型综合练习这边可以下源码和素材样张先打开ps（或者其他带标尺的看图软件）测量各个部分的大小大概就这样那样搞一搞核验测量数据（很重要，要不然错了代码打一半又要改一大堆数据）开打<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/cs
复制链接

扫一扫