前端web入门第四天】03 显示模式+综合案例热词与banner效果

简介: 本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。

文章目录:



1. 显示模式

什么是显示模式
标签(元素)的显示方式

标签的作用是什么?
布局网页的时候,根据标签的显示模式选择合适的标签摆放内容。

显示模式分为几种,分别是什么?
3种,块级元素,行内元素,行内块元素

1.1 块级元素,行内元素,行内块元素

  • 块级元素
    • 独占一行
    • 宽度默认是父级的100%
    • 添加宽高属性生效
如:div标签
  • 行内元素
    • 一行共存多个,
    • 尺寸由内容撑开
    • 加宽高不生效
      如:span标签
      
  • 行内块元素
    • 一行共存多个,
    • 尺寸由内容撑开
    • 宽高属性生效
      如:img标签
      

1.2 转换显示模式

image.png

综合案例

综合案例一 热词

设计稿如下:
image.png

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热词</title>
    <style>
     a{
    
        width: 200px;
        height: 80px;

        display:block;
        background-color: #3064bb;
        color:#fff;
        text-align: center;
        text-decoration: none;
        line-height: 80px;
        font-size: 18px;
     }

     a:hover{
    
        background-color:#608dd9 ;
     }
    </style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
</html>

效果如下:
image.png

综合案例二 banner效果

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner{
    
            height: 500px;
            background-color: #f3f3f4;
            background-image: url(./images/bk.png);
            background-repeat: no-repeat;
            background-position: left bottom;

            text-align:right;
            color: #333333;
        }
        .banner h2{
    
            font-size: 36px;
            font-weight: 400;  /*去掉加粗 */
            line-height: 100px;
        }
        .banner p{
    
            font-size: 20px;
        }
        .banner a{
    
            width: 125px;
            height: 40px;
            background-color: #f06b1f;
            text-decoration: none;
            color: #fff;
            display: inline-block;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
        }
        .banner a:hover{
    
            color: black;
        }
    </style>
</head>
<body>
   <div class="banner">
    <h2>让创造产生价值</h2>
    <p>我们希望小游戏平台可以提供无限的可能性,让每一个创作者都可以将他们的才华和创意传递给用户。</p>
    <a href="#">我要报名</a>
   </div> 
</body>
</html>

效果如下:
image.png

注意:

CSS尽量不要直接美化标签,应指明具体

行内需要转换为行内块


相关文章
|
9天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
12天前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
13 1
前端一键回到顶部案例
|
23小时前
|
前端开发 JavaScript 微服务
拥抱微前端架构:构建未来Web应用的新思路
随着互联网技术的发展,Web应用日益复杂,传统单体架构已难以满足需求。微前端架构将大型应用拆分为独立模块,便于管理和迭代。其核心优势包括技术栈无关性、独立部署、团队协作及易于扩展。实施时需定义边界、选用框架(如Single-spa)、管理状态通信,并解决样式隔离和安全性等问题。尽管存在挑战,微前端架构凭借灵活性和高效性,有望成为未来Web开发的主流趋势。
|
9天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
12天前
|
前端开发 开发者 Python
从零到一:Python Web框架中的模板引擎入门与进阶
在Web开发的广阔世界里,模板引擎是连接后端逻辑与前端展示的重要桥梁。对于Python Web开发者而言,掌握模板引擎的使用是从零到一构建动态网站或应用不可或缺的一步。本文将带你从基础入门到进阶应用,深入了解Python Web框架中的模板引擎。
15 3
|
10天前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
11天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
11天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
12天前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
24 0
前端基础(十)_Dom自定义属性(带案例)
|
14天前
|
JSON 前端开发 JavaScript
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例,包括了服务端和客户端的代码实现,以及如何通过socket.io进行事件的发送和监听来实现实时通信。
15 2
下一篇
无影云桌面