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. UVA10228 A Star not a Tree?

    [返回模拟退火略解] 题目描述 一平面上有 nnn 个点 {Ai}\{A_i\}{Ai​},求一个点 XXX 使得σ=∑i=1ndis(Ai,X)\sigma=\sum_{i=1}^{n}{dis(A ...

  2. [USACO15DEC]高低卡(白金)High Card Low Card (Platinum)

    题目描述 Bessie the cow is a hu e fan of card games, which is quite surprising, given her lack of opposa ...

  3. Halcon一日一练：阈值分割的几个算子

    threshold(Image:Region:MinGray:MaxGray:) 功能:得到灰度值在最小与最大这间的那些部分.其返回仍然是一个区域. MinGray<MaxGray. 这个算子可 ...

  4. php架构师都要会什么

    架构师的成长离不开踩坑,不断试验各种方案,各种踩坑,从小坑到大坑,逐渐归纳.另外就是多学习多交流,兼收并蓄,不用特别在意细节,观其大略,了解常见的各种东西的核心价值与短板所在.一个程序和计算系统软件体 ...

  5. ESP8266开发之旅 网络篇⑮ DNSServer——真正的域名服务

    1. 前言     Arduino for esp8266中有两个DNS服务相关的库: ESP8266mDNS库 这个库是mDNS库,使用这个库的时候ESP8266可以在AP模式或是以STA模式接入局 ...

  6. [案例分析] 政务云市场面临的复杂格局——重庆政务云模式的启示：多厂商竞争化、PaaS 化

    新闻背景: 2019 年 9 月底,重庆市大数据应用发展管理局发布政务云平台采购公告,预算金额为 5000 万元,以上 4 家入选. 最终项目被项目被阿里云.腾讯云.华为云.紫光云 4 家瓜分. 50 ...

  7. 使用Jersey构建图片服务器

    使用Jersey构建图片服务器 前台页面代码 <form id="jvForm" action="add.do" method="post&qu ...

  8. Debian Buster 使用Lxde在界面中打开url提示错误解决

    问题复现 这里我在VLC上看到个链接地址,蓝字部分,正常点击会跳转浏览器打开 可是 问题原因 非浏览器上点击url默认会使用xdg-open打开url 这里Debian Buster打包的时候,xdg ...

  9. centos7将python默认版本升级

    想用centos7来写python,但是默认安装的是python2.7(python -v命令可以查看版本信息) 准备升级到python3.5.2 首先安装编译环境 yum -y install gc ...

  10. bash_history文件怎么删除

    Bash shell在“~/.bash_history”(“~/”表示用户目录)文件中保存了500条使用过的命令,这样可以使你输入使用过的长命令变得容易.每个在系统中拥有账号的用户在他的目录下都有一个 ...