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. js中submit和button的区别

    今天写一个js验证 遇到点小坑 记录一下 button-普通按钮,submit-提交按钮. submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和bu ...

  2. [NOIp2010] luogu P1514 引水入城

    跟 zzy, hwx 等人纠结是否回去上蛋疼的董老板的课. 题目描述 如图所示.你有一个 N×MN\times MN×M 的矩阵,水可以从一格流到与它相邻的格子,需要满足起点的海拔严格高于终点海拔.定 ...

  3. Shiro:未登录时请求跳转问题

    问题:前后端分离项目,在用Shiro做权限控制时,未登录状态发送的请求都会重定向,导致前端无法捕捉重定向后的消息.如何不重定向在原来的请求返回信息提示未登录,前端根据信息调到登录页? 首先,看一下Sh ...

  4. Java代码性能优化的 39个细节

    在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. 1:在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提 ...

  5. SpringBoot HATEOAS用法简介

    REST风格简介 介绍HATEOAS之前先简单介绍一下REST,REST 是 Representational state transfer 的缩写,翻译过来的意思是表达性状态转换.REST是一种架构 ...

  6. 神奇的 SQL 之团结的力量 → JOIN

    前言 开心一刻   闺蜜家暴富,买了一栋大别野,喊我去吃饭,菜挺丰盛的,筷子有些不给力,银筷子,好重,我说换个竹子的,闺蜜说,这种银筷子我家总共才五双,只有贵宾才能用~我咬着牙享受着贵宾待遇,终于,在 ...

  7. SVG系列 - 基础

    标题为SVG基础,但是过于基础的东西就不再熬述啦,可以参考几个学习网址: SVG参考手册:http://www.runoob.com/svg/svg-reference.html MDN SVG:ht ...

  8. 百万年薪python之路 -- 包

    包 使用import 和from xx import xx 现有如下结构 bake ├── __init__.py ├── api ├── __init__.py ├── policy.py └── ...

  9. 算法<初级> - 第一章 排序相关问题

    算法 - 第一章 时间复杂度: Big O 时间/空间复杂度计算一样,都是跟输入数据源的大小有关 n->∞ O(logn) 每次只使用数据源的一半,logn同理 最优解 先满足时间复杂度的情况最 ...

  10. 在react项目中使用redux or mobx？

    主要比较参数: 库体积,打包项目体积 开发体验 性能对比 在对比参数前首先分析一下redux和mobx的设计模式,redux和mobx都没有使用传统的mvc/mvvm形式,而且他们使用flux结构也略 ...