经过我们的前面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. linux下TUN/TAP虚拟网卡的使用

    转载:http://wushank.blog.51cto.com/3489095/1306849 tun/tap 驱动程序实现了虚拟网卡的功能,tun表示虚拟的是点对点设备,tap表示虚拟的是以太网设 ...

  2. Ext.MessageBox.Show使用Progress

    在此之前,先添加引用:以下引用方式仅供参考:由于我的extjs文件夹放在script文件夹下 <link href="~/Scripts/extjs/resources/ext-the ...

  3. Spring注解配置

    配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...

  4. 【转载】CentsOS系统inotify实时监控服务器文件(夹)定制事件处理程序

    原始博文和参考博文 1.CentsOS系统inotify实时监控服务器文件 2.Linux中让进程在后台运行的方法 3.linux inotify 监控文件系统事件 非常好 方法一 说明: 服务器系统 ...

  5. python2.7_1.13_编写一个SNTP客户端

    1.pip install ntplib 2.思路:先创建一个NTPClient实例,然后在这个实例上调用request()方法,把NTP服务器的地址传入方法,向NTP服务器发起一个NTP请求,响应使 ...

  6. 删除缓存内容----unrecognized selector sent to instance

    这条错误主要还得看unrecognized前面,,我的时[NSNumber-length...]其实是变量类型错误.. 无法识别选择器发送实例,,本来意思就是你的controllerview找不到视图 ...

  7. WebRTC–getUserMedia & Canvas

    下面是一个使用getUserMedia接口和Canvas的drawImage方法实现的截图功能(截取视频中的一帧). 基本思路是这样子的: getUserMedia获取一个MediaStream, s ...

  8. 如何用java比较两个时间或日期的大小

    有一个字符串的时间,比如"2012-12-31 16:18:36" 与另一个时间做比较,如果前者比后者早,则返回true,否则返回false. 为此,我设计了一个方法. impor ...

  9. jQuery 之 $(this) 出了什么问题?

    近期在写jQuery的时候出了这样一个问题? <html> <head> <title></title> </head> <style ...

  10. Swift--基本数据类型(一)

    不像更多语言中,X不要求你写一个分号(;)在你的代码中的每一个语句后,尽管能够这样做.然而,假设你想在一行中写入多个单独的语句分号是必需的: .    1  let cat = "" ...