一. 梅兰商贸整站项目搭建
二. CSS初始化
整个项目的目录结构
js/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="cssReset.css" type="text/css" />
</head>
<body>
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<p>这是一个标签</p>
</body>
</html>
css/cssReset.css
@charset "utf-8"
html{
color:#000;
background:#FFF;
}
/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
em,
strong,
b,
u,
i
{
font-style:normal;
font-weight:normal;
}
ol,
ul {
list-style:none;
}
caption,
th {
text-align:left;
}
h1,
h2,
h3 {
font-size:100%;
font-weight:normal;
}
input,
textarea,
select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
*font-size:100%; /*to enable resizing for IE*/
}
三. 得到页面版心宽度,完成top的html代码
修改后的js/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/cssReset.css"/>
<link rel="stylesheet" href="../css/index.css"/>
</head>
<body>
<!-- S=页面的顶部 -->
<div class="top">
<div class="top_page">
<div class="top_page_l"></div>
<div class="top_page_r"></div>
</div>
</div>
<!-- E=页面的顶部 -->
</body>
</html>
修改后的css/index.css
@charset "UTF-8";
.top{
background-color: #F7F7F7;
height: 26px;
border-bottom: 1px solid #D8D8D8;
}
注意:js里所有的句子,后面是要加分号的,包括这句。
@charset "UTF-8";
四. 完成top部分
这里每个文件都改过,这里挨个叙述
js/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/cssReset.css"/>
<link rel="stylesheet" href="../css/index.css"/>
<link rel="stylesheet" href="../css/common.css"/>
</head>
<body>
<!-- S=页面的顶部 -->
<div class="top">
<div class="top_page">
<div class="top_page_l fl">您好,欢迎来到建材网!</div>
<div class="top_page_r fr">
<ul>
<li><a href="#">建材网首页</a></li>
<li><a href="#">我的商务室</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">建材服务</a></li>
<li><a href="#">客服中心</a></li>
<li><a href="#">网站导航</a></li>
</ul>
</div>
</div>
</div>
<!-- E=页面的顶部 -->
</body>
</html>
css/cssReset.css
@charset "UTF-8";
html{
color:#000000;
background:#FFFFFF;
}
a{
text-decoration: none;
}
/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin:0px;
padding:0px;
}
table {
border-collapse:collapse;
border-spacing:0;
}
em,
strong,
b,
u,
i
{
font-style:normal;
font-weight:normal;
}
ol,
ul {
list-style:none;
}
caption,
th {
text-align:left;
}
h1,
h2,
h3 {
font-size:100%;
font-weight:normal;
}
input,
textarea,
select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
*font-size:100%; /*to enable resizing for IE*/
}
css/index.css
@charset "UTF-8";
html{
font: 12px '宋体';
}
a{
color: #000;
}
.top {
background-color: #F7F7F7;
height: 26px;
border-bottom: 1px solid #D8D8D8;
}
.top_page {
width: 970px;
height: 26px;
margin: 0 auto;
}
.top_page_l{
line-height: 26px;
}
.top_page_r ul li{
line-height: 26px;
float: left;
padding-right: 10px;
}
css/common.css
.fl {
float: left;
}
.fr{
float: right;
}
运行效果图
前端项目步骤:
1.拿到美工设计图后,开始浏览页面布局,将页面简单划分出来
开发整站的两种方式:
①从上到下依次把每个盒子写完
②先把整站的布局给搞定,然后再把每个布局的盒子中的子元素补齐(模块化) 个人比较倾向
2.整站项目的目录结构搭建好:css js image index.html
3.css初始化:这里用的是YAHO的css初始化样式。地址为git@code.csdn.net:snippets/1678156.git
4.测量页面版心宽度及页面top部分(利用PS软件 标尺测量)
要想文字垂直方向上居中,就要将文字所在标签的line-height与容器的height相同。
版心:宽度为970px