网站实战 从效果图开始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"> ...
随机推荐
- (译)Node.js的全局变量
原文标题:Global Variables in Node.js 原文链接:http://www.hacksparrow.com/global-variables-in-node-js.html 你可 ...
- 移动Web开发小技巧
移动Web开发小技巧 添加到主屏后的标题(IOS) name="apple-mobile-web-app-title" content="标题"> 启用 ...
- 关于MyEclipse启动时的插件启动(Maven4MyEclipse)
在myEclipse的应用中有许多插件在开发的时候都用不到,那么,这些插件在启动myEclipse的时候一起启动的越少越好了 Maven4Myeclipse update 每当启动myEclipse的 ...
- 多线程下载工具-Axel
1.安装: apt-get install axel 2.用法: axel 参数 文件下载地址 3.常用参数: -n 指定线程数 -o 指定文件存储位置(如不指定,默认存在当前位置(pwd)) -q ...
- cocos2d-x游戏开发系列教程-超级玛丽05-CMMenuScene
代码下载链接 http://download.csdn.net/detail/yincheng01/6864893 解压密码:c.itcast.cn 背景 上一篇博文提到appDelegate,在该类 ...
- Windows Azure 社区新闻综述(#77 版)
欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话.以下是本周的亮点. 文章.视频和博客文章 · 文章: Windows Azure 表存储简 ...
- 关于异或(Xor)的一点笔记
因为博弈论里,尤其实在求sg函数时,经常会用到异或运算,所以我就把网上搜到的一些相关知识和自己的一些理解记下来. 如果出现差错,还请指出,谢谢! 异或:可以简称Xor,可以用数学符号⊕表示,计算机就一 ...
- 杭电 HDU 1242 Rescue
http://acm.hdu.edu.cn/showproblem.php?pid=1242 问题:牢房里有墙(#),警卫(x)和道路( . ),天使被关在牢房里位置为a,你的位置在r处,杀死一个警卫 ...
- Hibernate级联操作和载入机制(二) cascade and fetch
上一篇介绍了Hibernate持久化对象时候的级联操作.本篇介绍读取时候的级联操作. 还是用上一篇的样例.一份问卷有多个问题.可是每一个问题仅仅能属于一份问卷. 我们先看測试用例: @Test pub ...
- Oracle Licensing
Oracle根据什么来计算License的? Unlimited License Agreements Unlimited License Agreements通常简称ULA,表示在一个固定期限内(2 ...