CSS学习记录3/块级元素/行内元素/行内块级元素/百度首页制作

最新推荐文章于 2023-03-16 15:42:52 发布

小婵婵不怕鬼

最新推荐文章于 2023-03-16 15:42:52 发布

阅读量171

点赞数 1

分类专栏： css学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_49080239/article/details/125411989

版权

css学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

div标签：
一般用于配合CSS完成网页的基本布局。

span标签：
一般用于配合CSS修改网页中的局部信息。

div和span的区别：
1、div会单独的占领一行，而span不会单独占领一行。
2、div是一个容器级别的标签，而span是一个文本级别的标签。

容器级的标签和文本级的标签有什么区别？
容器级的标签可以嵌套其他所有的标签，而文本级的标签只能嵌套文字、超链接、图片。

容器级标签:div h ul ol dl li dt dd ···
文本级的标签：span p buis stong em ins del···

什么是块级元素？什么是行内元素？
块级元素会独占一行，行内元素不会独占一行。

块级元素：
p div h ul ol dl li dt dd ···
行内元素：
span buis stong em ins del···

块级元素和行内元素有什么区别？
1、块级元素独占一行，行内元素不独占一行。
2,、如果没有设置宽度，块级元素默认和父元素一样宽，如果设置了宽高就按照设置的显示；行内元素默认和内容一样宽，并且不可以设置宽度和高度。

行内块级元素：
为了元素既可以不独占一行又可以设置宽度和高度，就出现了行内块级元素。
img

显示模式转换：
设置元素的display属性。
取值：
block 块级快捷键：di
inline 行内快捷键：db
inline-block 行内块级快捷键：dib

百度首页练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <style>
        .header{
            height: 230px;
            background-color: white;
        }
        .content{
            height: 290px;
            background-color: white;
        }
        .footer{
            height: 210px;
            background-color: white;
        }
        div{
            text-align: center;
        }
        .logo{
            height: 150px;
        }
        input[type=text]{
            width: 400px;
            height: 25px;
        }
        input[type=submit]{
            width: 80px;
            height: 30px;
        }
        .search{
            height: 60px;
        }
        .baike{
            height: 130px;
        }
        .aq{
            height: 150px;
        }
        .weishi{
            height: 50px;
        }
        .tuiguang{
            height: 40px;
        }
        body{
            font-size: 14px;
            color: #b1b1a0;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo">
        <img src="images/百度.png" alt="">
    </div>
    <div>
        <a href="#">新 闻</a>
        <strong>网 页</strong>
        <a href="#">贴 吧</a>
        <a href="#">知 道</a>
        <a href="#">音 乐</a>
        <a href="#">图 片</a>
        <a href="#">视 频</a>
        <a href="#">地 图</a>
    </div>
</div>
<div class="content">
    <div class="search">
        <form action="">
            <input type="text">
            <input type="submit" value="百度一下">
        </form>
    </div>
    <div class="baike">
        <a href="#">百科</a>
        <a href="#">文库</a>
        <a href="#">hao123</a>
        |
        <a href="#">更多>></a>
    </div>
    <div class="aq">
        <img src="images/xiaotu.png">
        <a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
    </div>
</div>
<div class="footer">
    <div class="weishi">
        <a href="#">把百度设为主页</a>
        <a href="#">安装百度卫士</a>
    </div>
    <div class="tuiguang">
        <a href="#">加入百度推广</a>
        |
        <a href="#">搜索风云榜</a>
        |
        <a href="#">关于百度</a>
        |
        <a href="#">About Baidu</a>
    </div>
    <div>
        @2016 Baidu 使用前必读 京ICP证666号
    </div>
</div>
</body>
</html>

成果：
在这里插入图片描述

小婵婵不怕鬼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习记录3/块级元素/行内元素/行内块级元素/百度首页制作

div标签：一般用于配合CSS完成网页的基本布局。span标签：一般用于配合CSS修改网页中的局部信息。div和span的区别：1、div会单独的占领一行，而span不会单独占领一行。2、div是一个容器级别的标签，而span是一个文本级别的标签。容器级的标签和文本级的标签有什么区别？容器级的标签可以嵌套其他所有的标签，而文本级的标签只能嵌套文字、超链接、图片。容器级标签:div h ul ol dl li dt dd ···文本级的标签：span p buis stong em ins del
复制链接

扫一扫