css和div布局到底怎么布局啊,需要经常使用哪些元素呢
4个回答
展开全部
所谓的DIV+CSS,主要是使用CSS来控制HTML中的各种元素对页面进行布局排版。
在这里写上DIV是为了强调:过去的网页布局主要是使用table标签进行的,而使用table布局不够灵活,所以现在的网站大多数都使用div标签对网页进行整体的布局。
使用CSS和div布局,你可以先把整个网页划分成几块,然后在html里每一块用一个div框起来,然后对相应的div定义CSS,将其放置到网页中相应的位置,完成整体布局。
比如你要要做一个现在你看到的百度知道的页面:页面基本分为了3部分,上面是百度知道的logo、百度的跳转链接、搜索框和按钮;下面的左边是百度知道的当前问题和其回答;右边是用户信息、广告等内容。(这里被我简化了,其实最上面有用户信息条,中间有当前页面在百度知道的路径,最下面还有footer网站信息)
我们就可以在html里写4个div:
<div id="wrap">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</div>
然后给他们定义css
body{text-align:center;}/*为了使网页的内容全部显示在中间*/
#wrap{width:960px;margin:0 auto;}/*为了让1024*768的用户能看全,定义了网页的宽度*/
#top{width:100%;height:100px;}/**/
#left{width:660px;float:left}/*向左浮动*/
#right{width:290px;float:right;}/*向右浮动*/
这样网站的整体布局就完成了。(这部分代码我没有验证,嘻嘻)
注:事实上我给这三个div的命名方式并不是很好,不应该使用它的样式类型或者位置进行定义,而要使用该网页元素的实际内容进行定义。
一般来说要以这个div里面放的内容来定义。比如百度给最上方的用户信息条起名usrbar。这样在给网站改版或者做调整的时候可以明确每个div的意义。
完成整体布局以后,就可以对网页中的每一个区域进行具体的排版。
每一部分的排版,是使用一楼提到的标题、段落、列表、表格、超链接等网页标签,然后使用CSS对标签进行相应的定义,使其达到你预期的效果。
注意:div这类标签也是可以使用的,但是具体用什么标签要看具体情况。(其实你全部使用div都是可以的,如果你不嫌麻烦的话。)使用正确的标签,可以让你的网页代码更容易阅读和修改。比如一般看到网页中出现ul li标签,就可以知道这里定义了列表。用到h1-h7标签一般就是定义不同等级的标题。
具体如何使用CSS布局网页,建议你先学习HTML,然后看一看CSS。这些内容你不一定要背过,但是一定要了解,HTML和CSS都可以做到什么。以后在使用的过程中遇到不懂的就查。没事找几个简单的页面,自己模仿着做下来,多练练手就好了。
推荐教程:你可以去我下面写的网站看看,这里是最基本的教程。CSS部分等你熟悉了最基本的用法后,可以把《精通CSS》看看,这本书的帮助很大,强烈推荐(我自己学这本的)。
在这里写上DIV是为了强调:过去的网页布局主要是使用table标签进行的,而使用table布局不够灵活,所以现在的网站大多数都使用div标签对网页进行整体的布局。
使用CSS和div布局,你可以先把整个网页划分成几块,然后在html里每一块用一个div框起来,然后对相应的div定义CSS,将其放置到网页中相应的位置,完成整体布局。
比如你要要做一个现在你看到的百度知道的页面:页面基本分为了3部分,上面是百度知道的logo、百度的跳转链接、搜索框和按钮;下面的左边是百度知道的当前问题和其回答;右边是用户信息、广告等内容。(这里被我简化了,其实最上面有用户信息条,中间有当前页面在百度知道的路径,最下面还有footer网站信息)
我们就可以在html里写4个div:
<div id="wrap">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</div>
然后给他们定义css
body{text-align:center;}/*为了使网页的内容全部显示在中间*/
#wrap{width:960px;margin:0 auto;}/*为了让1024*768的用户能看全,定义了网页的宽度*/
#top{width:100%;height:100px;}/**/
#left{width:660px;float:left}/*向左浮动*/
#right{width:290px;float:right;}/*向右浮动*/
这样网站的整体布局就完成了。(这部分代码我没有验证,嘻嘻)
注:事实上我给这三个div的命名方式并不是很好,不应该使用它的样式类型或者位置进行定义,而要使用该网页元素的实际内容进行定义。
一般来说要以这个div里面放的内容来定义。比如百度给最上方的用户信息条起名usrbar。这样在给网站改版或者做调整的时候可以明确每个div的意义。
完成整体布局以后,就可以对网页中的每一个区域进行具体的排版。
每一部分的排版,是使用一楼提到的标题、段落、列表、表格、超链接等网页标签,然后使用CSS对标签进行相应的定义,使其达到你预期的效果。
注意:div这类标签也是可以使用的,但是具体用什么标签要看具体情况。(其实你全部使用div都是可以的,如果你不嫌麻烦的话。)使用正确的标签,可以让你的网页代码更容易阅读和修改。比如一般看到网页中出现ul li标签,就可以知道这里定义了列表。用到h1-h7标签一般就是定义不同等级的标题。
具体如何使用CSS布局网页,建议你先学习HTML,然后看一看CSS。这些内容你不一定要背过,但是一定要了解,HTML和CSS都可以做到什么。以后在使用的过程中遇到不懂的就查。没事找几个简单的页面,自己模仿着做下来,多练练手就好了。
推荐教程:你可以去我下面写的网站看看,这里是最基本的教程。CSS部分等你熟悉了最基本的用法后,可以把《精通CSS》看看,这本书的帮助很大,强烈推荐(我自己学这本的)。
参考资料: www.w3school.com.cn
展开全部
DIV+CSS布局用到标签很多,DIV,P,H1,SPAN等标签,DIV+CSS就是灵活性高等
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
布局用div 适当使用h1~h7标题 段落使用<p> 换行<br /> 列表<ul><li></li></ul> 表格<table> .......有很多,弄懂每个标签的实际意义, 该用的时候用!
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
布局容器经常使用的有:
<div class=""></div> , <div id=""></div>
页面元素一般有
div,ul,li,span,h1-6,p等等常见的HTML代码。
<div class=""></div> , <div id=""></div>
页面元素一般有
div,ul,li,span,h1-6,p等等常见的HTML代码。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询