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. cobalt strike笔记-常用beacon扫盲

    最近还是重新补一下cs的东西 0x01 Beacon命令 Beacon Commands =============== Command Description ------- ----------- ...

  2. std::is_same

    两个一样的类型会返回true bool isInt = std::is_same<int, int>::value; //为true std::cout << std::is_ ...

  3. MFC::使用mysql

    下载mysql-installer-community-5.7.16.0.msi,安装 mysql server即可. 创建工程包含头文件 #include "winsock.h" ...

  4. sql注入100种姿势过waf(二)：过安全狗

    仅供学习交流如果你有更好的思路可以一起分享,想一起学习的进我主页 先去安全狗网站下载最新的安全狗版本 从官网下载 windwos apache版 v4.0.2395  最新版   数据库是mysql ...

  5. java读取存在src目录下和存在同级目录下的配置文件

    如果我有个文件存在src下一级的地方和存在src同级的目录应该怎么用相对路径去获取如图: 一.如果存在src同级的地方应该是InputStream in = new BufferedInputStre ...

  6. css布局两端固定中间自适应

    第一种:采用浮动 1.1首先来看一下网上一个哥们给的代码 <body> <div class="left">左</div> <div cl ...

  7. 是可忍孰不可忍！！nodepad++作者台独分子，恶毒言论！！！

    本来用了两年这个软件吧,不带任何情感的,单纯辅助工具.直到今天,在GitHub上,发现了这个作者以及一些同党都是一群尼玛生在中国骂中国的狗币. https://github.com/notepad-p ...

  8. SpringBoot系列教程之Bean之指定初始化顺序的若干姿势

    上一篇博文介绍了@Order注解的常见错误理解,它并不能指定 bean 的加载顺序,那么问题来了,如果我需要指定 bean 的加载顺序,那应该怎么办呢? 本文将介绍几种可行的方式来控制 bean 之间 ...

  9. C# .NET .NET Framework .NET CORE 等的关系简介

    2019新的一年,祝大家新年快乐,工作生活一帆风顺,心想事成!诸事大吉! 这篇文章是我今年的第一篇博客,主题是:C#  .NET  .NET Framework   .NET CORE  等这些名词之 ...

  10. dig-基本使用

    dig:Domain Information Groper,是一个DNS查询工具 1:使用google的域名服务器:查询特定域名的A记录 [root@localhost ~]# dig @8.8.8. ...