web前端佈局練手專案

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

仿北大首頁佈局(只關心佈局)

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>練手專案1---Mr.Robot</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#top{
			margin: 0 auto;
			/*top欄居中對齊*/
			height: 103px;
			width: 970px;
		}
		#top #logo{
			height: 103px;
			width: 277px;
			float: left;
			background-color: red;
		}
		#top #language{
			height: 49px;
			width: 137px;
			margin-bottom: 8px;
			float: right;
			background-color: green;
		}
		#top #nav{
			width: 679px;
			height: 46px;
			float:right;
			background-color: green;
		}
		#content{
			margin: 0 auto;
			margin-top: 10px;
			margin-bottom: 10px;
			height: 435px;
			width: 970px;
			/*background-color: gray;*/
		}
		#content #leftpart{
			float: left;
			height: 435px;
			width: 310px;
			background-color: yellow;
			margin-right: 10px;
		}
		#content #rightpart{
			float: left;
			width: 650px;
			height: 435px;
			margin-bottom: 10px;
			/*background-color: black;*/
		}
		#content #main{
			width: 450px;
			height: 400px;
			margin-right: 10px;
			margin-bottom: 10px;
			float: left;
		}
		#content #rightpart #news1{
			width: 450px;
			height: 240px;
			margin-bottom: 10px;
			background-color: skyblue;
		}
		#content #rightpart #news2{
			width: 450px;
			height: 110px;
			margin-bottom: 10px;
			background-color: green;
		}
		#content #rightpart #news3{
			width: 450px;
			height: 30px;
			margin-bottom: 10px;
			background-color: skyblue;
		}
		#content #rightpart #hotpic{
			width: 190px;
			height: 400px;
			float: left;
			background-color: purple;
		}
		#content #rightpart #links{
			float: left;
			width: 650px;
			height: 25px;
			background-color: yellow;
		}
		#footer{
			height: 35px;
			width: 970px;
			background-color: skyblue;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<!-- 頭部 -->
	<div id="top">
		<div id="logo"></div>
		<div id="language"></div>
		<div id="nav"></div>
	</div>
	<!-- 主要內容 -->
	<div id="content">
		<div id="leftpart"></div>
		<div id="rightpart">
			<div id="main">
				<div id="news1"></div>
				<div id="news2"></div>
				<div id="news3"></div>
			</div>
			<div id="hotpic"></div>
			<div id="links"></div>
		</div>
	</div>
	<!-- 頁尾 -->
	<div id="footer"></div>
</body>
</html>

web前端佈局練手專案

仿北大首頁佈局(只關心佈局) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

前端練手專案

前端學習還是很有趣的，可以較快的上手然後自己開發一些好玩的專案來練手，網上也可以一抓一大把關於前端開發的小專案，可是還是有新手在學習的時候不知道可以做什麼，以及怎麼做，因此，就整理了一些前端專案教程，希望可以幫助正在學習前端的小夥伴。為了方便閱讀，大概把前端可以做的專案分為

前端篇——2015.3 第一次練手專案被自己蠢哭！

離做完第一個專案已過了一個周，在這個練手專案中，應該說得到的更多。在這個專案中，我的主要工作是美工+前端。初拿到專案需求時，覺得挺簡單的，於是開始慢慢悠悠的開始做介面簡要設計，才發現並沒有想象中的那麼簡單。我根據自己對需求的理解開始進行設計，後發到隊員那裡。這時，“

前端練手專案小結

簡要在這個頁面中，用到了JS面向物件的思想、AMD模組程式設計、jQuery、requireJS、繼承、事件監聽等前端的知識點。其中一些基礎的關於DOM的操作也有不少，包括建立節點，設定class或者CSS樣式等一系列的基礎運用。這可以算作是這段時間以來前端

Java Web練手專案原始碼下載

1. 電子商城專案採用了Struts、spring、hibernate，資料庫使用了MySQL。 2. CRM客戶關係管理系統沒有使用框架，採用了jsp、Servlet，資料庫使用了Oracle。 3. 投票管理系統採用了Struts、spring、h

python練手專案之股票指數提醒服務

前言一直比較關心各大經濟指數的走向，但是發現很多這方面的訊息都是需要開啟指定網頁或app才能知道的，沒有找到提供主動推送資料的服務。於是就想結合python自己動手搞一個，正好用來練手，很快就搞定了，本來計劃使用簡訊推送的但發現簡訊管制很嚴，還是用郵箱湊合一下吧。主要作用

個人python練手專案之微報命令列版V1.0開源

前言還記得不久之前，寫過一篇關於團隊管理工具的調研文章傳送門，當時調研了一大圈發現對於管理層來說最大的痛點就是沒有一個現成的工具支援word週報的匯出，傳統企業還是比較偏向紙質檔案的。再加上想練練python說動手就動手，於是就有了這個專案。專案定位算是練練手+解決自身痛點。現

微信小程式初體驗，入門練手專案--通訊錄，部署上線(二)

接上一篇《微信小程式初體驗，入門練手專案--通訊錄，後臺是阿里雲伺服器》：https://www.cnblogs.com/chengxs/p/9898670.html 開發微信小程式最尷尬的是好不容易開發完了，卻在程式碼稽核時被卡住了。因為你可能認為你的類目是開放類目中的一個，但是微信可能判

QT練手專案二：滑鼠拖動視窗

對於一個沒有邊框的視窗，滑鼠是無法將它拖動的，於是我們就需要自己重寫滑鼠的點選、移動和釋放事件來跟蹤滑鼠，從而達到使用滑鼠拖動視窗，這裡我們就簡單的使用一個mainwindow來演示。這個小專案程式碼非常少，適合用來入門QT。 &nb

Tensorflow練手專案 - 使用DNN進行手寫數字識別

首先書寫如下的程式 #coding=utf-8 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # number 1 to 10 data mnist = input_data.

Tensorflow練手專案 - 使用CNN進行手寫數字識別

首先書寫如下的程式碼程式碼有詳細的註釋，這裡就不一一解釋了 #coding=utf-8 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #引入資料集 mnist=inp

Tensorflow練手專案

首先書寫如下的程式碼程式碼有詳細的註釋，這裡就不一一解釋了 # import pandas as pd # import tkinter as tk # import csv # # ''' # # 很happy這個問題困惑了很久，儲存後的csv檔案，略加修改後，發現讀

微信小程式初體驗，入門練手專案--通訊錄，後臺是阿里雲伺服器

本文內容：一、前言二、相關概念三、開始工作四、啟動專案起來五、專案結構六、設計理念七、路由八、部署線上後端服務同步交流學習社群： https://www.mwcxs.top/page/440 原始碼地址：https://github.com/sau

2、C語言練手專案--C 語言編寫萬年曆

C語言編寫萬年曆一、需求二、實現 1、思路 2、程式碼 3、執行結果三、參考連結一、需求 C語言實現日曆二、實現 1、思路（1）日曆規則重點一：2月的天數，對應是四年

1、C語言練手專案--C 語言製作簡單計算器

C 語言製作簡單計算器一、需求二、實現 1、思路 2、程式碼 3、執行結果三、參考連結一、需求使用 C 語言做一個簡單的計算器，能執行加、減、乘、除操作二、實現 1、思路

pyqt5練手專案-抖音小姐姐短視訊下載

pyqt5=Python+ qt，這塊的資料現在慢慢多起來了，這裡給大家送一個小的demo用來練手。裡面技術點： 1）控制元件 Pushbutton的使用； 2）pyqt5執行緒的用法; 3)介面和邏輯分離； 4）pyqt5 控制檯日誌重定向到editText控

安卓開發實戰大學班級APP開發練手專案（一）Android Studio 自帶模板Bottom Navigation Activity 的使用

一、建立Bottom Navigation 使用Android Studio建立工程，在選擇activity的時候選擇Bottom Navigation Activity 之後 xml檔案程式碼修改如下 <?xml version="1.0" encoding=

微信小程式初體驗，入門練手專案--通訊錄，後臺是阿里雲伺服器(一)

內容：一、前言二、相關概念三、開始工作四、啟動專案起來五、專案結構六、設計理念七、路由八、部署線上後端服務一、前言（坑爹的玩意）微信小程式自從2017年，被各種看好，不過一段時間過去了還是反響平平，下半年隨著各項功能的開放，很多企業陸續接入了

Kotlin學習心得&練手專案

作為一名Android程式猿，看著Kotlin越來越火熱，心中再也無法平靜下來，那就來學習它。好吧，我承認之前我也看過一些kotlin書籍，但斷斷續續的看也沒有動手寫程式碼，所以很快就忘記了。所以學習新語言必須持之以恆並且多動手寫程式碼，別再為自己找各種理由了！android

Python學習路徑及練手專案合集

轉載自知乎 Wayne Shi，僅僅為了方便收藏檢視，侵權刪。階段1：入門知識零程式設計基礎的可以先從下面幾個教程瞭解程式設計及環境入門知識。（已有程式設計基礎直接從階段2起步）階段2：Python基礎看完入門知識，就可以開始本階段的征程了。（Python2

web前端佈局練手專案

相關推薦