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. burp插件之xssValidator

    0x01 安装环境 Phantomjs 下载:http://phantomjs.org/download.html 下载后配置环境变量,把bin目录下的这个exe加入环境变量 xssValidator ...

  2. Node.js事件的正确使用方法

    前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的 ...

  3. webpack4+koa2+vue 实现服务器端渲染(详解)

    _ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...

  4. 5G：今天不谈技术，谈谈需求和应用

    4G改变生活,5G改变社会.随着2019年5G手机的发布,5G时代已经拉开帷幕,无数嗅觉灵敏的投资人和创业者在研究5G行业的投资机会. 但是,市场研究侧重于技术细节与上游产业链设备投资居多,对于贴近消 ...

  5. 百万年薪python之路 -- 内置函数练习

    1.整理今天笔记,课上代码最少敲3遍. 2.用列表推导式做下列小题 过滤掉长度小于3的字符串列表,并将剩下的转换成大写字母 lst = [["a","b"],[ ...

  6. 小白终于弄懂了：c#从async/await到Task再到Thread

    1. 为什么会有/怎么解决: async/await的无限嵌套 public async Task<int> myFuncAsync1() { //some code int num = ...

  7. 通过反射来手写简单的ORM SQlserver

    不说废话,直接上干货,如发现问题,欢迎大家指出,谢谢! //------------------------------------MySQlServerORM [简单 CURD] using Sys ...

  8. Java基础（42）AbstractSet类

    AbstractSet类的子类有HashSet(其子类是LinkedHashSet).EnumSet.TreeSet 1.HashSet public class HashSet<E> e ...

  9. Android H5混合开发（4）：构建Cordova Jar包

    前言 上一节,介绍了原生项目如何嵌入Cordova,我们对Cordova的依赖使用的是CordovaLib Module,这也是安卓项目常用的方式. 但是,也有项目希望以Jar包的方式依赖Cordov ...

  10. Openmp多线程编程练习

    环境配置 一般使用Visual Studio2019来作为openmp的编程环境 调试-->属性-->C/C++-->所有选项-->Openmp支持改为 是(可以使用下拉菜单) ...