HTML CSS样式DIV布局HTMl块HTML网页布局的应用实例

最新推荐文章于 2023-07-23 21:47:25 发布

爱喝柠檬茶的猫

最新推荐文章于 2023-07-23 21:47:25 发布

阅读量308

点赞数 1

本文链接：https://blog.csdn.net/jereet/article/details/117549748

版权

实例代码：添加几个div块

<!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>关卡5—花样边框</title>
    <link rel="stylesheet" href="1.css">
</head>

<body> 
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

CSS样式代码：

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div:nth-of-type(1) {
    border: 3px dotted gray;
    width: 430px;
    height: 430px;
}

div:nth-of-type(2) {
    border: 4px solid gray;
    width: 330px;
    height: 330px;
}

div:nth-of-type(3) {
    background: #A52A2A;
    width: 285px;
    height: 285px;
}

div:nth-of-type(4) {
    border: 1px dashed #eeeeee;
    width: 190px;
    height: 190px;
}

div:nth-of-type(5) {
    border: 1px dashed #eeeeee;
    width: 180px;
    height: 180px;
}

div:nth-of-type(6) {
    border: 4px solid black;
    background-color: #fff;
    width: 100px;
    height: 100px;
}

网页显示效果：

实例 2代码：

<!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>关卡5—鲁能足球队</title>
    <link rel="stylesheet" href="2.css">
</head>

<body>
    <div class="wrapper">
        <h1>鲁能热身赛16-0大胜业余队 野牛4球蒙蒂略戴帽</h1>
        <div class="title_wrapper">
            <div class="sub_title">
                <div>2015年08月08日18:19</div>
                <div><span>新浪体育</span></div>
                <div>微博</div>
                <div>我有话说(<span>10,370</span>人参与)</div>
                <div>收藏本文</div>
            </div>
            <div class="img_wrapper"><img src="./images/img.jpg" alt="">
                <p>鲁能热身赛16-0大胜鲁能热身赛16-0大胜</p>
            </div>
            <div class="context">
                <p>新浪体育讯　　北京时间8月8日消息，山东鲁能俱乐部在训练基地内与业余球队山东太阳金店足球俱乐部进行了一场热身赛，最终鲁能以16-0大胜对手，阿洛伊西奥上演大四喜，韩鹏和蒙蒂略完成帽子戏法，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源均取得进球。
                </p>
                <div class="special">
                    <p><span>鲁能泰山足球新闻：</span>#鲁能泰山#鲁能热身赛16-0击败一支业余球队，韩鹏和蒙蒂略帽子戏法，野牛大四喜，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源取得进球。</p>
                    <p> 2015-08-08 17:54 来自百度浏览器 转发(49) | 收藏 | 评论(50)</p>
                </div>
                <p>由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也邀请了一支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯，但鲁能还是派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领先，尽管与业余球队比赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目前状态不错。
                </p>
                <p>下周三中超第22轮就将打响，山东鲁能客场挑战北京国安，两支争冠球队的直接对话，无疑是本轮最焦点之战。由于国足本周日才结束东亚杯赛事，鲁能阵中的国脚体能能恢复多少非常关键，而以现有的鲁能球员组成的阵容，实力也绝对不容小觑。(瑪塔)
                </p>
                <div class="keyword">
                    <b>文章关键词：</b>
                    <span>中超</span><span>鲁能</span><span>阿洛伊西奥</span><span>蒙蒂略</span>
                </div>
                <div class="btn">点击下载【新浪体育客户端】，赛事视频直播尽在掌握</div>
            </div>
        </div>
    </div>
</body>

</html>

CSS样式代码：

body {
    margin: 0;
}

.wrapper {
    border: 1px solid #909399;
    border-top: 4px solid royalblue;
    width: 960px;
    margin: 0 auto;
    text-align: center;
}

h1 {
    font-weight: 400;
}

.title_wrapper {
    margin: 0 30px;
}

.title_wrapper .sub_title {
    padding: 0 125px 1em;
    display: flex;
    justify-content: space-between;
    color: #909399;
    font-size: 14px;
}

.title_wrapper .sub_title span {
    color: red;
}

.img_wrapper {
    border-top: 1px solid #909399;
    padding: 30px 2em 0;
}

.img_wrapper img {
    width: 100%;
}

.img_wrapper p {
    color: #909399;
    font-size: 14px;
}

.context {
    line-height: 1.75em;
}

.context p {
    text-indent: 2em;
    text-align: left;
}

.context .special {
    border: 1px dashed #909399;
    padding: 1em 0.75em;
    margin-bottom: 2em;
}

.context .special p {
    margin: 0;
    text-indent: 0;
}

.context .special p span {
    color: #2B6DCD;
}

.context .special p:last-of-type {
    text-align: right;
    font-size: 14px;
}

.context .keyword {
    text-align: left;
}


.context .keyword span {
    color: #2B6DCD;
    padding-right: 0.5em;
}

.context .btn {
    margin: 1em 1.5em 3em;
    padding: 5px;
    color: #2B6DCD;
    background-color: #DEE2F3;
    border: 2px solid #2B6DCD;
}

网页显示效果：

爱喝柠檬茶的猫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS样式DIV布局HTMl块HTML网页布局的应用实例

实例代码：添加几个div<!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">
复制链接

扫一扫