html 佈局
html常見佈局方式有以下幾種:
1、使用div的html
利用div可以為html實現多列佈局。
2、使用html5的網站佈局,
利用html新增的header、footer、nav、section等屬性佈局頁面,相對於div的html佈局少了樣式的設計,直接輸入內容即可。
3、使用table的html佈局
table是為了顯示表格化數據而設計的,但也能起到佈局的效果。
佈局時候,均需要用到合適的樣式表。
以下樣式表一些簡單知識:
css調用id前面加#。如:#ID {color:red}
background-color:背景顏色
color:文本顏色;
height:元素的高;
width:元素的寬;
float:浮動位置;
padding:內容到邊框的間隔;詳情見https://baike.baidu.com/item/padding/10293503?fr=aladdin
text-align:文本排列:
clear:規定那一側不允許有浮動元素。
html 佈局的更多相关文章
- css3多個佈局
分欄佈局: column-count:分欄數 column-gap:欄間間距 column-rule:欄間線條 記得消除瀏覽器兼容:-moz-和-webkit- 盒佈局: display:box 彈性 ...
- pc端手機端自適應佈局方案
https://blog.csdn.net/chose_DoIt/article/details/80424341 https://blog.csdn.net/cxz792116/article/de ...
- 微信小程序flex佈局
聲明:display:flex 換行flex-wrap:flex-wrap:nowrap(不換行).wrap(換行).wrap-reserve(第一行在下面): 主軸對齊(橫向對齊)justify-c ...
- Android之下拉刷新的ListView
不废话,代码里面注释很详细,直接上代码: 自定义的RefreshableListView代码: public class RefreshableListView extends ListView im ...
- css的书写规范+常用
格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...
- 【五】将博客从jekyll迁移到了hexo
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdo ...
- silverlight_容器
Canvas絕對佈局 定位Canvas.Top.Canvas.Left ZIndex屬性 若制定2個控制項重疊,那麼後聲明控制項會覆蓋先聲明的控制項.此時可以使用Canvas.ZIndex屬性來改變它 ...
- 中國區的代理協議的韓國遊戲廠商PatiGames
“與阿裏巴巴簽署旗下游戲「突突三國」在中國區的代理協議的韓國遊戲廠商PatiGames決定與阿裏巴巴終止合作.”相信這條前不久報導的新聞,很多人並不陌生,但這背後其實並不像表面那樣簡單.早在今年4月P ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
随机推荐
- Cesium学习1:如何在本机的Apache tomcat9.0.8服务器中打开cesium的index.html页面
Cesium的官方网站:https://cesiumjs.org/ 点击这个按钮来获取最新的Cesium:下载Cesium. 下载完成之后将zip文件解压到你选择的新目录,解压之后文件目录类似于下图. ...
- 理解JSON.stringify()高级用法
一:JSON.stringify() 该方法是把javascript对象转换成json字符串. 基本语法:JSON.stringify(value, [, replacer], [, space]) ...
- http/2 多路复用技术
虽然 HTTP 1.1 默认启用长TCP连接,但所有的请求-响应都是按序进行的(这里的长连接可理解成半双工协议.即便是HTTP 1.1引入了管道机制,也是如此).复用同一个TCP连接期间,即便是通过管 ...
- xpath 的使用
如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10520271.html 有问题请在博客下留言或加作者微信:tinghai87605 ...
- 动手动脑(lesson 3)
一· 答:本质上一样,但在内存分配时有区别.如下图: 二· 程序运行结果截图: 答案截图: 三· 四· 答:构造函数与参数个数不匹配. 五· 运行结果截图: 总结:所有类的变量都默认初始化为null, ...
- 常见camera测试卡
常见camera测试卡 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/luckywang1103/article/details/87166 ...
- 4.1《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—目录结构
Unix风格的目录结构通常使用一个目录名列表并用正斜杠分隔来表示,这样我们可以结合ls命令: $ ls /Users/mhartl/ruby 或者 $ ls /usr/local/bin 正如图20, ...
- Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
- WebApi系列~HttpClient的性能隐患 - 转
最近在进行开发过程中,基于都是接口开发,A站接口访问B接口接口来请求数据,而在这个过程中我们使用的是HttpClient这个框架,当然也是微软自己的框架,性能当前没有问题,但如果你直接使用官方的写法, ...
- Webpack 2 视频教程 002 - NodeJS 安装与配置
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...