DIV初尝

最新推荐文章于 2022-05-05 16:55:31 发布

哥哥，成亲吧

最新推荐文章于 2022-05-05 16:55:31 发布

阅读量83

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/qq_45207184/article/details/108944768

版权

Java Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DIV是一个放置内容的容器，用于大面积的块状排版，样式需要编写CSS来实现。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div_css</title>
<style type="text/css">       //内嵌样式     
//通用类选择符
.mainBox{          
            border: 1px  dashed #0099CC;       
            margin: 3px;
            padding: 0px;
            float:left;
            height: 300px;
            width: 192px;
         }

.mainBox h3{
                float: left;
                height: 20px;
                width: 179px;
                color: #FFFFFF;
                padding: 6px 3px 3px 10px;
                background-color: #0099CC;
                font-size: 16px;
            }

.mainBox p{
                line-height: 1.5em;       
                text-indent: 2em;
                margin: 35px 5px 5px 5px;
           }
</style>
</head>
<body>
     <div class="mainBox">
         <h3>前言</h3>
         <p>正文内容</p>
     </div>
     <div class="mainBox">
         <h3>CSS盒子模式</h3>
         <p>正文内容</p>
     </div>
     <div class="mainBox">
         <h3>转变思想</h3>
         <p>正文内容</p>
     </div>
</body>
</html>

运行效果：
在这里插入图片描述

哥哥，成亲吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV初尝

DIV是一个放置内容的容器，用于大面积的块状排版，样式需要编写CSS来实现。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>div_css</title><style type="text/css"> //内嵌样式 //通用类选择符.mainBox{ border: 1px das
复制链接

扫一扫