网站实战 从效果图开始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"> ...
随机推荐
- sign a third-party dll which don't have a strong name
Problem: Assembly generation failed -- Referenced assembly '' does not have a strong name Cause: thi ...
- android 基础学习图片六progross
加载进度条应用
- IOS开发之格式化日期时间的使用 && 编程中常见问题
今天在做一个有关时间的一些开发的时候,遇见了一写问题,反正来说既是很简单的问题,但毕竟用了我一些时间去调错误,遂记录之. 本来是想用 NSDateFormat 来转换一下服务器返回的时间,然后在客户端 ...
- SQL中distinct的用法(转)
原文:http://www.cnblogs.com/rainman/archive/2013/05/03/3058451.html 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出 ...
- VMware: linux起步提示 memory for crashkernel(0*0 to 0*0)not within permissible
(virtualbox/VMware)linux起步提示memoryforcrashkernel(0*0 to 0*0)notwithinpermissible http://www.myexcep ...
- C语言程序转换为Python语言
python语言是支持用c来它写模块的,其实现有的很多模块也是用c写的.这里我做个简单的介绍. 先决条件:1.在linux上编写,需要自己编译出python的动态连接库.也就是要有libpython2 ...
- poj 3252
http://poj.org/problem?id=3252//自己搞了很长时间...现在刚刚有点明白.. 1 #include <iostream> using namespace st ...
- sql中charindex和cast结合使用
1.CHARINDEX函数常常用来在一段字符中搜索字符或者字符串. 语法 CHARINDEX ( expression1 , expression2 [ , start_location ] ) 返回 ...
- MacOS + Linux + Nginx
Asp.Net Core 发布和部署( MacOS + Linux + Nginx ) 前言 在上篇文章中,主要介绍了 Dotnet Core Run 命令,这篇文章主要是讲解如何在Linux中,对 ...
- A. Liserious战队
Liserious战队是一支活跃在京沪地区的著名密室逃脱战队,在优秀的队长Liserious和芳姐的带领下,打遍天下大大小小的密室逃脱,攻无不克,战无不胜,上天入地无所不能. 世界密室逃脱委员会以IS ...