转自：http://www.cnblogs.com/ywang/archive/2014/04/16/3668638.html

今天用html+css做一个最简单的页面。效果图如下：

说明：这里的韩文用中文随便代替。

1、拿到效果图首先分析页面布局

该图是竖排结构，分5个大的DIV：

我做的页面宽度是1024px的，在5个DIV外面加一个大框给一个名为all的class。设定宽为1024px，并居中。

一般页面都是按顺序做，这个看个人习惯。由于只是一个页面，我的css就和HTML写在一个页面里面。

2、先写第一个div，给他一个class名称为top.

css样式如下：

效果如下：

这样第一个div就做好了。

3、下面做menu和logo

css如下：

效果图：

4、做menu的子菜单

css如下：

一般二级菜单的可以用js做，我这边没用js，直接用的css,给一级菜单和二级菜单定位，用样式（图中矩形框中的css）控制二级菜单的隐藏显示。这样写的缺点就是不兼容IE6。其他的主流浏览器像谷歌，火狐和IE高版本都可以兼容。

5、banner最好做了，直接放图片或设置背景都可以。此处省略

6、分析主体内容，第4个DIV

该DIV中分上下两层，第一层显示新闻列表，关于我们和产品中心，第二层显示logo+版权说明和一个下拉框

因为第一层的内容是并排显示，所以这三个DIV设置像左浮动。

按从左向右的顺序，先做新闻板块

样式：

7、图中关于我们又分左右结构，直接让图片左浮，左右结构就出来了。这种写法暂时还没遇到什么问题。

产品中心应该是用js做的百叶窗效果，这里暂时只是样式。效果会后续补上。在产品中心和底部logo之间加

下面附上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html+css基本页面</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; color:#464646;}
a{ text-decoration:none;}
ul li{ list-style:none;}
.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
/*.clear样式的作用是清除浮动*/
.all{ width:1024px; margin:0 auto;}
.top{ background:#404040; display:table; width:100%;}
.top ul{ float:right; margin-right:30px;}
.top ul li{ float: left; margin:0px 10px;}
.top ul li a{ display:block; color:#c2c2c2; line-height:30px; margin:10px 0px; width:75px; text-align:center;}
.top ul li a.a_hover{background:url(images/topa_bg.png) no-repeat;}
.top ul li a:hover{background:url(images/topa_bg.png) no-repeat;}
 
.header{ background:url(images/menu_bg.jpg) repeat-x;}
.logo img{ display:block; margin:0px auto; padding-top:20px;}
.menu{ display:table; margin:0 auto;}
.menu ul li{ float:left; position:relative;}
.menu ul li.li_line{ width:2px; background:url(images/li_linebg.png) no-repeat; height:44px;}
.menu ul li a{ display:block; line-height:44px; width:150px; text-align:center; color:#000; font-size:14px;}
.menu ul li a.menua_hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}
.menu ul li a:hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}
.menu ul li:hover ul{ display:table;}
.menu ul li ul{ position:absolute; width:350px; padding-left:30px; left:15px; background:#001126; display:none;}
.menu ul li ul li{ float:left;}
.menu ul li ul li a{ width:80px; line-height:24px; color:#fff; font-size:12px;}
.menu ul li ul li a:hover{ background:none; color:#246477;}
 
.main{ padding:20px; background:url(images/bottombg.jpg); height:183px;}
.news{ float:left; width:220px; margin:0px 20px;}
.news dl dd{ float:left; color:#464646; font-size:14px; font-weight:bold; line-height:24px;}
.news dl dt{ float:right; line-height:24px; background:url(images/newsdd_bg.jpg) no-repeat left center; padding-left:6px;}
.news ul li{ line-height:22px;}
.news ul li a{ background:url(images/newa_bg.jpg) no-repeat left center; padding-left:10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:210px; display:block;}
  
.about{ width:305px; display:table; margin:0px 20px; float:left;}
.about img{ float:left; margin:20px;}
.about img.view{ margin:5px 0px 0px 0px;}
.about h3{ line-height:24px; margin-top:20px; color:#4380ab; font-size:16px;    }
.about span{ line-height:20px; display:block;}
 
.pro{ width:320px; float:left; border:1px solid #d7d7d7; display:table;}
.pro ul{ float:left;}
.pro ul.pro_ulview{ width:254px;}
.pro ul.pro_ulview li{ float:left; background:none; width:157px; margin-right:10px;}
.pro ul.pro_ulview li a.more{ margin:10px 0px 0px 20px; display:block;}
.pro ul img.view{ margin-top:40px; }
.pro ul img{ float:none; display:block;}
.pro ul strong{ display:table; line-height:30px; margin-left:20px;}
.pro ul span.view{ width:140px; display:block; margin-left:20px;}
.pro ul li{ width:33px; height:112px; background:url(images/pro_libg.jpg);}
 
.footer_logo{ float:left; margin:20px;}
.footer_menu{ float:left; margin:5px 0px 0px 70px;}
.footer_menu ul li{ float:left; width:102px; line-height:30px; text-align:center;}
.footer_menu ul li.fli_line{ width:1px; background:url(images/fli_linebg.png) no-repeat; height:30px;}
.footer_menu ul.bq{ margin-left:38px;}
.footer_menu ul span{ line-height:22px; margin-right:10px; color:#7d7d7d;}
.select{ float:right; margin-top:20px;}
</style>
</head>
<body>
<div class="all">
    <div class="top">
        <ul>
            <li><a href="#" class="a_hover">头部示例1</a></li>
            <li><a href="#">头部示例2</a></li>
            <li><a href="#">头部示例3</a></li>
            <li><a href="#">头部示例4</a></li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class="header">
        <div class="logo">
        <img src="images/logo.png" alt="logo" />
        </div>
        <div class="menu">
            <ul>
            <li class="li_line"></li>
                <li>
                    <a href="#" class="menua_hover">菜单1</a>
                    <ul>
                        <li><a href="#">二级菜单1</a></li>
                        <li><a href="#">二级菜单2</a></li>
                        <li><a href="#">二级菜单3</a></li>
                        <li><a href="#">二级菜单4</a></li>
                    </ul>
                </li>
            <li class="li_line"></li>
                <li><a href="#">菜单2</a>
                    <ul>
                        <li><a href="#">二级菜单1</a></li>
                        <li><a href="#">二级菜单2</a></li>
                        <li><a href="#">二级菜单3</a></li>
                        <li><a href="#">二级菜单4</a></li>
                    </ul>
                    </li>
            <li class="li_line"></li>
                <li><a href="#">菜单3</a></li>
            <li class="li_line"></li>
                <li><a href="#">菜单4</a></li>
            <li class="li_line"></li>
                <li><a href="#">菜单5</a></li>
            <li class="li_line"></li>
                <li><a href="#">菜单6</a></li>
            <li class="li_line"></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div>
        <img src="images/banner.jpg" alt="banner" />
    </div>
    <div class="clear"></div>
    <div class="main">
        <div class="news">
            <dl>
                <dd>NEWS</dd>
                <dt>more</dt>
            </dl>
            <div class="clear"></div>
            <ul>
            <li><a href="#">新闻示例1新闻示例1新闻示例1新闻示例1</a></li>
            <li><a href="#">新闻示例2新闻示例2新闻示例2新闻示例</a></li>
            <li><a href="#">新闻示例3新闻示例3新闻示例3新闻示例</a></li>
            <li><a href="#">新闻示例4新闻示例4新闻示例4新闻示例</a></li>
            </ul>
        </div>
        <div class="about">
        <img src="images/about.png" alt="about" />
        <h3>ABOUT</h3>
        <span>关于我们关于我们关于我们关于我们关于我们关于我们</span>
        <a href="#"><img src="images/about_view.png" alt="view" class="view"/></a>
        </div>
        <div class="pro">
            <ul class="pro_ulview">
            <li>
            <strong>产品<span>案例1</span></strong>
            <span class="view">产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介</span>
            <a href="#" class="more"><img src="images/about_view.png" alt="view"/></a>
            </li>
            <img src="images/pro_img.png" alt="pro" class="view"/>
            </ul>
            <ul>
            <li></li>
            </ul>
            <ul>
            <li></li>
            </ul>
        </div>
        <div class="clear"></div>
            <div class="footer_logo"><img src="images/footer_logo.png" alt="footer_logo" /></div>
            <div class="footer_menu">
            <ul>
            <li><a href="#">首页</a></li>
            <li class="fli_line"></li>
            <li><a href="#">关于我们</a></li>
            <li class="fli_line"></li>
            <li><a href="#">产品中心</a></li>
            </ul>
            <div class="clear"></div>
            <ul class="bq"><span>版权所有@某某网站</span><span>联系电话:01234567890</span></ul>
            </div>
            <div class="select"><img src="images/select.jpg" alt="select" /></div>
    </div>
    </div>
</body>
</html>

至于图片，用的到的就从效果图上切下来就ok了。

第一次总结这样的东西，不足之处还请见谅。希望可以和大家一起交流，一起进步。

页面一般分特效页面和普通页面。

布局一般分为菜单+LOGO，主体内容和尾部的版权说明。

特效页面的布局不确定，普通页面的布局一般分上中下，中间部分又分上下结构或左右结构。先把大体框架搭起来，再一点点往里填，会好做一点。

最后给大家一个参考网站：http://www.w3school.com.cn/里面前端需要的东西基本上都有了。遇到问题也可以去里面找解决方法。个人极力推荐。

1.html+css页面设计的更多相关文章

  1. CSS布局设计

    CSS布局设计: (1)固定布局:各个部分采用固定宽度的页面布局. (2)流式布局:通过定义模块和模块间距的百分比的方式来实现.缺点是会自动缩放,影响图片的美观. (3)响应式布局:页面可以用户的设备 ...

  2. 仿souhu页面设计

    仿搜狐页面设计 Html页面设计代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  3. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  4. 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局

    01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  5. html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计

    序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度 ...

  6. 使用Nginx SSI功能辅助HTML页面设计

    SSI,Server Side Include,支持html静态文件内以 <!--#include file="/layout/header.html"-->  的方式 ...

  7. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  8. 微信HTML5页面设计建议

    一个HTML5页面从提出到完成上线的流程:>   1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...

  9. BBS--功能4：个人站点页面设计（ORM跨表与分组查询）

    查询: 日期归档查询 1 date_format ============date,time,datetime=========== create table t_mul_new(d date,t t ...

随机推荐

  1. 解决The requested resource is not available的办法

    1.问题描述: eclipse中使用tomcat来运行HelloWorld时出现The requested resource is not available. 在报错中有一行Setting prop ...

  2. 在Ubuntu14.04中配置mysql远程连接教程

    上一篇文章,小编带大家学会了在Ubuntu14.04中安装MySQL,没有来得及上课的小伙伴们可以戳这篇文章:如何在Ubuntu14.04中安装mysql,今天给大家分享一下,如何简单的配置MySQL ...

  3. Perl初学笔记

    标量数据 标量:数字和字符串. 数字:Perl不存在整形,全部是double类型.整形常量会被自动转换为浮点型. Perl数字字面量(直接量):+-和小数点是非必须的,e代表10的多少次方.例如:-1 ...

  4. R学习:《R语言数据分析与挖掘实战》PDF代码

    分三个部分:基础篇.实战篇.提高篇.基础篇介绍了数据挖掘的基本原理,实战篇介绍了一个个真实案例,通过对案例深入浅出的剖析,使读者在不知不觉中通过案例实践获得数据挖掘项目经验,同时快速领悟看似难懂的数据 ...

  5. java架构解密——实时动态aop

    在上篇博客中个.咱们一起组建了一个容器,里面封装了业务,这样,咱们就将业务和服务的组装放到了client,而client就相当于咱们的开发中使用到的配置文件.大家发现问题了吗?就是我不能动态修改了?业 ...

  6. Redisclient连接方式Hiredis简单封装使用,连接池、屏蔽连接细节

    工作须要对Hiredis进行了简单封装,实现功能: 1.API进行统一,对外仅仅提供一个接口. 2.屏蔽上层应用对连接的细节处理: 3.底层採用队列的方式保持连接池,保存连接会话. 4.重连时採用时间 ...

  7. 图解hdu5301Buildings

    这个题就是给出一个大矩形n*m.当中有个1*1的小格子不能被占用,然后要你用非常多小矩形去填满.问小矩形的最小最大面积是多少. 显然小矩形必定是1*x的最好,毕竟i*x,若i>1则还是能够拆成非 ...

  8. modSecurity规则学习（五）——DDOS攻击检测

    1.IP访问频率 SecAction phase:1,nolog,pass,setvar:IP.counter=+1 SecRule IP:UPDATE_RATE "@gt 10" ...

  9. jquery插件库http://www.jq22.com/

    http://www.jq22.com/ http://www.jq22.com/jquery/%E5%8A%A0%E8%BD%BD http://www.jq22.com/jquery/%E5%BC ...

  10. Onvif开发之客户端搜索篇

    关于ONVIF的广播,有客户端搜索和服务端发现的区别:客户端向固定的网段和固定的端口发送广播消息,服务端在对应的端口回复广播请求消息本文首先介绍客户端如何进行广播的已经对广播回复的信息的基本处理. 客 ...