當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【HTML CSS】笔记4日 [ 学成在线素材 ]

發布時間：2023/12/20 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了【HTML CSS】笔记4日 [ 学成在线素材 ] 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

準備素材和工具

學成在線PSD源文件。

開發工具：PS（切圖）/cutterman插件 + VScode（代碼）+ Chrome（調試）。

創建study目錄文件夾（用于存放我們這個頁面的相關內容），并用VScode打開這個目錄文件夾。

study目錄內新建images文件夾，用于保存圖片。

新建首頁文件夾index.html。（以后我們的網站首頁同意規定為index.html）。

新建style.css樣式文件。本次我們采用外鏈樣式表。

將樣式引入到我們的index.html文件頁面中。

樣式表寫入清除內外邊距的樣式，來檢測樣式表是否引入成功。

素材自行食用，鏈接地址：https://download.csdn.net/download/qq_39518871/13023059

CSS屬性書寫順序

布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關系到模式）

自身屬性：width / height / margin / padding / border / background

文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px; }

布局流程

為了提高網頁制作的效率，布局時通常有以下的布局流程，具體如下：

必須確定頁面的版心（可視區），我們測量可得知。

分析頁面中的行模塊，以及每個行模塊中的列模塊。其實頁面布局，就是一行行羅列而成

制作HTML結構。我們還是遵循，先有結構，后有樣式的原則。結構永遠最重要。

然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。

效果圖

index.html文件

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>學成在線</title><link rel="stylesheet" href="style.css" /></head><body><div class="header w"><div class="logo"><img src="images/logo.png" alt="" /></div><div class="nav"><ul><li><a href="#">首頁</a></li><li><a href="#">課程</a></li><li><a href="#">職業規劃</a></li></ul></div><div class="search"><input type="text" value="輸入關鍵詞" /><button></button></div><div class="user"><img src="images/user.png" alt="" />qq-lilie</div></div><div class="banner"><div class="w"><div class="subnav"><ul><li><a href="#">前端開發<span> > </span></a></li><li><a href="#">后端開發<span> > </span></a></li><li><a href="#">移動開發<span> > </span></a></li><li><a href="#">人工智能<span> > </span></a></li><li><a href="#">商業預測<span> > </span></a></li><li><a href="#">云計算&大數據<span> > </span></a></li><li><a href="#">運維&從測試<span> > </span></a></li><li><a href="#">UI設計<span> > </span></a></li><li><a href="#">產品<span> > </span></a></li></ul></div><div class="course"><h2>我的課程表</h2><div class="bd"><ul><li><h4>繼續學習程序語言設計</h4><p>正在學習-適用對象</p></li><li><h4>繼續學習程序語言設計</h4><p>正在學習-適用對象</p></li><li><h4>繼續學習程序語言設計</h4><p>正在學習-適用對象</p></li></ul><a href="#" class="more">全部課程</a></div></div></div></div><div class="goods w"><h3>精品推薦</h3><ul><li><a href="#">JQuery</a></li><li><a href="#">JQuery</a></li><li><a href="#">JQuery</a></li><li><a href="#">JQuery</a></li><li><a href="#">JQuery</a></li></ul><a href="#" class="mod">修改興趣</a></div><div class="box w"><div class="box-hd"><h3>精品推薦</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span>? 1125人在學習</div></li></ul></div></div><div class="footer"><div class="w"><div class="copyright"><img src="images/logo.png" alt=""><p>學成在線致力于普及中國最好的教育它與中國一流大學和機構合作提供在線課程。<br />? 2017年XTCG Inc.保留所有權利。-滬ICP備15025210號</p><a href="#" class="app">下載APP</a></div><div class="links"><dl><dt>關于學成網</dt><dd><a href="#">關于</a></dd><dd><a href="#">管理團隊</a></dd><dd><a href="#">工作機會</a></dd><dd><a href="#">客戶服務</a></dd><dd><a href="#">幫助</a></dd></dl><dl><dt>關于學成網</dt><dd><a href="#">關于</a></dd><dd><a href="#">管理團隊</a></dd><dd><a href="#">工作機會</a></dd><dd><a href="#">客戶服務</a></dd><dd><a href="#">幫助</a></dd></dl><dl><dt>關于學成網</dt><dd><a href="#">關于</a></dd><dd><a href="#">管理團隊</a></dd><dd><a href="#">工作機會</a></dd><dd><a href="#">客戶服務</a></dd><dd><a href="#">幫助</a></dd></dl></div> </div></div></body> </html>

style.css文件

* {margin: 0;padding: 0; }.w {width: 1200px;margin: auto; } body {background-color: #f3f5f7;/* height: 3000px; */ } li {list-style: none; } a {text-decoration: none; } .clearfix:before,.clearfix:after {content: "";display: table; } .clearfix:after {clear: both; } .clearfix {*zoom: 1; }/* header部分 */ .header {height: 42px;/* background-color: pink; *//* 注意此處的層疊性 */margin: 30px auto;} .logo {float: left;width: 198px;height: 42px;/* background-color: purple; */} .nav {float: left;margin-left: 60px; } .nav ul li {float: left;margin: 0 15px; } .nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505; } .nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff; } .search {float: left;width: 412px;height: 42px;margin-left: 50px;/* background-color: skyblue; */ } .search input {/* 表單元素是行內塊元素，與后面同樣是行內塊元素的button之間會默認有個小間隔 *//* 使得 *//* 為了消除行內塊元素的影響，給元素加浮動 */float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: none;color: #bfbfbf;font-size: 14px;padding-left: 15px; } .search button {float: left;width: 50px;height: 42px;border: 0;background: url(images/fa-search.png); } .user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666666; } .user img {vertical-align: middle; }/* banner區域 */ .banner {height: 421px;background-color: #1c036c; } .banner .w {height: 421px;background: url(images/banner2.png) no-repeat top center } .subnav {float: left;width: 190px;height: 421px;background: rgb(0, 0, 0, 0.3); } .subnav ul li {height: 45px;line-height: 45px;padding: 0 20px; } .subnav ul li a {font-size: 14px;color: #fff;} .subnav ul li a span {float: right; } .subnav ul li a:hover {color: #00a4ff } .course {float: right;width: 230px;height: 300px;background-color:#fff;margin-top: 50px; } .course h2 {height: 48px;background-color: #9bceea;text-align: center;line-height: 48px;font-size: 18px;color: #fff; } .course .bd {padding: 0 20px; } .bd ul li {padding: 14px 0;border-bottom: 1px solid #ccc; } .bd ul li h4 {font-size: 16px;color: #4e4e4e; } .bd ul li p {font-size: 12px;color: #a5a5a5; } .bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700; }/* 精品推薦模塊 */ .goods {height: 60px;margin-top: 10px;background-color: #fff;box-shadow: 0 2px 3px 3px rgb(0, 0, 0, 0.1);line-height: 60px; } .goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00a4ff; } .goods ul {float: left;margin-left: 30px; } .goods ul li {float: left; } .goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc; } .goods .mod {float: right;margin-right: 30px;font-size: 14px;color: #00a4ff; }/* 核心內容模塊 */ .box {margin-top: 30px; } .box-hd {height: 45px; } .box-hd h3 {float: left;font-size: 20px;color: #494949; } .box-hd a {float: right;font-size: 12px;color: #a5a5a5;margin-top: 10px;margin-right: 30px; } .box-bd ul {width: 1225px; } .box-bd ul li {float: left;width: 228px;height: 270px;background-color: #fff;margin-right: 15px;margin-bottom: 15px; } .box-bd ul li img {width: 100%; } .box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400; } .box-bd ul .info {margin: 0 20px 0 25px;font-size: 12px;color: #999999;} .box-bd ul .info span {color: #ff7c2d; }/* footer */ .footer {height: 415px;background-color: #fff; } .footer .w {/* margin-top: 35px; */padding-top: 35px;/* background-color: blue; */ } .copyright {float: left; } .copyright p {font-size: 12px;color: #666666;margin: 20px 0 15px 0; } .copyright .app {display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;text-align: center;line-height: 33px; color: #00a4ff;font-size: 16px; } .links {float: right; } .links dl {float: left;margin-left: 100px; } .links dl dt {font-size: 16px;color: #333333;margin-bottom: 5px; } .links dl dd a {font-size: 12px;color: #333333;}

總結

以上是生活随笔為你收集整理的【HTML CSS】笔记4日 [ 学成在线素材 ]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：游戏建模中3DMax的那些神技巧
下一篇： STM32+enc28j60+uip