尚硅谷前端《梅兰商城CSS》（从1到4)

该套视频基于：https://www.bilibili.com/video/av7846734?from=search&seid=8965612644956135524

一. 梅兰商贸整站项目搭建

二. 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初始化样式。地址为[email protected]:snippets/1678156.git

4.测量页面版心宽度及页面top部分（利用PS软件标尺测量）

要想文字垂直方向上居中，就要将文字所在标签的line-height与容器的height相同。

版心：宽度为970px

尚硅谷前端《梅兰商城CSS》（从1到4)

猜你喜欢