导航:首页 > 万维百科 > css网页设计div元素教学

css网页设计div元素教学

发布时间:2021-01-15 17:51:26

1、关于学习CSS+DIV制作网页

其它"样式"(style)或者说是CSS..它可以定义网页里的任何一个元素..相对而言..只要学好CSS..DIV可以当表格用内..其它做一个网容页(DIV+CSS)..用DW已经完全可以实现.不用记枯燥的单词..知道怎么用就行了..我也是这样过度过来的..谈不上教..不过可以讨论讨论..我的QQ是14352669.

2、21视频教程网div+css布局,Javascript, Dreamweaver网页制作教程,C语言视频教程

div+css教程,张鹏的带你一周hold住div+css讲的很细,通俗易懂,还有李静的dreamweaver项目实战,知识点结合案例。

3、求教学一个div+css网页制作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>教学</title>
<style>
*{
  margin:0;
  padding:0;
}
.wrap{
  width:960px;
  margin:0 auto;
}
a{
  text-decoration:none;
}
.top{
  width:100%;
  height:5px;
  background-color:#039;
}
.header{
  width:100%;
  height:200px;
  position:relative;
  background-color:#6F3;
}
.header .logo{
  color:#000000;
  margin:20px 100px;
}
.header p{
  position:absolute;
  right:0;
  top:0;
  background-color:rgba(0,0,0,.3);
}
.header p a{
  margin:5px 10px;
  display:inline-block;
}
.header a{
  margin-left:15px;
  color:#ffffff;
}
.nav{
  height:30px;
  background-color:#C60;
}
.nav ul{
  overflow:hidden;
  width:90%;
  margin:0 auto;
}
.nav ul li{
  list-style:none;
  float:left;
  width:9%;
  text-align:center;
  border-right:1px solid #ffffff;
}
.nav ul li a{
  line-height:30px;
  color:#ffffff;
}
.nav ul li a:hover{
  color:#F00;
}
</style>
</head>

<body>
<div class="top">
</div>
<div class="wrap">
    <div class="header">
        <a href="#" class="logo">logo</a>
        <p>
            <a href="#">加入收藏</a>
            <a href="#">设为首页</a>
        </p>
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">技术文章</a></li>
            <li><a href="#">行业动态</a></li>
            <li><a href="#">IT行业</a></li>
            <li><a href="#">资源下载</a></li>
            <li><a href="#">酷图欣赏</a></li>
            <li><a href="#">程序开发</a></li>
            <li><a href="#">设计资讯</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">素材下载</a></li>
            <li><a href="#">English</a></li>
        </ul>
    </div>
</div>
</body>
</html>

大概就是这个意思,要想精确制作,都是需要psd源文件的。

4、网页DIV+CSS 元素问题请教

块级元素的分类 块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素。 一.结构化块状元素 这类元素用于构造文档的结构,一个好的文档结构对于搜索引擎和应用其他技术(如JavaScript)都是十分有利的。它们没有语义上的含义,仅仅划分出了文档的组织方式,并没有体现文档的内容。 主要的结构化块状元素 <ol> <ul> <dl> <table> 支持结构化的元素 <li> <dt> <dd> <caption> <thead> <tbody> <tfoot> <colgroup> <col> 二.终端块状元素 这类元素用于从结构转向内容,它们拥有语义上的含义,能够表明内容的性质。终端块状元素属于结构的终点,它们不能再包含其他块级元素,只能包含文本或行级元素。 终端块状元素 <h1>...<h6> <p> <blockquote> <dt> <address> <caption> 三.多目标块状元素 所谓多目标指的是可以自由的扩展或嵌套文档的结构,以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵,以终端的形式使用就含有语义的内涵。 多目标块状元素既可以包含块状元素,也可以包含内容(文本与行级元素的组合为内容),但不能同时包含两者。应该把内容放在块状元素中。块状元素不应作为行级元素与文本的兄弟元素,受HTML校验器的限制,目前还没办法检验出此种情况,但是应该避免。 多目标块状元素 <div> <li> <dd> <td> <form> <noscript> 在谈论CSS布局时,我们需要提前知道一些东西。对于html各种标签/元素,可以从块的层面做一个分类:要么是block(块元素),要么是inline(内联元素): block元素的特点: 总是另起一行开始; 高度,行高以及顶、底边距都可控制; 宽度缺省是它所在容器的100%,除非设定一个宽度。 inline元素的特点: 和其它元素都在一行上; 高度,行高以及顶、底边距不可改变; 宽度就是它所容纳的文字或图片的宽度,不可改变。 下面对它们的性质及应用做进一步说明: ◎ 块元素(block element) 通常作为其它元素的容器,它可以容纳内联元素和其它块元素。 我们知道默认情况下,块元素会顺序以每次另起一行的方式往下排,而通过CSS控制其样式,我们可以改变这种默认布局模式,把块元素摆放到你想要的位置上 去。需要指出的是,table标签也是块元素的一种,基于table表格和基于CSS+DIV的布局,在使用者看来除了页面载入速度的差别(table在 所有内容元素加载完成后才显示),没有其它的差别。但是从页面的源代码来看,这种差异就非常大了。基于良好结构理念设计的CSS布局源码,至少能让没有 web开发经验的用户很容易找到连续的页面内容。从这个角度来说,CSS layout code应该有更好的美学体验。 我们可以把模块化的DIV想象成一个个box,然后把它们按自己的意愿排列组成完整的内容,网页布局设计就是遵循了同样的模式。 块元素(block element) HTML标签分类明细 address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是css layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 (只能用来容纳其它块元素) h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容 noscript - 可选脚本内容(对于不支持script的浏览器显示此内容) ol - 排序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表 ◎内联元素(inline element) 一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。 为了比较明确的表现出 block 与 inline 的区别,我们可以利用它们各自的代表元素div和span的演示进行说明: XXXXXXXXX This's a DIV layout XXXXXXXXX div另起一行,它的形状不受内部文字的影响 XXXXXXXThis's a span layoutXXXXXXX 所有元素在一行,span刚好包容文字 内联元素(inline element) HTML标签分类明细 a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线(不推荐) samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器,定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量 ◎可变元素 是基于以上两者随环境而变化的,它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别,它就遵循块元素或者内联元素的规则限制。 可变元素 HTML标签分类明细 applet - java applet button - 按钮 del - 删除文本 iframe - inline frame ins - 插入的文本 map - 图片区块(map) object - object对象 script - 客户端脚本 但是通过CSS,我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上 应用我们需要的属性。例如,我们可以对块元素[ ul ]标签加上 display:inline 属性,让原本垂直的列表水平显示,这在我们设置Blog导航条时得到了广泛应用;我们也完全可以把内联元素[ cite ]加上 display:block 这样的属性,让它也有每次都从新行开始的属性。

5、求DIV+CSS网页设计布局应用详解视频教程,不要土豆,优酷上的,最好是21教育的

你搜曹鹏CSS教程专。属 http://www.caopeng.org/html/css.htm

6、CSS+DIV网页制作的一般思路和过程是什么样的呢?

一切以设计稿为主,我们前端开发的目标是为了把jpg或者png的设计稿图片还原成为html静态网页,动态专的部分交属给程序员处理。之所以使用DIV的布局只是为了把页面的结构与样式(CSS)进行分离。你使用table布局可以达到同样效果,但是后期维护就会相对困难了。
过程就是根据客户需求在PS或者FW绘制设计稿,客户通过之后,开始切图,最终变成html的网页就ok了。
最终要求的结果就是html与设计稿的图片保持一致。

7、求网页设计教程,div+css的

我有,在我空间留言,我发给你

8、如何学好网页制作(DIV+CSS)

自己沉不下心去好好学,找什么大神也没用。
代码是敲出来的,不是你这样上百度知道弄出来的。
还有,记不住就多写,静不下心敲代码就别干这行。这么浮躁的心态,你找哪个程序员都没用,不如去找心理医生。

与css网页设计div元素教学相关的知识