网站实战 从效果图开始CSS+DIV\布局华为网站

经过我们的前面css的学习，我们已经分模块的掌握的CSS的技术，但是，要是完整的做一个页面，我们还没有接触过，这次呢，小强老师来和大家完整的利用CSS+DIV做一个网站案例，我们来模仿下华为的网站。

主要分为以下6部分来做：

相信参看如下视频地址：

01   建立华为站点：               http://www.tudou.com/programs/view/Vbo8EffWPQw/

02   华为站开始：                   http://www.tudou.com/programs/view/FP8aT-bP6E4/

03  华为头部分开始：            http://www.tudou.com/programs/view/L5xNIDmIsBw/

04 华为导航部分和banner：  http://www.tudou.com/programs/view/-oUyQc2y-hk/

05  新闻部分完成 ：               http://www.tudou.com/programs/view/bIkXyP2ggFI/

06  华为main部分结束            http://www.tudou.com/programs/view/nPOkX7QC0Ss/

第一先搭建骨架（结构图）： 
第一单页面：
做网站的流程：
1. 跟客户沟通  （企业）
2. 定价格
3. 付定金  (价格的一半  定金不退)
4. 出效果图(ps  fw)
5. 代码书写
6. 网上测试
7. 提交客户
8. 免费维护 一年
 
做网站：
1.先建立站点
2.首页 的名称 ：index.html      index.jsp   index.php   .index.aspx
3.图片和css都准备好
4.代码准备
 关于logo 的优化：
     1. logo 尽量用h1 来做
     2. logo可以插入图片 也可以作为背景
     3.必须指定连接 连接到首页
     4.连接 必须加title  写上网站的名称。

小强老师最通俗易懂的CSS+DIV入门学习视频，学习完毕绝对

有收获。本课程针对的主要是网页特效哦。如果你喜欢，就请分

享给其他人，让更多的人加入网页设计天地哦。视频素材请到：

http://www.xiaoqiang001.com 小强零零壹 下载

网站实战 从效果图开始CSS+DIV\布局华为网站,布布扣,bubuko.com

时间： 2024-12-25 20:43:09

网站实战 从效果图开始CSS+DIV\布局华为网站的相关文章

CSS+DIV布局中absolute和relative区别

http://developer.51cto.com/art/201009/225201.htm CSS+DIV布局中absolute和relative区别 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位 在用CSS+DIV进行布局定位的时候,一

CSS：CSS+DIV布局网页

现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS. CSS盒模型: 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)

CSS+DIV布局（二）

布局的三种方式 一.常规流 以前没有学布局的时候,属于常规流 元素按照常规显示方式显示,块级元素垂直排列.行内元素就是水平排列 二.浮动 float:left; float:right: float:none; 典型应用两个div水平排列 **************************布局步骤************************************** 一.画效果图 二.使用DIV进行分割 三.使用CSS来控制DIV进行布局 遵循盒模型 四. 使用以上三步进行细分 ****

关于css+div布局的疑问 2017-03-19

第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确到每一像素(是否含有边框像素):但是,在纸上花的草图再好再精确,也需要实际操练. 2.定位问题:明明都定位了,为什么还出现div布局混乱的现象? (未解)为什么可以通过设置margin-left/right的值为负数可以解决,但是在其他浏览器显示效果仍错误? 3.div中图片的定位,为什么按照理论设

CSS+DIV布局应用

Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: 3. 包含所有块级元素及内联元素,不可被包含: 常见元素 html body frameset 2.2.块级元素(Block-level element) 定义 以块显示的元素,常用于排版,默认情况下每一个块级元素会换行显示. 特点 1.每一个块级元素总是在新行上开始: 2.高度,行高以及外边距和

CSS+DIV布局

1.1 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位. 1.2 盒子模型

十天学会DIV+CSS(DIV布局)

一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> #layout { height: 300px; width: 400px; background: #99FFcc; }</style> </head> 一列固定宽度居中 <head> <style type="text/css"> #la

CSS+DIV布局中absolute和relative的区别

来源 :http://developer.51cto.com/art/201009/225201_1.htm   解释的很好.摘下来后面自己能看看. 区别:定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. position各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究