前端CSS練習專案記錄（從1到4)

阿新 • • 發佈：2019-02-04

一. 梅蘭商貿整站專案搭建

二. 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)

一. 梅蘭商貿整站專案搭建二. CSS初始化整個專案的目錄結構 js/index.html <!DOCTYPE html> <html lang="en"> <head> <meta ch

專案記錄（dubbox）

專案的第一天，瞭解了一下整體的框架邏輯。我們目前從事的專案為SOA service-Oriented Architecture【面向服務的系統構架】，主要思想為前後端分離。前端為html靜態頁面，controller控制層；後端為service服務層，資料訪問層

使用Vue-cli搭建專案流程（從零開始）

一、安裝node.js 去官網下載安裝node.js https://nodejs.org/en/ 或者可以去node.js中文網下載 http://nodejs.cn/download/ 安裝完成以

【vue】使用Vue-cli搭建專案流程（從零開始）

一、安裝node.js 去官網下載安裝node.js https://nodejs.org/en/ 或者可以去node.js中文網下載 http://nodejs.cn/download/ 安裝完成以後通過命令列工具輸入 node -v 檢視安裝的node.js版本命令列工

sql server練習過程記錄（1）

sqlserver中 --將查詢結果作為一個臨時表 select * from (Select AVG(Grade) as avg, Sno from SC group by Sno) as A --將查詢結果插入一個新表（這個表不能預先被建立） select Sname, Sno,

平安產險專案記錄（一）

在產險作為主要開發人員一共做了4個專案，分別是兩個 node.js 後臺服務、一個 react 移動端專案、一個 vue 移動端專案。其中兩個 node.js 服務都是隻有我一個人開發，移動端專案是有5個人的前端團隊協作開發。第一個 node.js 服務是一個車型查詢服務，主要目標是把

平安產險專案記錄（二）

其實新增介面返回資料壓縮還不是增加的第一個功能。因為第一個介面是不需要查資料庫的，所以一開始只考慮了快取問題，沒有考慮資料庫連線問題。做快取的時候，因為時間長任務少，就自己從頭開始做了一個輕量的快取系統。這個快取系統具有快取資料和超時被動清除資料的功能，不用主動清除是因為被動清除可以不用設定

python UI自動化測試專案記錄（二）請求介面資料並提取資料

首先獲取預期結果-介面響應資料，分成兩步： 1 獲取資料來源介面資料 2 提取後續頁面對比中要用到的資料並且為了便於後續呼叫，將介面相關的都封裝到ProjectApi類中。隱去敏感資訊後的原始碼如下： 1 獲取資料來源介面資料 # coding:utf-8 import

jQuery與Ajax小練習-二級聯動（從Oracle資料庫獲取資料）

之前做了個簡單的二級聯動小練習，這次算是加強版的吧，希望能對大家有點用處。 //主頁面 <html> <head> <meta charset="UTF-8"> <title>Insert titl

PHP第一個專案--HelloWorld（從安裝到執行成功）

PHP第一個專案–HelloWorld（從安裝到執行成功）簡述每學一門語言，就會先試著用這門語言寫出HelloWorld來。為什麼要學php？對於我來說有四個原因之前一個在騰訊實習的師兄跟我說他在騰訊寫php，我很嚮往 mysql的菜鳥教程說基本上是用

【前端小小白的學習之路】vue學習記錄（vue-cli腳手架構建項目結構）

cli 4.0 ebp bpa pack all 點擊 ash install 我們直接從vue的工程化開始入手。在這裏用git命令行搭建項目環境。（當然直接cmd命令行下也是一樣的） git下載安裝地址：https://www.git-scm.com/downloa

【前端小小白的學習之路】vue學習記錄②（hello world！）

pan cli run def template script port img con 接著上篇vue-cli腳手架構建項目結構建好項目之後，就開始寫個“hello world！”吧~~~ vue玩的都是組件，所以開發的也是組件。 1.新建he

【前端小小白的學習之路】vue學習記錄④（路由傳參）

emp 分享 exp pat vuejs 小白 one -1 limit 通過上篇文章對路由的工作原理有了基本的了解，現在我們一起來學習路由是如何傳遞參數的，也就是帶參數的跳轉。帶參數的跳轉，一般是兩種方式： ①.a標簽直接跳轉。 ②點擊按鈕，觸發函數跳轉。在上

web前端---css（2）

自動 col fixed table 路徑排列 inpu rgba 內聯對象第一章 css的四種引入方式 1.行內式行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。 <p style="backg

MySQL 使用自增ID主鍵和UUID 作為主鍵的優劣比較具體過程（從百萬到千萬表記錄測試）

popu tis pack 方案表數據 lock 進行 args ios ?測試緣由? 一個開發同事做了一個框架。裏面主鍵是uuid。我跟他建議說mysql不要用uuid用自增主鍵，自增主鍵效率高，他說不一定高，我說inn

在Eclipse中安裝git（從github上下載專案到Eclipse）

開啟Eclipse，點選左上角help，選擇Marketplace（不同Eclipse版本中會有不一樣的名字，但是認準Marketace即可）,在Search中輸入egit，進行搜尋。在搜尋結果中選擇你要需要下載的，安裝即可，會有具體的介紹。安裝完成之後會提醒

後端介面遷移（從 webapi 到 openapi）前端經驗總結

此文已由作者張磊授權網易雲社群釋出。歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。前情提要以前用的是 webapi 現在統一切成 openapi，欄位結構統統都變了接入介面 20+，涉及模組的建立等主要流程。頁面基本無改，僅有一個新需求，建立時新增一個欄位其他依賴介面需要接入模組

從零開始Vue專案實戰（三）-專案結構

現在在瀏覽器中輸入http://localhost:8083，可以看到初始的“Welcome to Your Vue.js App”頁面了目錄結構 ├── README.md 專案介紹 ├── index.html 入口頁面 ├── build

從零開始Vue專案實戰（二）-搭建環境

1、下載node.js並安裝下載地址：https://nodejs.org/en/download/。下載.msi 格式的直接連續下一步就可以了。安裝完成後可以用 node -v 和 npm -v 檢視版本號。 2、安裝vue-cli 腳手架構建工具在命令列中輸入npm ins

從零開始Vue專案實戰（一）-準備篇

從前參與過一個react專案的程式碼編寫，大神搭建的框架，我主要負責業務邏輯程式碼編寫，現在回想起來似乎又什麼都不會，現在為了鞏固前端知識，決定用Vue來做這個專案的移動端網站，我本人Vue是從零開始的，一邊學習一邊寫程式碼，在這裡記錄一下過程。專案說明：主要功能實現一個投資平臺，會員身份為融資人或投

前端CSS練習專案記錄（從1到4)

相關推薦