浅谈ul布局以及table布局
我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主。
如果布局中需要用户边框,推荐div或者table布局;如果不需要边框,ul其实也是不错的一种布局方式。
ul布局可以很好地适应布局内容自顶向上对齐地方式,如图。table永远都是垂直居中的方式,除非设置相应的vertical-align为top或者text-top
代码
- ul布局css
ul{
list-style-type: none;
padding-left: 0px;
margin: 0px;
}
li{
float: left;
word-wrap: break-word;
word-break: break-all;
width: 130px; /*看个人需求*/} .clearfix { overflow: auto; zoom:; _zoom:1 }
- ul布局html
<ul class="clearfix">
<li>标题</li>
<li>正文费德勒咖啡的旅客谨防丢失了看见对方示范点;了范德萨犯得上看见空间发电机发电撒赖科技范德萨</li>
</ul>
<ul class="clearfix">
<li>标题</li>
<li>正文费德勒咖啡的旅客谨防丢失了看见对方示范点;了范德萨犯得上看见空间发电机发电撒赖科技范德萨</li>
</ul>
<ul class="clearfix">
<li>标题</li>
<li>正文费德勒咖啡的旅客谨防丢失了看见对方示范点;了范德萨犯得上看见空间发电机发电撒赖科技范德萨</li>
</ul> - table布局css
table{
border-collapse: collapse;
}
td{
width: 130px;
} - table布局html
<table cellpadding="0">
<tr>
<td>标题</td>
<td>正文费德勒咖啡的旅客谨防丢失了看见对方示范点;了范德萨犯得上看见空间发电机发电撒赖科技范德萨</td>
</tr>
</table>
浅谈ul布局以及table布局的更多相关文章
- HTML学习笔记 div布局及table布局案例 第三节 (原创)参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html页面布局之table布局:
table布局: table来做整体页面的布局,布局技巧归纳如下: (1)按照设计图的尺寸设置表格的宽高以及单元格的宽高 (2)将表格的border.cellpadding.cellspacing全部 ...
- 浅谈Android样式开发之布局优化
引言 今天我们来谈一下Android中布局优化常用的一些手段.官方给出了3种优化方案,分别是</include>.</viewstub>.</merge>标签,下面 ...
- [浅谈CSS核心概念] CSS布局模型:float和position
1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...
- 浅谈Oracle函数返回Table集合
在调用Oracle函数时为了让PL/SQL 函数返回数据的多个行,必须通过返回一个 REF CURSOR 或一个数据集合来完成.REF CURSOR 的这种情况局限于可以从查询中选择的数据,而整个集合 ...
- 浅谈如何正确给table加边框
一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...
- 3.div+css 的布局较 table 布局有什么优点
改版的时候更方便,只需改css文件. 页面加载速度更快.结构化清晰.页面显示简介. 表现与结构相分离. 已于优化搜索引擎更友好,排名更容易靠前.
- 新建ASPX页面,并练习div布局和table布局
1,Div水平居中: <div style="margin:0px auto;width:100px;height:100px;background:#FF0000;"> ...
- 16,div+css的布局较table布局有什么优点?
改版的时候更加方便,只要改css文件 页面加载速度更快,结构化清晰,页面显示简洁 表现与结构相分离 易于搜索引擎优化,排名更靠前
随机推荐
- 【Hadoop & Ecilpse】Exception in thread "main" org.apache.hadoop.security.AccessControlException: Permission denied: user=bruce, access=WRITE, inode="/out2/_temporary/0":atguigu:supergroup:drwxr-xr-x
问题再现: 使用本机 Ecilpse (Windows环境) 去访问远程 hadoop 集群出现以下异常: 问题原因: 因为远程提交的情况下如果没有 hadoop 的系统环境变量,就会读取当前主机的 ...
- 关于找不到stdafx.h头文件问题(pass)
代码: #include "stdafx.h" #include "stdlib.h" char* getcharBuffer() { return " ...
- hive一些基本用法
1.hive中的数据库表的类型有两种,一种是managed,一种是external :managed表类型是指传入的数据放在hive默认的储存位置下,而external 表类型可以将数据 放在任意的 ...
- FlowPortal-BPM——文件目录功能
安装目录文件夹:Attachments 附件bin Bin目录:dll文件的引用DataSourceProviders 固定的数据库连接文件ExtServer 数据源服务FormService 表单服 ...
- [整理]Unicode 与 UTF8
目录 先上总结 ASCII utf-8 编码规则 UTF-16 其他 先上总结 Unicode 是一个符号集, 规定了所有符号的二进制编号. UTF8 是unicode的一种编码方式(存储, 传输方式 ...
- OpenCV识别技术
OpenCV识别技术# 老师:james 20181019 # 识别技术# Pycharm + Python3 + OpenCV """ 一.识别技术: 什么是OpenC ...
- 最新版IntelliJ IDEA2019.1破解教程(2019.04.08更新)
[原文链接]:https://www.tecchen.xyz/idea-crack.html 我的个人博客:https://www.tecchen.xyz,博文同步发布到博客园. 由于精力有限,对文章 ...
- [iOS]使用Windows Azure來做iOS的推播通知 (转帖)
這一篇我們用Windows Azure 的Mobile Service 來實作iOS的推播通知,底下我們分成三個階段來探討如何實作推播通知的服務: 第一階段: 開啓你的Windows Aure服務 ...
- Linux 命令学习之cd
功能说明: cd 命令是 linux 最基本的命令语句,其他的命令都会依赖与 cd 命令.因此学好 cd 命令是必须的. 语 法:cd [目的目录] 补充说明:cd指令可让用户在不同的目录间切换,需要 ...
- InnoDB的行记录格式, Compact, Redundant, Compressed, Dynamic
InnoDB存储引擎和大多数数据库一样(如Oracle和Microsoft SQL Server数据库),记录是以行的形式存储的.这意味着页中保存着表中一行行的数据.到MySQL 5.1时,InnoD ...