江帅帅

《HTML 简易速速上手小册》第5章：HTML 高级布局技巧（2024 最新版）

文章目录

5.1 使用 Div 和 Span 进行布局
- 5.1.1 基础知识：
- 5.1.2 案例1：创建一个简单的布局
- 5.1.3 案例2：为文本创建特别的样式
- 5.1.4 案例3：创建一个导航栏
5.2 构建复杂的页面结构
- 5.2.1 基础知识：
- 5.2.2 案例 1：创建一个带有侧边栏和内容区的布局
- 5.2.3 案例 2：创建一个具有多个部分的页面
- 5.2.4 案例 3：创建一个带有嵌套容器的页面
5.3 创建响应式布局的基础
- 5.3.1 基础知识：
- 5.3.2 案例 1：使用百分比创建流式布局
- 5.3.3 案例 2：创建一个自适应的三列布局
- 5.3.4 案例 3：创建一个响应式图像画廊

5.1 使用 Div 和 Span 进行布局

5.1.1 基础知识：

Div 和 Span 是什么：在HTML的世界里，
和就像是建筑师的砖块和水泥。
是一个块级元素，它就像一个大箱子，可以装下其他元素。而是内联元素，更像是个小篮子，适合包裹文字或小东西。
为什么要用它们：使用
和可以帮助你组织页面内容，使结构更清晰，就像在书架上摆放书籍一样，每本书都有它的位置。

5.1.2 案例1：创建一个简单的布局

假设我们要创建一个包含标题、段落和一个按钮的简单页面布局。

使用 Div：

我们可以使用一个
来包裹整个内容，就像给你的内容建一个家。

示例代码：

<div>
  <h1>欢迎来到我的网页！h1>
  <p>这里有很多有趣的内容等着你。p>
  <button>探索更多button>
div>

使用 Span：
- 在段落中，我们想强调一些文本。这时，就像是我们的高光笔，帮助我们突出显示。
- 示例代码：
```
<p>这里有很多 <span style="font-weight:bold;">有趣的内容span> 等着你。p>
```

源码如下：

这个示例展示了一个基本的页面布局，包含标题、强调文本的段落和一个按钮。

DOCTYPE html>
<html>
<head>
    <title>简单页面布局title>
head>
<body>
    <div>
        <h1>欢迎来到我的网页！h1>
        <p>这里有很多 <span style="font-weight:bold;">有趣的内容span> 等着你。p>
        <button>探索更多button>
    div>
body>
html>

5.1.3 案例2：为文本创建特别的样式

假设我们有一段引用文字，我们想让它看起来与众不同。

创造一个引用效果：

我们可以用
来包裹这段引用，并用来给其中的某些词汇添加特别的样式。

源码如下：

此示例包含一个特别样式的引用文本，使用

和来实现特别的布局和强调效果。

DOCTYPE html>
<html>
<head>
    <title>特别样式文本title>
head>
<body>
    <div style="border-left: 3px solid grey; padding-left: 10px;">
        <p>“生活就像一盒巧克力，<span style="font-style:italic;">你永远不知道下一颗是什么味道。span>”p>
    div>
body>
html>

5.1.4 案例3：创建一个导航栏

让我们来创建一个简单的导航栏，虽然没有CSS的华丽外衣，但我们可以用HTML的魔法使它变得有趣。

构建导航结构：
- 使用
  来创建一个包含多个链接的导航栏。
- 每个链接都被包裹，以便将来添加样式。

源码如下：

这个示例演示了一个简单的导航栏，使用

和来组织链接。

DOCTYPE html>
<html>
<head>
    <title>简单导航栏title>
head>
<body>
    <div>
        <span><a href="#home">首页a>span> |
        <span><a href="#news">新闻a>span> |
        <span><a href="#contact">联系我们a>span> |
        <span><a href="#about">关于a>span>
    div>
body>
html>

通过这些案例，我们可以看到

和在构建网页布局中的多功能性和灵活性。它们就像是HTML布局的瑞士军刀，虽然看起来普通，但功能强大，能够帮助你实现各种布局效果。不要小看这些基本元素，它们可以帮助你构建出既简单又有效的网页布局！

5.2 构建复杂的页面结构

5.2.1 基础知识：

理解HTML结构：构建复杂页面就像堆积木一样。你需要知道如何正确地堆叠和组织你的
块，以创造出既有条理又吸引人的页面布局。
块级元素 vs 内联元素：块级元素（如
,
,
）占据整行，而内联元素（如 , ）则不会。了解这一点是布局设计的关键。

使用容器：在复杂的布局中，

元素常被用作容器，以组织和分隔页面的不同部分。

5.2.2 案例 1：创建一个带有侧边栏和内容区的布局

我们将构建一个简单的两栏布局，包括一个侧边栏和一个主内容区。

DOCTYPE html>
<html>
<head>
    <title>两栏布局title>
head>
<body>
    <div>
        <div style="float: left; width: 20%;">
            <p>侧边栏内容...p>
        div>
        <div style="float: left; width: 80%;">
            <p>主要内容区...p>
        div>
    div>
body>
html>

5.2.3 案例 2：创建一个具有多个部分的页面

接下来，我们将创建一个更复杂的页面，包括页眉、页脚和多个内容区域。

DOCTYPE html>
<html>
<head>
    <title>复杂页面布局title>
head>
<body>
    <header>
        <h1>页面标题h1>
    header>
    <div>
        <section>
            <h2>内容区 1h2>
            <p>这里是内容区 1 的描述...p>
        section>
        <section>
            <h2>内容区 2h2>
            <p>这里是内容区 2 的描述...p>
        section>
    div>
    <footer>
        <p>页脚信息...p>
    footer>
body>
html>

5.2.4 案例 3：创建一个带有嵌套容器的页面

最后，我们将创建一个布局更加复杂的页面，它包含嵌套的

来组织内容。

DOCTYPE html>
<html>
<head>
    <title>嵌套布局title>
head>
<body>
    <div>
        <header>
            <h1>网站标题h1>
        header>
        <nav>
            <ul>
                <li>导航 1li>
                <li>导航 2li>
                <li>导航 3li>
            ul>
        nav>
        <article>
            <section>
                <h2>文章标题h2>
                <p>文章内容...p>
            section>
            <aside>
                <h3>相关信息h3>
                <p>一些相关信息...p>
            aside>
        article>
        <footer>
            <p>版权信息...p>
        footer>
    div>
body>
html>

通过这些案例，我们探索了如何使用 HTML 元素构建从简单到复杂的页面结构。这些布局展示了

等元素在页面组织中的强大能力。通过这样的实践，你将更好地理解如何利用 HTML 构建丰富且有条理的网页结构。记住，构建网页就像是艺术创作，每个元素都是你画布上的一笔！

5.3 创建响应式布局的基础

5.3.1 基础知识：

响应式布局的意义：在不同设备上提供一致的用户体验是响应式布局的核心。这意味着你的网页应该能够自适应不同屏幕尺寸，无论是手机、平板还是桌面。
使用百分比和视口单位：而不是固定宽度，使用百分比（%）或视口宽度（vw）/视口高度（vh）单位可以帮助元素根据屏幕大小变化。
媒体查询的基本应用：媒体查询是CSS的一个功能，它允许你根据不同的屏幕尺寸应用不同的样式。虽然我们在这里不深入CSS，但理解其原理是有帮助的。

5.3.2 案例 1：使用百分比创建流式布局

我们将创建一个简单的两栏布局，使用百分比宽度以适应不同屏幕尺寸。

DOCTYPE html>
<html>
<head>
    <title>流式布局示例title>
    <style>
        .container {
            width: 100%;
        }
        .left, .right {
            width: 50%;
            float: left;
        }
    style>
head>
<body>
    <div class="container">
        <div class="left">左侧内容div>
        <div class="right">右侧内容div>
    div>
body>
html>

5.3.3 案例 2：创建一个自适应的三列布局

这个例子将显示一个三列布局，每列的宽度会根据视口大小进行调整。

DOCTYPE html>
<html>
<head>
    <title>自适应三列布局title>
    <style>
        .container {
            width: 100%;
        }
        .column {
            width: 33.33%;
            float: left;
        }
    style>
head>
<body>
    <div class="container">
        <div class="column">第一列内容div>
        <div class="column">第二列内容div>
        <div class="column">第三列内容div>
    div>
body>
html>

5.3.4 案例 3：创建一个响应式图像画廊

在这个例子中，我们将创建一个图像画廊，其中的图像会根据屏幕大小调整其大小。

DOCTYPE html>
<html>
<head>
    <title>响应式图像画廊title>
    <style>
        .gallery {
            width: 100%;
        }
        .gallery img {
            width: 100%;
            height: auto;
        }
    style>
head>
<body>
    <div class="gallery">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    div>
body>
html>

通过这些案例，你可以看到如何使用基本的HTML和简单的CSS来创建响应式布局。当然，在实际的项目中，响应式设计通常更复杂，需要更多的CSS技巧，如媒体查询。但这些例子提供了一个很好的起点，帮助你理解如何构建可以适应不同屏幕尺寸的基本布局。

你可能感兴趣的:(《HTML,简易速速上手小册》,html,前端)

理解Gunicorn：Python WSGI服务器的基石范范0825 ipython linux 运维
理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Spring MVC 全面指南：从入门到精通的详细解析一杯梅子酱技术栈学习 spring mvc java
引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
python简单好玩的编程代码,python有哪些好玩的代码 2301_81900439 pygame python 开发语言
大家好，小编来为大家解答以下问题，20行python代码的入门级小游戏，python有什么好玩的代码嘛，今天让我们一起来看看吧！哈喽铁子们表弟最近在学Python，总是跟我抱怨很枯燥无味，其实，他有没有认真想过，可能是自己学习姿势不对？比方说，可以通过打游戏来学编程！今天给大家分享100个Python小游戏，一定要收藏！1、简易飞机大战飞机大战相信大家都玩过吧，非常简单有意思的游戏，咱们通过Pyt
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
处理标签包裹的字符串，并取出前250字符周bro 前端 javascript 开发语言
//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
java Illegal overloaded getter method with ambiguous type for propert的解决 zwllxs java jdk
好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，
IT人应当知道的10个行业小内幕 beijingjava 工作互联网
10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配
java 实现自定义链表 CrazyMizzz java 数据结构
1.链表结构链表是链式的结构 2.链表的组成链表是由头节点，中间节点和尾节点组成节点是由两个部分组成： 1.数据域 2.引用域 3.链表的实现 &nbs
web项目发布到服务器后图片过一会儿消失麦田的设计者 struts2 上传图片永久保存
作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片
CodeIgniter框架Cart类 name 不能设置中文的解决方法 IT独行者 CodeIgniter Cart 框架　
今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '
linux回收站 _wy_ linux 回收站
今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在
jquery回到页面顶端知了ing html jquery css
html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><
B树、B-树、B+树、B*树矮蛋蛋 B树
原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树即二叉搜索树： 1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb
数据库连接池 alafqq 数据库连接池
http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼数据库连接池用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec
java泛型百合不是茶 java泛型
泛型在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患泛型的特点：消除强制转换确保类型安全向后兼容简单泛型的定义：泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan
javascript闭包[两个小测试例子] bijian1013 JavaScript JavaScript
一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　
探索JUnit4扩展：假设机制（Assumption） bijian1013 java Assumption JUnit 单元测试
一.假设机制（Assumption）概述理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，
【Gson四】范型POJO的反序列化 bit1129 POJO
在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO import com.google.gson.Gson; import java.
【Spark八十五】Spark Streaming分析结果落地到MySQL bit1129 Stream
几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，
NGINX + LUA实现复杂的控制 ronin47 nginx lua
安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
java-递归判断数组是否升序 bylijinnan java
public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv
Netty源码学习-DefaultChannelPipeline2 bylijinnan java netty
Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”：如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB）来
Java工具之JPS chinrui java
JPS使用熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来
window.print分页打印 ctrain window
function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) {
安装hadoop时执行jps命令Error occurred during initialization of VM daizj jdk hadoop jps
在安装hadoop时，执行JPS出现下面错误 [slave16][email protected]:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working
PHP开发大型项目的一点经验 dcj3sjt126com PHP 重构
一、变量最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十
android笔记之--向网络发送GET/POST请求参数 dcj3sjt126com android
使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi
linux复习笔记之bash shell (3) 通配符 eksliang linux 通配符 linux通配符
转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。下面列出一些常用的通配符，如下表所示符号意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c
Android关于短信加密 gqdy365 android
关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）： 1、因为Android有短信收发接口，可以调用接口完成短信收发；发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm
asp.net在网站根目录下创建文件夹 hvt .net C#hovertree asp.net Web Forms
假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D
一个合格的程序员应该读过哪些书 justjavac 程序员书籍
编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本，你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。以前就有国内网友介绍这个程序员书单，不过都是推荐数
单实例实践跑龙套_az 单例
1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes
PO VO BEAN 理解 q137681467 VO DTO po
PO：全称是 persistant object持久对象最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。 BO：全称是 business object:业务对象主要作用是把业务逻辑封装为一个对象。这个对
战胜惰性，暗自努力金笛子努力
偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？我有个朋友是搞技术的，平时嘻嘻哈哈，以
NDK/JNI二维数组多维数组传递 wenzongliang 二维数组 jni NDK
多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

《HTML 简易速速上手小册》第5章：HTML 高级布局技巧（2024 最新版）

文章目录

5.1 使用 Div 和 Span 进行布局

5.1.1 基础知识：

5.1.2 案例1：创建一个简单的布局

5.1.3 案例2：为文本创建特别的样式

5.1.4 案例3：创建一个导航栏

5.2 构建复杂的页面结构

5.2.1 基础知识：

）占据整行，而内联元素（如 , ）则不会。了解这一点是布局设计的关键。

5.2.2 案例 1：创建一个带有侧边栏和内容区的布局

5.2.3 案例 2：创建一个具有多个部分的页面

5.2.4 案例 3：创建一个带有嵌套容器的页面

你可能感兴趣的:(《HTML,简易速速上手小册》,html,前端)