我遇到了一些基本的HTML和CSS问题,我认为它与我的HTML文件有关,试图找出表格。有人可以告诉我我做错了什么,以及如何使它看起来与我的例子相同。以下是我正在寻找的例子。表格和HTML5标记

CSS和HTML代码:

html {

background: purple;

padding: 0px;

margin: 0px;

}

#pageWrapper {

display: table;

vertical-align: top;

}

body {

font-family: Verdana, Arial, sans-serif;

background-color: white;

width: 800px;

height: 40%;

margin-left: auto;

margin-right: auto;

}

nav {

padding: 15px;

}

section {

width: 200px;

display: table-cell;

}

article {

width: 550px;

display: table-cell;

}

aside {

width: 225px;

display: table-cell;

}

footer {

text-align: center;

}

#header {

display: table-cell;

vertical-align: top;

background-color: white;

}

nav ul {

display: inline;

margin: 0px;

list-style-type: none;

padding: 5px 0px 5px 0px;

}

ul li {

display: inline;

padding: 5px 0px 5px 0px;

}

ul li a:link,

ul li a:visited {

color: green;

text-decoration: none;

}

ul li a:hover {

background-color: #c8b99c;

}

RAW Paste Data html {

background: purple;

padding: 0px;

margin: 0px;

}

#pageWrapper {

display: table;

vertical-align: top;

}

body {

font-family: Verdana, Arial, sans-serif;

background-color: white;

width: 800px;

height: 40%;

margin-left: auto;

margin-right: auto;

}

nav {

padding: 15px;

}

section {

width: 200px;

display: table-cell;

}

article {

width: 550px;

display: table-cell;

}

aside {

width: 225px;

display: table-cell;

}

footer {

text-align: center;

}

#header {

display: table-cell;

vertical-align: top;

background-color: white;

}

nav ul {

display: inline;

margin: 0px;

list-style-type: none;

padding: 5px 0px 5px 0px;

}

ul li {

display: inline;

padding: 5px 0px 5px 0px;

}

ul li a:link,

ul li a:visited {

color: green;

text-decoration: none;

}

ul li a:hover {

background-color: #c8b99c;

}

Credit 4 Practical

Home |

Link 1 |Link 2 |Link 3 |Link 4

First Column Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Article Vivamus facilisis tincidunt eleifend. Mauris ultricies consequat molestie. Nam congue lectus et augue condimentum eget tincidunt quam pretium. Mauris ullamcorper, justo eu pulvinar placerat, risus nulla faucibus ligula,

non convallis erat massa ut erat. Proin porta feugiat dolor, sed consequat ante tristique et. Praesent ornare, odio in varius interdum, velit nisl sollicitudin urna, quis dapibus urna sapien eu neque. Maecenas bibendum, libero eu dictum semper,

sem ipsum congue nisl, a mollis est quam in velit. Cras vitae ligula ut nunc viverra dapibus. Vivamus facilisis eros sit amet est mollis pellentesque. Ut quis odio vel urna ornare lacinia. Aliquam vel justo posuere purus vehicula aliquam. Duis

ornare mollis nisi luctus suscipit. Sed viverra urna id enim malesuada ac ullamcorper risus sollicitudin. Maecenas faucibus tincidunt facilisis. Donec eu nibh ac metus aliquet imperdiet sit amet in eros. Ut ut nibh elit.

Aside Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril.

Footer The small print that goes in the footer. This hyperlink should display as a normally formatted link.

我想是最基本的,我可以,我还没有被引入到弯曲盒或类似的东西。

例子:

+0

Bioxvirus喜? ,请在邮件中包含代码,而不仅仅是链接到第三方网站。另外*“这是我正在寻找的例子”*不链接到任何东西 - 你忘了包括什么?目前还不清楚你的最终目标是什么。 –

+0

你试图模拟的例子在哪里? –

+0

你的html代码中没有,你想在表格中使用哪部分代码? –

A

回答

0

html {

background-color: purple;

}

body {

width: 800px;

margin-left: auto;

margin-right: auto;

background-color: white;

}

#pageWrapper {

display: flex;

}

section, aside { flex: 1; }

article { flex: 2; }

footer {

text-align: center;

}

nav {

padding: 15px;

display: flex;

justify-content: center;

}

nav ul {

margin: 0px;

list-style-type: none;

padding: 5px 0px 5px 0px;

}

ul li {

display: inline;

padding: 5px 0px 5px 0px;

}

ul li a:link,

ul li a:visited {

color: green;

text-decoration: none;

}

ul li a:hover {

background-color: #c8b99c;

}

Credit 4 Practical

Home |

Link 1 |Link 2 |Link 3 |Link 4

First Column Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Article Vivamus facilisis tincidunt eleifend. Mauris ultricies consequat molestie. Nam congue lectus et augue condimentum eget tincidunt quam pretium. Mauris ullamcorper, justo eu pulvinar placerat, risus nulla faucibus ligula,

non convallis erat massa ut erat. Proin porta feugiat dolor, sed consequat ante tristique et. Praesent ornare, odio in varius interdum, velit nisl sollicitudin urna, quis dapibus urna sapien eu neque. Maecenas bibendum, libero eu dictum semper,

sem ipsum congue nisl, a mollis est quam in velit. Cras vitae ligula ut nunc viverra dapibus. Vivamus facilisis eros sit amet est mollis pellentesque. Ut quis odio vel urna ornare lacinia. Aliquam vel justo posuere purus vehicula aliquam. Duis

ornare mollis nisi luctus suscipit. Sed viverra urna id enim malesuada ac ullamcorper risus sollicitudin. Maecenas faucibus tincidunt facilisis. Donec eu nibh ac metus aliquet imperdiet sit amet in eros. Ut ut nibh elit.

Aside Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril.

Footer The small print that goes in the footer. This hyperlink should display as a normally formatted link.

由此产生的例图对不起,我是不是在我的第一个反应,希望更清晰,这是一个正确的响应....

2017-03-07 17:42:16

Bioxvirus

html与表格无关的标记,表格和HTML5标记相关推荐

  1. px word 表格宽度_「Word技巧」掌握这六个Word表格处理技巧,表格排版不再是问题...

    在日常的Word应用中,不只会涉及到文字排版,还经常会涉及到表格排版.那么,熟练掌握Word表格处理技巧,有助于提高你的排版效率哦. 今天,我整理了七个关于word排版处理技巧,都是很基础又常见的问题 ...

  2. java中怎么创建表格_Java中的表格怎么利用表格模型进行创建

    Java中的表格怎么利用表格模型进行创建 发布时间:2020-12-03 16:44:43 来源:亿速云 阅读:89 作者:Leah 本篇文章给大家分享的是有关Java中的表格怎么利用表格模型进行创建 ...

  3. 常用的表格检测识别方法-表格内容识别方法

    常用的表格检测识别方法 3.3 表格内容识别方法 表格识别的研究主要涉及两个方面,一方面是对单元格内的文本进行识别,这一步通常是在确定单元格区域后,利用较为稳定的光学字符识别方法(OCR)来实现,这一 ...

  4. 常用的表格检测识别方法——表格结构识别方法 (下)

    常用的表格检测识别方法--表格结构识别方法(下) 3.2表格结构识别方法 表格结构识别是表格区域检测之后的任务,其目标是识别出表格的布局结构.层次结构等,将表格视觉信息转换成可重建表格的结构描述信息. ...

  5. 常用的表格检测识别方法——表格结构识别方法(上)

    第三章 常用的表格检测识别方法 3.2表格结构识别方法 表格结构识别是表格区域检测之后的任务,其目标是识别出表格的布局结构.层次结构等,将表格视觉信息转换成可重建表格的结构描述信息.这些表格结构描述信 ...

  6. 常用的表格检测识别方法-表格区域检测方法(上)

    常用的表格检测识别方法 表格检测识别一般分为三个子任务:表格区域检测.表格结构识别和表格内容识别.本章将围绕这三个表格识别子任务,从传统方法.深度学习方法等方面,综述该领域国内国外的发展历史和最新进展 ...

  7. html表格纵向间距,HTML表格间距怎么设置

    1 回答 2021-05-06 浏览:3 分类:其他问题 回答:1.CSS法 可以在标签中设置margin属性,即:style="margin:5px 0 5px 0;"(顺序:上 ...

  8. 【编程学习】每天进步一点点,编程学习之路:一款表格数据处理软件 - CSV表格数据处理器v1.0.1

    [编程学习]每天进步一点点,编程学习之路:一款表格数据处理软件 - CSV表格数据处理器v1.0.1 写在前面1:软件编写缘由 在读研实习期间,因为公司时常有处理大量表格数据的需求,加上自己有一些Py ...

  9. 计算机怎样将多行文字转换成表格,如何将Word表格多行内容转成一列的技巧

    在日常办公应用中,我们经常会遇到将一个表格中各行内容连接起来作为一列形成新表的情况.以下是学习啦小编为您带来的关于将Word表格多行内容转成一列的技巧,希望对您有所帮助. 将Word表格多行内容转成一 ...

最新文章

  1. 深度学习编译与优化Deep Learning Compiler and Optimizer
  2. break continue
  3. (七)STM32的RTC简单操作
  4. linux iptables规则组成及用法
  5. 利用redis漏洞远程添加计划任务挖取比特币
  6. 最大玻尔兹曼分布的mASK信号在AWGN信道下的容量计算
  7. centos php mcrypt,CentOS yum php mcrypt 扩展安装方法
  8. 2.Android的学习(Android的环境搭建)
  9. piovt table python_python – Pandas:pivot和pivot_table之间的区别...
  10. linux iio 设备驱动,Linux设备驱动之IIO子系统——IIO框架数据读取-Go语言中文社区...
  11. 第5条:用枚举表示状态、选项、状态码
  12. C 库函数 - abs()
  13. sar —— Linux 上最为全面的系统性能分析工具之一
  14. 重磅!《中华人民共和国个人信息保护法》今日起施行!
  15. 无线遥控433MHz编码发射
  16. 在那海的那边,山的那边,有一条蓝鲸鱼----它的名字叫Docker!!
  17. java对excel加密_随笔:Java 对Excel等文件进行加密、解密
  18. 177.5. FAQ
  19. 细数银行7大手续费 这些冤枉钱别再交了
  20. bind9 dlz mysql_bind9+dlz+mysql连接断开问题

热门文章

  1. ZooKeeper CentOS7上安装
  2. C# Redis的操作
  3. 00049_super关键字
  4. 【MyBatis源码解析】MyBatis一二级缓存
  5. PL/SQL TOAD 不安装Oracle客户端连接数据库的方法
  6. 预备作业02 1501 李俊
  7. Java邮件服务学习之一:邮件服务概述
  8. JSP的优势与劣势浅析
  9. jquery尺寸:宽度与高度
  10. jQuery入门[2]-选择器