1.

如果所示，问题:“首页”和“闲置”文字部分位于table中部

解决方法：需要取消vertical-align:middle属性，将其设置为vertical-align:top,并将文本的高度改为整个table的高度

改正后最终的实现效果为：

明显可以看到"首页"和"闲置"文字到了table顶部。

2.padding-left：距离左边界

float :left向左浮动

font-size ：设置字体大小

font-weight：字体粗细设置

设置图片为原型代码写为：<td ><img src="data:image/wff.jpg" style="width:60px;height:60px; margin-left:20px; border-radius:30px" /></td>

3.

实现：table中文字和图片的对齐

如图所示，整个图片是用div嵌套table来完成的，table内部又包含文字和图片两部分，让图片和文字左对齐的方式是将图片的行数设置为两行，文字部分则设置vertical-align:bottom即可，代码如下所示：

4.盒子模型的各部分组成

区分padding-left和margin-left的区别简单的说padding是内边距，margin是外边距

总结：第一次接触静态页面，其中遇到了很多问题，还需要不断摸索，不断学习！

做HTML静态页面时遇到的问题总结的更多相关文章

  1. 做webapp静态页面的一些积累

    ​1)根据pad,手机不同的版本的屏幕大小设置字体的大小(可以使用此方式根据屏幕的不同进行设置,由于我左边的图片是设置的float='left',使用的是img标签的百分比来显示图片) (使用此方式, ...

  2. 关于 静态页面布局 中的一些BUG

    作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...

  3. 使用Gitalk实现静态页面评论的功能

    使用静态页面的理由 本人在Github上使用github.io部署了一个静态主页,地址是http://aopstudio.github.io,用于存放一些笔记文件.虽然静态页面功能少,自动化程度低,不 ...

  4. SpringMVC与SpringBoot返回静态页面遇到的问题

    1.SpringMVC静态页面响应 package com.sv.controller; import org.springframework.stereotype.Controller; impor ...

  5. 用Razor做静态页面生成器

    本来是用asp.net webpages做的博客网站,数据库用了一个陌生的本地数据库,只是觉得用起来很爽快,用新鲜的东西有一种刺激.后来数据库挂了,估计是存某个字段的时候出了问题,可是新鲜的东西,也不 ...

  6. 如何做URL静态化 和页面的静态化

    为什么要进行URL静态化? 如果帮到了您,您可以小支持一下,谢谢您   1.更好的迎合搜索引擎工作原理的爬行抓取机制:2.把网站URL静态化更有助于网站获得好的排名:3.URL静态化有利于用户体验.不 ...

  7. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

  8. .net 生成 静态页面

    .net 生成 静态页面 <!--Main.Aspx--> <%@ page language="C#" %> <%@ import namespac ...

  9. 用 Smarty 生成静态页面入门介绍

    why Smarty? 随着公司首页(以下简称首页)流量越来越大,最近开始考虑使用后台语言生成静态页面的技术. 我们知道,一个简单页面一般是一个 .html(或者 .htm ..shtml)后缀的文件 ...

随机推荐

  1. Linux::mysql-connector-c++

    .安装好boost. .从官网下载mysql connector c++版本. .解压,复制 include/jdbc/cppconn 文件夹复制,到/usr/local/include/cppcon ...

  2. linux下 Mysql 安装使用

    .安装mysql sudo apt-get install mysql-server mysql-client sudo service mysql restart 2.5.7版本以上修修改updat ...

  3. python学习-语言概述（一）

    1.python的特点 python是一种面向对象.解释型.弱类型的脚本语言,它也是一种功能强大而完善的通用型语言. 解释性语言的特点:速度慢:源代码加密困难:跨平台:

  4. 17.Linux高可用之Keepalived

    1.什么是高可用,为什么要设计高可用? 两台机器启动着相同的业务系统,当有一台机器宕机,另外一台服务器能快速的接管,对于访问的用户是无感知的. 减少系统不能提供服务的时间. 2.高可用使用什么工具来实 ...

  5. Spring Cloud ---- 服务注册与发现（Eureka 找到了！找到了！ 嘻嘻）

    记录一下吧,为什么接触分布式.因为裸辞之后没有找到工作,好的公司都要求有分布式经验,但是我完全没有.在一次面试的时候,面试官说如果你会分布式架构的话,我可以把工资给你开高2.5,我就考虑着给我点时间, ...

  6. Java线程池的正确关闭方法，awaitTermination还不够

    问题说明 今天发现了一个问题,颠覆了我之前对关闭线程池的认识. 一直以来,我坚信用shutdown + awaitTermination关闭线程池是最标准的方式. 不过,这次遇到的问题是,子线程用到B ...

  7. 元组/字典/集合内置方法+简单哈希表(day07整理)

    目录 二十三.元组内置方法 二十四.字典数据类型 二十五 集合内置方法 二十五.数据类型总结 二十六.深浅拷贝 补充:散列表(哈希表) 二十三.元组内置方法 什么是元组:只可取,不可更改的列表 作用: ...

  8. 图数据库PageRank算法

    目录: 定义 计算原理 定义: 假设对象A具有指向它的对象T1 ... Tn.参数d是阻尼系数,取值范围在0和1之间,通常将d设置为0.85.C(A)被定义为从对象A出去的连接数. 对象A的PageR ...

  9. 你必须知道的容器监控 (3) Prometheus

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章.上一篇介绍了Google开发的容器监控工具cAdvisor,但是其提供的操作界面 ...

  10. ajax 跨域问题处理

    第一种方法 服务端处理 response.addHeader("Access-Control-Allow-Origin", "*"); 第二种 客户端使用Jso ...