html怎样完成行式布局,三行式混合布局练手(html+css)

最终效果为下图,现在通过记号的形式对以下布局进行拆分并编写笔记。

20200517012449622292.png

①Header,header具体内容为logo和nav,可以用两列布局来实现,编写

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我了解您的问题。那么,您想知道如何使用 HTMLCSS 和 JSP 来完成前端页面的布局和实现,对吧? 首先,让我们来看一下 HTMLHTML 是一种标记语言,用于描述网页的结构和内容。您可以使用 HTML 标记来创建网页的各种元素,例如标题、段落、列表、表格、图像等等。以下是一个简单的 HTML 页面的例子: ``` <!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是一个段落</p> <ul> <li>列表项1</li> <li>列表项2</li> </ul> </body> </html> ``` 在这个例子中,我们使用了 `<html>` 元素来定义整个网页,使用 `<head>` 元素来定义网页的头部信息,包括标题等等。而 `<body>` 元素用于定义网页的主体内容,包括各种元素,例如标题、段落、列表等等。 接下来,让我们来看一下 CSSCSS 是一种样表语言,用于描述网页的外观和样。通过 CSS,您可以为 HTML 元素定义各种样,例如颜色、字体、大小、边框、背景等等。以下是一个简单的 CSS表的例子: ``` h1 { color: #333; font-size: 24px; text-align: center; } p { color: #666; font-size: 16px; line-height: 1.5; } ul { list-style: none; padding: 0; margin: 0; } li { color: #999; font-size: 14px; padding: 5px 10px; border-bottom: 1px solid #ddd; } ``` 在这个例子中,我们使用了各种 CSS 属性来定义不同元素的样,例如 `color` 用于定义文字颜色,`font-size` 用于定义字体大小,`text-align` 用于定义文字对齐方,`list-style` 用于定义列表样等等。 最后,让我们来看一下 JSP。JSP 是一种 Java 技术,用于动态生成 HTML 页面。您可以在 JSP 页面中使用 Java 代码来生成 HTML 元素,例如表格、列表、表单等等。以下是一个简单的 JSP 页面的例子: ``` <%@ page language="java" contentType="text/html; charset=UTF-8" %> <!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎来到 <%= request.getContextPath() %> 的网页</h1> <p>当前时间是 <%= new java.util.Date() %></p> <ul> <% for (int i = 1; i <= 5; i++) { %> <li>列表项 <%= i %></li> <% } %> </ul> </body> </html> ``` 在这个例子中,我们使用了 `<% %>` 标记来插入 Java 代码,例如使用 `request.getContextPath()` 插入当前上下文路径,使用 `new java.util.Date()` 插入当前时间,使用 `for` 循环插入列表项等等。 综上所述,使用 HTMLCSS 和 JSP 可以完成前端页面的布局和实现。您可以使用 HTML 描述页面结构和内容,使用 CSS 描述页面样和外观,使用 JSP 生成动态内容和数据。希望这能对您有所帮助!

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值