css将div变为块,css+div 浮动分块

前段时间学过几天html，只是怀着了解的态度，能够读懂别人的页面，能够扒现成就行，一直没有自己动手去实践过，其实也不是没有实践过，前段时间扒了一个网页，想按照自己的要求来改，可后果是越改越乱。今天心血来潮，想为自己编写的留言板添加个很炫的首页，所以就抱着试一试的态度。静下来，起码自己会去思考，会去动手去尝试，主要是在这个尝试的过程中你会理解的更加深入一些。

下面贴上我的代码：(将样式先写在行内)

6 Email7

9 Liuyanban10

13 QQ14

16 login17

20 share21

23 friengLink24

效果图：(只要在每个div加上自己设计好的图片就好了，当然也可以用js，jQuery制作一些更炫的效果)

原理：主要就是div的浮动

思路：用到了table，使其在屏幕中间显示，一个大div保证在浏览器窗口大小改变的同时里面所有div的布局不会乱。

我对浮动的理解：本身div是块级元素，很霸道，独占一行的，但是用左浮动后，只要前行除去div的宽度后剩余的宽度大于要左浮动的div宽度，即：前行的宽度能够容纳要浮动的div，那么这个div就会跟上去，到前一行的位置，右浮动也如此，只不过就是方向不同而已。

css将div变为块,css+div 浮动分块相关推荐

div是什么?标签?div+css
简单的说就是一个标签 ● 1．使用 DIV 标签 (div) 当我们使用 CSS-P 的时候, 我们主要把它用在 DIV(division)tag 上.当你把文字,图象,或其他的放在 DIV 中,它 ...
（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）...
一.文字环绕效果: html代码如下: 1 <body>2 3 <style type="text/css">4 #big img {float: left ...
【HTML＋CSS网页设计与布局从入门到精通】第13章-块元素div和内联元素span格式布局
目录块元素背景,边框,颜色等布局块元素ID选择器另一个例子块元素中的图片盒子模型的演示块级元素中的文本格式块级元素div与内联元素span的对比两个行内元素的margin 两个块级元素 ...
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
css让四个div并排显示,css如何让两个div并排显示？
让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,下面我们来看一下CSS实现两个div并排显示的方法. 让两个Div并排显示一. ...
html div左中右布局,求助css。一个div包含两个div，左右布局，左边css宽30%，右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
css设置div内文字垂直,DIV+CSS如何让文字垂直居中？
满意答案 dinahcat 2016.05.08 采纳率:48% 等级:5 已帮助:205人 div+css实现文字垂直居中的五种方法: 1.把文字放到table中,用vertical-alig ...
用html和css布局如下图像,HTML CSS + DIV实现整体布局
什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...
[css] 当一个元素被设置为浮动后，它的display值变为什么呢？
[css] 当一个元素被设置为浮动后,它的display值变为什么呢? 一个元素被设为绝对定位或者浮动后,其display计算值就变为了block,尽管其表现形式和inline-block类似--包裹 ...

css将div变为块,css+div 浮动分块

css将div变为块,css+div 浮动分块相关推荐

最新文章

热门文章