经过我们的前面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. C#编辑基础笔记

    目录 1.     .NET .NET Framework是一种多语言的平台,一种技术. 而c#是基于其上面的一种语言.    1 2.     Winform 桌面应用程序[从.net平台上面开发的 ...

  2. Java基础之编程语法(二)

    1.常量: 整型:整数,4个字节. 长整型:整数,8个字节.以L结尾. 单精度浮点数:小数,4个字节.以F结尾. 双精度浮点数:小数,8个字节. 布尔:只有两个值,真(true)或假(false),1 ...

  3. chrome developer tool 调试技巧2

    我大概是从 08.09 年从 Firebug 转入 Chrome Developer Tool,一直用到现在,越用越喜欢.我平时调错时常用的功能有: 代码格式化可以将被压缩的代码自动展开 实时代码编辑 ...

  4. QComboBox 添加图片(自带addItem函数就有这个功能,从没有注意过)

    方法:    使用 QComboxBox::addItem(QIcon, QString); 示例: 点击(此处)折叠或打开 QComboBox *combo_status = new QComboB ...

  5. CentOS 6.5(64bit)安装GCC4.8.2+Qt5.2.1(替换GCC的链接库)

    截至目前,Qt的最新版本为5.2.1,CentOS的版本为6.5,GCC的版本为4.8.2,经过一番尝试,终于将Qt开发环境安装到了CentOS(64 bit)中,整个过程中有几个需要注意的地方,在这 ...

  6. literal控件的例子

    Literal的Mode属性,举例说明 这个属性的枚举值:PassThrough  Encode  Transform <%@ Page Language="C#" Auto ...

  7. 深入探究VC —— 编译器cl.exe(2)

    这一章节介绍的全是VC编译器选项,option参数是cl.exe的编译选项,是cl.exe命令行参数中最复杂.也是最常用的.下面介绍一些常用的编译选项: 1.代码生成有关 这些选项将影响编译完成后生成 ...

  8. Linux基本配置和管理 1---- Linux网络基本配置

    1 IP编址 1 IP编址是一个双层的编址方案,一个IP编址标识一个主机(或一个网卡接口) 2 现在应用最为广泛的是ipv4,已经开始逐步香ipv6切换 3 ipv4地址为32位,ipv6为128位 ...

  9. POJ3264——Balanced Lineup(线段树)

    本文出自:http://blog.csdn.net/svitter 题意:在1~200,000个数中.取一段区间.然后在区间中找出最大的数和最小的数字.求这两个数字的差. 分析:按区间取值,非常明显使 ...

  10. FZU 1686 神龙的难题 DLX反复覆盖

    DLX反复覆盖: 须要一个A*函数剪支 Problem 1686 神龙的难题 Accept: 462    Submit: 1401 Time Limit: 1000 mSec    Memory L ...