页面设计

熬只小饼干

已于 2022-06-07 16:48:26 修改

阅读量2.1k

点赞数

文章标签： html 前端

于 2022-06-03 22:38:28 首次发布

本文链接：https://blog.csdn.net/m0_54486934/article/details/125116235

版权

1.一般的完成页面设计

1>使用HTML定义页面内容

2>使用css定义页面外观

3>使用JavaScript定义页面行为

2.元素在页面上的显示方式

1>块级显示方式:所有的块级标签默认的显示方式

块级元素独占一行,可以设置宽度和高度

Div,p,h1~h6,ul.ol!…

2>行级显示方式:所有的行级标签默认的显示方式

所有的行级元素可以共享一行，行级显示方式不能设置宽度和高度，宽度和高度由内容的宽高来决定

a,img,span

3>行内块方式:可以和其他元素共享一行,可以设置宽度和高度

display:none|block|inline-block;设置元素的显示方式，网页中元素没有display属性时按照默认方式来显示，但是设置了display属性就按照该属性指定的方式来显示

none:隐藏 block:块 inline-block:行内块

<!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>显示方式</title>
    <style>
        /*.one{
            background-color: red;
            width: 200px;设置宽度
            height: 200px;设置高度
        }
        .two{
            background-color: green;
            width: 200px;
            height: 200px;
        }*/
        div{
            display:inline-block;
            width: 300px;
            height: 300px;
            background-color: red;
        }
        a{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <!-- 块级 -->
    <div class="one">1</div>
    <div class="two">2</div>
    <a href="#">百度</a>
    <a href="#">博客园</a>
    <a href="#">程序员网</a>
</body>
</html>

3.行高

line-height:行高

作用:设置多行文字的行间距;

设置单行文字垂直居中:行高=容器的高度;

如果行高>容器的高度，文字在哪里?偏底边

行高<容器的高度，文字在哪里?偏上边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UT

最低0.47元/天解锁文章

熬只小饼干

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
页面设计

1.一般的完成页面设计2.元素在页面上的显示方式3.行高4.继承性5.覆盖:优先级6.选择器选取规则7.背景颜色和背景图像
复制链接

扫一扫

页面设计

1.一般的完成页面设计

2.元素在页面上的显示方式

3.行高

“相关推荐”对你有帮助么？