在web開發中,html和CSS是不可或缺的兩個技術。
下面我們來看一個簡單的項目實例,通過html和CSS來實現一個簡單的個人主頁。
個人主頁 我的個人主頁
歡迎來到我的個人主頁!
我是一名前端開發工程師,熱愛互聯網技術。
這個網站主要用來展示我的個人作品、經驗和技能。
如果您對我的工作感興趣,可以通過以下方式聯系我:
- 郵箱:xxxxx@xx.com
- 電話:xxx-xxxx-xxxx
- 微信:xxxxx
上述代碼是html基本結構,頭部引入了外部樣式表style.css。其中,header和main分別表示頁面的頭部和主體部分。
/* style.css */ body { font-family: Arial, sans-serif; } .header { background-color: #333; color: #fff; padding: 20px; } .header h1 { margin: 0; } .header nav ul { margin: 10px 0 0 0; padding: 0; list-style: none; } .header nav ul li { display: inline; margin-right: 20px; } .header nav ul li a { color: #fff; text-decoration: none; } .main { margin: 50px auto 0 auto; max-width: 800px; padding: 20px; border: 1px solid #ccc; } .main h2 { margin-top: 0; }
上述代碼是css樣式表,對html中的各個部分進行樣式的設置,包括字體、顏色、背景、邊距等。其中,header和main部分的樣式做了特別的設計,使其更符合網頁的視覺效果。
通過html和CSS的組合,我們實現了一個簡單的個人主頁。當然,在實際開發中,可能會涉及更多的細節和效果,需要更豐富的技術和經驗去實現。