web复习（四）

最新推荐文章于 2025-08-05 18:29:34 发布
最新推荐文章于 2025-08-05 18:29:34 发布
阅读量923 收藏 12
点赞数 37
CC 4.0 BY-SA版权
文章标签： 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzx13290757580/article/details/148356125

盒子模型的例题

例一：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>咖啡店banner</title>
<style type="text/css">
/*将页面中所有元素的内外边距设置为0*/
*{ padding:0; margin:0;}
.outer{       /*设置外面盒子的样式*/
	width:900px;
	height:344px;
	margin:50px auto;
	background:url(images/bg.png) repeat-x;
}
.inner{        /*设置里面盒子的样式*/
	width:900px;
	height:344px;
	background:url(images/coffee.png) no-repeat center 30px;
}


</style>
</head>
<body>
	<div class="outer">
    	<div class="inner"></div>
    </div>
</body>
</html>

1. <!doctype html>

  • 定义：这是文档类型声明，用于告诉浏览器这是一个HTML5文档。

  • 作用：确保浏览器以标准模式（Standards Mode）渲染页面，避免兼容性问题。

2. <html>

  • 定义：根元素，表示HTML文档的开始和结束。

  • 内容：包含文档的所有其他HTML元素。

3. <head>

  • 定义：包含文档的元数据（metadata），如字符集、标题和样式信息。

  • 内容：

    • <meta charset="utf-8">：设置文档的字符编码为UTF-8，确保正确显示各种字符。

    • <title>咖啡店banner</title>：设置网页的标题为“咖啡店banner”，在浏览器标签页中显示。

    • <style type="text/css">：内联样式表，用于定义页面的CSS样式。

4. CSS 样式

*{ padding:0; margin:0;}

  • 定义：全局重置样式，将所有元素的内外边距设置为0。

  • 作用：消除不同浏览器默认样式的差异，确保页面布局的一致性。

.outer{ width:900px; height:344px; margin:50px auto; background:url(images/bg.png) repeat-x; }

  • 定义：设置一个外部容器（outer）的样式。

    • width:900px;：设置宽度为900像素。

    • height:344px;：设置高度为344像素。

    • margin:50px auto;：顶部和底部外边距为50像素，左右外边距为自动（使容器水平居中）。

    • background:url(images/bg.png) repeat-x;：设置背景图片为images/bg.png，并在水平方向重复显示。

.inner{ width:900px; height:344px; background:url(images/coffee.png) no-repeat center 30px; }

  • 定义：设置内部容器（inner）的样式。

    • width:900px;：设置宽度为900像素。

    • height:344px;：设置高度为344像素。

    • background:url(images/coffee.png) no-repeat center 30px;：设置背景图片为images/coffee.png，不重复显示，位置为水平居中，垂直偏移30像素。

5. <body>

  • 定义：包含文档的可见内容。

  • 内容：

    • <div class="outer">：创建一个外部容器div。

      • <div class="inner"></div>：在外部容器内部创建一个内部容器div。

6. 结构分析

  • 外层容器（outer）：提供一个固定大小的外部框架，背景是水平重复的图片bg.png，上下外边距为50像素，使整个横幅在页面中居中显示。

  • 内层容器（inner）：放置在外部容器内部，背景是不重复的图片coffee.png，位置稍作偏移（center 30px），确保图片在其中正确显示。

7. 功能总结

  • 页面布局：通过CSS样式控制页面布局，确保横幅的大小和位置固定。

  • 背景图片：使用外部和内部容器的背景图片组合，创建一个视觉上完整的横幅效果。

  • 居中显示：通过margin:50px auto;将横幅水平居中显示在页面上。

这段代码通过简单的HTML和CSS实现了网页横幅的基本布局和样式设置，适用于静态的网页设计。

例二：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标导航栏</title>
<style type="text/css">
/*将页面中所有元素的内外边距设置为0*/
*{ padding:0; margin:0;}
.all{          /*控制外面的大盒子*/
	width:630px;
	height:45px;
	margin:50px auto;
	background-color:#192132;
	padding-left:20px;
	border-bottom:3px solid #000;
}
span{          /*整体控制小盒子*/
	display:inline-block;
	width:80px;
	height:45px;
	border-bottom:3px solid #1ba2c7;
}
/*给小盒子设置不同的背景图像*/
.one{background:url(images/1.png) no-repeat;}
.two{background:url(images/2.png) no-repeat;}
.three{background:url(images/3.png) no-repeat;}
.four{background:url(images/4.png) no-repeat;}
.five{background:url(images/5.png) no-repeat;}
.six{background:url(images/6.png) no-repeat;}
.seven{background:url(images/7.png) no-repeat;}


</style>
</head>
<body>
<div class="all">
    <span class="one"></span>
    <span class="two"></span>
    <span class="three"></span>
    <span class="four"></span>
    <span class="five"></span>
    <span class="six"></span>
    <span class="seven"></span>
</div>
</body>
</html>

1. <!doctype html>

  • 定义：文档类型声明，用于告诉浏览器这是一个HTML5文档。

  • 作用：确保浏览器以标准模式（Standards Mode）渲染页面，避免兼容性问题。

2. <html>

  • 定义：根元素，表示HTML文档的开始和结束。

  • 内容：包含文档的所有其他HTML元素。

3. <head>

  • 定义：包含文档的元数据（metadata），如字符集、标题和样式信息。

  • 内容：

    • <meta charset="utf-8">：设置文档的字符编码为UTF-8，确保正确显示各种字符。

    • <title>图标导航栏</title>：设置网页的标题为“图标导航栏”，在浏览器标签页中显示。

    • <style type="text/css">：内联样式表，用于定义页面的CSS样式。

4. CSS 样式

*{ padding:0; margin:0;}

  • 定义：全局重置样式，将所有元素的内外边距设置为0。

  • 作用：消除不同浏览器默认样式的差异，确保页面布局的一致性。

.all{ width:630px; height:45px; margin:50px auto; background-color:#192132; padding-left:20px; border-bottom:3px solid #000; }

  • 定义：设置一个外部容器（all）的样式。

    • width:630px;：设置宽度为630像素。

    • height:45px;：设置高度为45像素。

    • margin:50px auto;：上下外边距为50像素，左右外边距为自动（使容器水平居中）。

    • background-color:#192132;：设置背景颜色为深蓝色（#192132）。

    • padding-left:20px;：设置左侧内边距为20像素。

    • border-bottom:3px solid #000;：设置底部边框为3像素宽的黑色实线。

span{ display:inline-block; width:80px; height:45px; border-bottom:3px solid #1ba2c7; }

  • 定义：设置span元素的样式。

    • display:inline-block;：将span元素设置为内联块级元素，使其可以同时具有内联和块级的特性。

    • width:80px;：设置宽度为80像素。

    • height:45px;：设置高度为45像素。

    • border-bottom:3px solid #1ba2c7;：设置底部边框为3像素宽的蓝色实线。

.one{background:url(images/1.png) no-repeat;}

  • 定义：设置类one的样式。

    • background:url(images/1.png) no-repeat;：设置背景图片为images/1.png，并设置为不重复显示。

.two{background:url(images/2.png) no-repeat;}

  • 定义：设置类two的样式。

    • background:url(images/2.png) no-repeat;：设置背景图片为images/2.png，并设置为不重复显示。

.three{background:url(images/3.png) no-repeat;}

  • 定义：设置类three的样式。

    • background:url(images/3.png) no-repeat;：设置背景图片为images/3.png，并设置为不重复显示。

.four{background:url(images/4.png) no-repeat;}

  • 定义：设置类four的样式。

    • background:url(images/4.png) no-repeat;：设置背景图片为images/4.png，并设置为不重复显示。

.five{background:url(images/5.png) no-repeat;}

  • 定义：设置类five的样式。

    • background:url(images/5.png) no-repeat;：设置背景图片为images/5.png，并设置为不重复显示。

.six{background:url(images/6.png) no-repeat;}

  • 定义：设置类six的样式。

    • background:url(images/6.png) no-repeat;：设置背景图片为images/6.png，并设置为不重复显示。

.seven{background:url(images/7.png) no-repeat;}

  • 定义：设置类seven的样式。

    • background:url(images/7.png) no-repeat;：设置背景图片为images/7.png，并设置为不重复显示。

5. <body>

  • 定义：包含文档的可见内容。

  • 内容：

    • <div class="all">：创建一个外部容器div。

      • <span class="one"></span>：在外部容器内部创建一个带有类one的span元素。

      • <span class="two"></span>：在外部容器内部创建一个带有类two的span元素。

      • <span class="three"></span>：在外部容器内部创建一个带有类three的span元素。

      • <span class="four"></span>：在外部容器内部创建一个带有类four的span元素。

      • <span class="five"></span>：在外部容器内部创建一个带有类five的span元素。

      • <span class="six"></span>：在外部容器内部创建一个带有类six的span元素。

      • <span class="seven"></span>：在外部容器内部创建一个带有类seven的span元素。

6. 结构分析

  • 外层容器（all）：提供一个固定大小的外部框架，背景颜色为深蓝色（#192132），底部有黑色边框，左右外边距为自动（使容器水平居中）。

  • 内层元素（span）：每个span元素代表一个导航图标，宽度为80像素，高度为45像素，底部有蓝色边框。每个span元素通过不同的类（如one、two等）设置不同的背景图片。

7. 功能总结

  • 页面布局：通过CSS样式控制页面布局，确保导航栏的大小和位置固定。

  • 图标显示：使用多个span元素，每个元素设置不同的背景图片，形成一个带有图标导航栏的视觉效果。

  • 居中显示：通过margin:50px auto;将导航栏水平居中显示在页面上。

丸卜
关注
Web安全期末复习
kaisaooo的博客
07-02 6781
目录前言知识点Web应用开发基础Web信息收集Web漏洞扫描SQL注入文件上传攻击跨站脚本攻击（XSS）跨站请求伪造命令执行漏洞Web Server配置安全认证和授权日志系统构建及日志分析实战与综合简答题复习要点ASP.NET的安全控件web应用系统的数据加密数据库安全通信身份验证日志分析安全配置一套习题 前言 本文用来记录Web安全的复习资料，大部分内容都是从老师ppt的复习范围中节选的，可能不太全，经过考试的心得：有时间的可以多看看，考的比较杂啥都有，但是SQL注入、XSS、文件上传漏洞是重中之重。有
Web期末复习指南（2w字总结）
luming的博客
06-15 9845
本文旨在梳理Web技术常包含的内容，阅读完整篇文章后会对整体有个系统的认知，从前端的HTML到后端的MySql，对于大概试题中可能会涉及的地方都有所分析，通篇提供了许多代码案例，供读者更好的理解。对于一些很细节的东西如DOM对象、MySql的案例等等，笔者很想继续分享下去，但是受限于篇幅的原因只能点到为止，后面会考虑继续补充，争取覆盖到全部的知识点。
JAVA Web 期末复习
qq_52619275的博客
01-01 807
javaweb期末题复习
Web程序设计（期末复习知识点）
qiqi_liuliu的博客
12-26 2388
“可能”的考点
Web期末复习考试点总结
qq_54162207的博客
05-11 7304
前言 刚刚复习过web相关知识点以备战期末考试，期末考试刚过，把考试点共享出来，以便自己之后对概念能快速回顾，也望文章能帮助到大家，由于是考试的考试点总结，因此知识点并不全面，望大家理解。 参考资料：Java Web程序设计（慕课版 第2版）——基于SSM（Spring+SpringMVC+MyBatis）框架 主主编：梁永先，陈滢生，尹校军 副主编：桑园，王兰，张军丽 第一章 Web：web是分布在全世界的、基于HTTP通信协议的、存储在web服务器中的所有互相链接的超文本集。 Web发展历程：静态文档阶
Web期末复习
weixin_40375415的博客
06-06 386
期末复习
java web期末复习_javaweb期末考试.doc
weixin_32541907的博客
03-07 1765
javaweb期末考试1、下面哪一个不是动态网页技术( )。ASP B.JSP C.PHP D.HTML2、下列关于Tomcat说法不正确的是( )。A.Tomcat是一个Servlet容器。B.Tomcat是一种编程语言。C.Tomcat是一个免费开源的项目。D.Tomcat的默认端口是8080。3、可以实现不同网页之间的数据共享，而且还可以实现跨机共享数据的...
web期末复习题
qq_51387458的博客
06-19 1717
1、当访问一个Servlet时，以下Servlet中的哪个方法先被执行？( D ) (A) destroy() (B) doGet() (C) service() (D) init02、假设在myServlet应用中有一个MyServlet类，在web.xml文件中对其进行如下配置： mysrvlet com.wgh.MyServlet......
java web期末复习_JAVAWEB期末复习题库
weixin_35747627的博客
02-26 1773
JAVAWEB期末复习题库 javaweb期末复习题库 jsp/Servlet1、当访问一个Servlet时，以下Servlet中的哪个方法先被执行？( D ) (A) destroy() (B) doGet() (C) service() (D) init02、假设在myServlet应用中有一个MyServlet类，在web.xml文件中对其进行如下配置： ...
java web期末复习_javaweb期末复习知识点整理
weixin_39574050的博客
02-26 915
1、 Web应用概述1. URL与URIURL: 统一资源定位器URI：统一资源定位符2. 常见HTML标签3. 表单的处理4. 静态文档与动态文档的概念：静态文档是一种以文件的形式存放在服务器端的文档，客户发出对该文档的请求，服务器返回这个文档。动态文档是指文档的内容可根据需要动态生成，又可分为服务器端动态文档和客户端动态文档技术。5. Servlet概念：服务器端小程序，是使用ServletA...
基于java的web复习题
01-14
### 基于Java的Web复习题解析 #### 一、内置对象及其作用 在Java Web开发中，尤其是在使用JSP技术时，内置对象是非常重要的概念。这些对象由JSP容器自动创建，开发者无需手动实例化，直接在脚本代码或表达式中使用...
山东大学web期末复习.pdf
01-06
山东大学web期末复习资料 本资源为山东大学web期末复习资料，涵盖了HTML基本结构、标记属性、基本语法、网页元信息、文本修饰、列表、超链接、图像、表格、表单、CSS选择器等多方面的知识点。 一、HTML基本结构 ...
Web前端技术（期末复习 选填、判断、简答、编程等超全总结）.zip
07-17
这份名为"Web前端技术（期末复习 选填、判断、简答、编程等超全总结）.zip"的压缩包文件包含了全面的Web前端学习资源，适合期末复习和备考。以下是基于该压缩包文件可能包含的知识点的详细说明： 1. HTML...
2025动态web技术复习题库.rar
07-27
因此，为了跟上技术的步伐，专门针对动态Web技术的复习题库成为了一项宝贵的资源，对于相关领域的专业人员和学习者来说，这些复习题库能够帮助他们巩固知识、检验学习成果，并为实际开发工作提供理论支撑。...
山东大学Web复习资料.zip
09-03
在山东大学的Web复习资料中，我们可以看到这四个主要部分：Web知识点、课件中星号重点、考试重点整理以及2015-2016年的期末考试题，这些都是理解并掌握Web技术的关键。 【Web知识点】 Web知识点涵盖广泛，从基础的...
如何在nuxt项目中进行meta信息注入
最新发布
胡西风的博客
08-05 338
本文详细介绍了在Nuxt.js框架中配置Meta信息的多种方法。全局配置可在nuxt.config.js中设置默认Meta值，页面级配置通过head()方法覆盖全局设置，组件中也可单独配置。文章重点讲解了动态Meta生成方式，包括基于接口数据和使用useHead组合式API（Nuxt 3）。特别强调了hid标识符的重要性，用于避免Meta标签重复。配置遵循页面级优先于全局的原则，同时支持服务端渲染，确保SEO友好性。这些方法使开发者能灵活管理不同页面的标题、描述等关键SEO元素。
用 Python 打造 Web GUI：深入解析 Remi 库
萧鼎的博客
08-04 830
Remi：用Python构建Web界面的轻量级GUI框架 Remi是一个创新的Python GUI库，它将传统桌面GUI开发与Web前端优势相结合。开发者可以使用类似Tkinter的纯Python代码构建应用，却能在浏览器中运行这些程序。Remi完全基于Python标准库，无需额外依赖，支持跨平台部署，启动本地Web服务器并通过浏览器渲染界面。它提供了丰富的组件（按钮、表格、上传器等）和灵活的布局容器，支持动态UI更新和事件处理。与传统GUI库相比，Remi的独特之处在于将桌面编程范式迁移到Web环境，通过
Ollama前端：open-webui
08-02 310
【代码】Ollama前端：open-webui。
Python import 详解
我是程序员海军, 全栈开发 | AI爱好者 ｜ 独立开发。
08-05 304
Python的import机制用于引入模块和包，支持多种导入方式如整个模块导入、别名设置和特定对象导入。模块搜索路径依次为当前目录、PYTHONPATH和Python安装路径。包是包含__init__.py的文件夹，用于组织模块。Python还支持动态导入，但需注意避免循环导入和命名冲突问题。与前端模块系统相比，Python的import更灵活，提供了更多导入选项和动态加载功能。
HTML与C#结合的Web复习重点
"这是一份关于C#和Web开发的复习资料，主要涵盖HTML基础知识，如HTML文件结构、标签使用、字符实体、链接创建、锚点定位、框架使用以及表格属性等。" 在这份复习资料中，我们首先关注HTML的基础知识。HTML（超文本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值