经过我们的前面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/

详情素材下载地址： http://pan.baidu.com/s/1pJx5eDd

第一先搭建骨架（结构图）：

第一单页面：
做网站的流程：
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 小强零零壹 下载

本文引自于： http://www.xiaoqiang001.com/a/CSS_DIV/20140709/8.html

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

  1. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  2. CSS：CSS+DIV布局网页

    现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...

  3. CSS+DIV布局初练—DIV元素必须成对出现？

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  4. css div布局示例1（head-main-footer）

    很简单的文档流布局 <!doctype html> <html lang="en"> <head> <meta charset=" ...

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

    第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...

  6. 回答： 2017-03-19的关于css+div布局的疑问 2017-04-05

    原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...

  7. CSS+DIV布局应用（2015年06月10日）

    Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...

  8. css+div布局案例

    给最外层的div命名一个class 有针对性的进行css布局. <div class="joinus-info"> <div class="form-t ...

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

    一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...

随机推荐

  1. Spring boot实现数据库读写分离

    背景 数据库配置主从之后,如何在代码层面实现读写分离? 用户自定义设置数据库路由 Spring boot提供了AbstractRoutingDataSource根据用户定义的规则选择当前的数据库,这样 ...

  2. Unity 对象池 生产 保存

    Unity对象池主要是保存那些常用的物体,避免他们在不断销毁和创造中损坏性能. 主要思路为:创造物体时,判断是否存在,如果存在则调用并使其显示.如果不存在则创造一个新的. 当销毁时,调用协程延时隐藏物 ...

  3. 解決 centos中-bash: vim: command not found

    用centos 的主机的時候, 用 vim 时出现 -bash: vim: command not found. 只能使用 vi. 那么如何安裝 vim 呢? 输入 rpm -qa|grep vim ...

  4. BZOJ 1806: [Ioi2007]Miners 矿工配餐( dp )

    dp... ------------------------------------------------------------------------------- #include<cs ...

  5. Map接口的学习

    接口Map<K, V> 一.Map功能 1.添加 put(K key, V value) putAll(Map<? extends K, ? extends V>); 2.删除 ...

  6. windos下安装PEAR 注意

    1.在这里下载PEAR http://pear.php.net/go-pear.phar 在页面右键另存为 go-pear.phar 到PHP的根目录,并去目录查看是否保存为了go-pear.phar ...

  7. C#设置窗体最大化且不遮挡任务栏的方法

    C#设置窗体最大化示例: 也可将方法内的内容放到主窗体首次加载load方法中. /// <summary> /// 设置窗体最大化(不遮挡任务栏)但此方法在宽屏中不能显示全屏/// < ...

  8. 转: seajs手册与文档之 -- 快速参考 ( ~~useful )

    目录 快速参考 seajs.use seajs.config define require require.async exports module.exports 快速参考 该页面列举了 SeaJS ...

  9. Unity3D游戏开发之小地图的实现

    今天我们来讲一下在Unity3D中怎样实现小地图.首先,我们来一起看看终于实现的效果: 要实现小地图效果,须要实现对于小地图和角色的绘制,所以这里须要用到OnGUI()方法,我们一起来看代码: [cs ...

  10. 警惕 MySql 更新 sql 的 WHERE 从句中的 IN() 子查询时出现的陷阱

    mer_stage 表有 216423 条记录,DDL: CREATE TABLE `mer_stage` ( `STAGE_ID` int(11) NOT NULL AUTO_INCREMENT, ...