html+css,part 2

Titijiang233

已于 2022-02-06 12:07:25 修改

阅读量85

点赞数 1

分类专栏：笔记文章标签： css html5 html

于 2021-08-25 22:53:51 首次发布

本文链接：https://blog.csdn.net/Titijiang233/article/details/119839496

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS的元素显示模式

1.什么是元素显示模式？

2.块元素

3.行内元素

4.行内块元素

5.元素显示模式总结

显示模式的转换

<!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>
        a {
            width: 250px;
            height: 30px;
            background-color: rgb(51, 223, 102);
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 250px;
            height: 50px;
            background-color: rgb(192, 41, 41);
            /* 把块级元素 div 转换为 行内元素 */
            display: inline;
        }

        span {
            width: 250px;
            height: 50px;
            background-color: rgb(252, 255, 50);
            /* 把行内元素 span 转换为 行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">qwq'''</a>
    <a href="#">qwq'''</a>
    <div>QAQ</div>
    <div>QAQ</div>
    <span>T-T</span>
    <span>T-T</span>
</body>

</html>

手机官网侧栏简易版

height: 42px; 盒子高度

line-height: 42px; 行高

行高=盒子高度大小，实现字体垂直居中

<!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>
        a {
            display: block;
            width: 234px;
            height: 42px;
            text-decoration: none;
            color: rgb(255, 255, 255);
            background-color: rgb(156, 155, 163);
            text-indent: 2em;
            line-height: 42px;
        }

        a:hover {
            background-color: rgb(255, 103, 0);
        }
    </style>
</head>

<body>
    <a href="#">手机</a>
    <a href="#">电视</a>
    <a href="#">笔记本 平板</a>
    <a href="#">家电</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">电源 配件</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音箱</a>
    <a href="#">生活 箱包</a>
</body>

</html>

背景

背景颜色

background-color：transparent 一般默认为透明

背景图片

背景平铺

背景图片位置

背景图像固定（背景附着）

背景色半透明

背景总结

五彩导航

鼠标放在链接上变色

<!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>
        .nav a {
            display: inline-block;
            width: 115px;
            height: 70px;
            background-color: rgb(255, 159, 159);
            text-align: center;
            line-height: 58px;
            color: rgb(255, 255, 255);
            text-decoration: none;
        }

        .nav .c1 {
            background: url(images/c1.png) no-repeat;

        }

        .nav .c2 {
            background: url(images/c2.png) no-repeat;
        }

        .nav .c3 {
            background: url(images/c3.png) no-repeat;
        }

        .nav .c4 {
            background: url(images/c4.png) no-repeat;
        }

        .nav .c5 {
            background: url(images/c5.png) no-repeat;
        }

        .nav .c3:hover {
            background: url(images/c5.png);
        }

        .nav .c5:hover {
            background: url(images/c1.png);
        }

        .nav .c4:hover {
            background: url(images/c2.png);
        }

        .nav .c1:hover {
            background: url(images/c4.png);
        }

        .nav .c2:hover {
            background: url(images/c3.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="c1">五彩导航</a>
        <a href="#" class="c2">五彩导航</a>
        <a href="#" class="c3">五彩导航</a>
        <a href="#" class="c4">五彩导航</a>
        <a href="#" class="c5">五彩导航</a>
    </div>
</body>

</html>

Titijiang233

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+css,part 2

CSS的元素显示模式1.什么是元素显示模式？2.块元素3.行内元素4.行内块元素5.元素显示模式总结显示模式的转换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met...
复制链接

扫一扫