网站实战 从效果图开始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/
详情素材下载地址: 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 布局华为网站的更多相关文章
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- CSS:CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- css div布局示例1(head-main-footer)
很简单的文档流布局 <!doctype html> <html lang="en"> <head> <meta charset=" ...
- 关于css+div布局的疑问 2017-03-19
第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...
- 回答: 2017-03-19的关于css+div布局的疑问 2017-04-05
原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...
- CSS+DIV布局应用(2015年06月10日)
Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...
- css+div布局案例
给最外层的div命名一个class 有针对性的进行css布局. <div class="joinus-info"> <div class="form-t ...
- 十天学会DIV+CSS(DIV布局)
一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...
随机推荐
- C#编辑基础笔记
目录 1. .NET .NET Framework是一种多语言的平台,一种技术. 而c#是基于其上面的一种语言. 1 2. Winform 桌面应用程序[从.net平台上面开发的 ...
- Java基础之编程语法(二)
1.常量: 整型:整数,4个字节. 长整型:整数,8个字节.以L结尾. 单精度浮点数:小数,4个字节.以F结尾. 双精度浮点数:小数,8个字节. 布尔:只有两个值,真(true)或假(false),1 ...
- chrome developer tool 调试技巧2
我大概是从 08.09 年从 Firebug 转入 Chrome Developer Tool,一直用到现在,越用越喜欢.我平时调错时常用的功能有: 代码格式化可以将被压缩的代码自动展开 实时代码编辑 ...
- QComboBox 添加图片(自带addItem函数就有这个功能,从没有注意过)
方法: 使用 QComboxBox::addItem(QIcon, QString); 示例: 点击(此处)折叠或打开 QComboBox *combo_status = new QComboB ...
- 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)中,整个过程中有几个需要注意的地方,在这 ...
- literal控件的例子
Literal的Mode属性,举例说明 这个属性的枚举值:PassThrough Encode Transform <%@ Page Language="C#" Auto ...
- 深入探究VC —— 编译器cl.exe(2)
这一章节介绍的全是VC编译器选项,option参数是cl.exe的编译选项,是cl.exe命令行参数中最复杂.也是最常用的.下面介绍一些常用的编译选项: 1.代码生成有关 这些选项将影响编译完成后生成 ...
- Linux基本配置和管理 1---- Linux网络基本配置
1 IP编址 1 IP编址是一个双层的编址方案,一个IP编址标识一个主机(或一个网卡接口) 2 现在应用最为广泛的是ipv4,已经开始逐步香ipv6切换 3 ipv4地址为32位,ipv6为128位 ...
- POJ3264——Balanced Lineup(线段树)
本文出自:http://blog.csdn.net/svitter 题意:在1~200,000个数中.取一段区间.然后在区间中找出最大的数和最小的数字.求这两个数字的差. 分析:按区间取值,非常明显使 ...
- FZU 1686 神龙的难题 DLX反复覆盖
DLX反复覆盖: 须要一个A*函数剪支 Problem 1686 神龙的难题 Accept: 462 Submit: 1401 Time Limit: 1000 mSec Memory L ...