前端基础知识点

最新推荐文章于 2023-05-02 09:41:41 发布

天主极乐大帝

最新推荐文章于 2023-05-02 09:41:41 发布

阅读量3.6k

点赞数 19

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42218868/article/details/88701946

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
    <style>
        .box{
            margin: 0 auto;
            width: 450px;
            height: 300px;
            box-sizing: border-box;
            padding: 15px 12px;
            border :1px solid  red;
            background-color: #eee;
            /*边框 框的宽度 框的线样式 颜色*/
        }
        .box1{
            border-bottom: 2px solid black;
        }
        ul{
            margin-top: 12px;
            margin-left: 12px;
            border: 1px dashed blue;
        }
        .box2{
            line-height:36px;
            padding-left: 60px;
            border-bottom: 1px dashed blue;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"><h2>最新文章/New Articles</h2></div>
        <div class="box2">北京招聘网页设计，平面设计，php</div>
        <div class="box2">体验javascript的魅力</div>
        <div class="box2">jquery世界来临</div>
        <div class="box2">网页设计师的梦想</div>
        <div class="box2">jquery中的链式编程是什么</div>
</div>
</body>
</html>`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            background-color: #cccccc;
            padding: 30px 15px;
            width: 240px;
            height: 360px;
            box-sizing: border-box;/*新盒膜类型*/
            color:white;
            margin: 0 auto;/**/
        }
        .box2{
            width:210px;
            height: 60px;
            padding: 15px;
            box-sizing:border-box;
            font-size: 20px;
        }
        span{
            float: right;/*行内元素的本质是文本但块内元素的本质不是文本 */
        }
    </style>
</head>
<body>
<div class="box1" align="conter">
    <div class="box2"><img src="img/1.png" alt="" >菜谱大全<span> > </span></div>
    <div class="box2"><img src="img/2.png" alt="" >食材大全<span> > </span></div>
    <div class="box2"><img src="img/3.png" alt="" >品质珍选<span> > </span></div>
    <div class="box2"><img src="img/4.png" alt="" >专题专区<span> > </span></div>
    <div class="box2"><img src="img/5.png" alt="" >一起红<span> > </span></div>
</div>
</body>
</html>`

天主极乐大帝

关注

19
点赞
踩
51

收藏

觉得还不错? 一键收藏
21
评论
前端基础知识点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新闻列表</title> <style> .box{ margin: 0 auto; w...
复制链接

扫一扫

专栏目录