當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

学习笔记10----学成在线案例

發布時間：2024/3/13 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了学习笔记10----学成在线案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS 屬性書寫順序(重點)

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

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

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

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

header區域的制作

logo區域的制作

先寫logo盒子的寬度然后再把圖片放進盒子即可

.logo {

background-color: purple;

width: 198px;

height: 42px;

}

</div>

導航欄nav區域的制作

先把div.nav盒子做出來<div class="nav">

然后把文字打上去

<ul>

</ul>

把邊框浮動設置為向左，因此也要改變前面頭部盒子的邊框浮動改為向左

float: left;

然后調試文字屬性

.nav ul li a {

display: block;

height: 42px;

padding: 0 10px;

line-height: 42px;

font-size: 18px;

color: #050505;

}

調配好最后在做一個a：hover

.nav ul li a:hover {

border-bottom: 2px solid #004aff;

color: #004aff;

}

效果如下：

搜索search模塊imput的制作

首先做一個search的盒子 <div class="nav"></div>

在盒子里寫入input并在value中寫出“輸入關鍵詞” <input type="text" value="輸入關鍵詞">

再去測量search大盒子的屬性并且寫出浮動

.search {

float: left;

width: 412px;

height: 42px;

background-color: skyblue;

margin-left: 50px;

}

再去測量input盒子的屬性得到

.search input {

width: 345px;

height: 40px;

border: 1px solid #004aff;

border-right: 0;

color: #bfbfbf;

font-size: 14px;

padding-left: 15px;

}

此步驟后如圖所示：

搜索search模塊button的制作

首先量出button盒子大小屬性，然后加上浮動（注意這里加浮動必須將button和input浮動都加上）

.search button {

float: left;

width: 50px;

height: 42px;

border: 0;

background: url(image/btn.png);

}

解釋一下為什么要在兩處加上浮動?

因為如果不加入浮動的話就會導致button盒子在input盒子下方，因為他們都是行內塊元素相互之間是有間隔的而加入了浮動的元素之間會緊密貼合在一起沒有間隔

沒加浮動：

浮動后：

此步驟做完如下圖：

用戶user模塊的制作

寫一個div.user的盒子然后量出它的大小在其中插入user.jpg圖片然后寫上qq-pys

qq-pys

</div>

寫好后寫盒子屬性然后調一下浮動和右邊距

.user {

float: right;

font-size: 14px;

line-height: 42px;

margin-right: 30px;

color: #666;

}

都干完了就改一下整體背景色寫一個.body

.body {

background-color: #f4f6f3;

}

做好效果如下：

banner模塊的制作

banner模塊是一個大盒子區域包裹著一個小區域首先我們要先寫一個div.banner的大盒子

然后再寫一個div.w的小盒子

</div>

寫好后給與大小盒子大小（準確的說只給高度）然后再css里將兩個盒子并列起來插入背景圖片banner.png即可

.banner {

height: 421px;

background-color: #1c036c;

}

.banner .w {

height: 421px;

background-color: pink;

background: url(image/banner.png);

即可呈現下圖效果：

subnav模塊的制作

此模塊是導航欄模塊，可以用ul來做。我們首先創建一個div.subnav的盒子然后寫出放入所需的其他盒子并賦予內容

<ul>

</ul>

</div>

賦予內容后測量盒子的大小和側邊距以及盒內內容的屬性

.subnav ul li {

height: 45px;

line-height: 45px;

margin: 0 20px;

}

.subnav ul li a {

font-size: 14px;

color: #fff;

}

做完后會發現內容有啦但是缺一個右箭頭，此時就可以在a標簽中繼續寫一個span標簽，標簽內容寫“>”符號也可以寫&gt

然后再給span標簽加一個右浮動

.subnav ul li span {

float: right;

}

最后在做一個經過此標簽會變色的a：hover{}

.subnav ul li a:hover {

color: #004aff;

}

最終即可達到下圖效果：

course模塊的制作

布局思路：先作出整體布局設計一個course大盒子然后在大盒子里放入一個h2標題和一個bd盒子，然后再bd盒子里存放ul li標簽。

首先做好盒子后應該做以下步驟：

裝填盒子的內容

將盒子屬性寫出來

根據網頁做出布局的微調

<h2>我的課程表</h2>

<ul>

<li>

<h4>繼續學習程序語言設計</h4>

</li>

<li>

<h4>繼續學習程序語言設計</h4>

</li>

<li>

<h4>繼續學習程序語言設計</h4>

</li>

</ul>

</div>

.course {

float: right;

width: 230px;

height: 300px;

margin-top: 50px;

background-color: #ffffff;

}

.course h2 {

height: 48px;

line-height: 48px;

font-size: 18px;

background-color: #9bceea;

text-align: center;

color: #fff;

}

.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;

line-height: 38px;

border: 1px solid #00a4ff;

text-align: center;

color: #00a4ff;

font-size: 16px;

font-weight: 700;

margin-top: 5px;

background-color: #ffffff;

}

完成以上步驟后即可得到下圖效果：

精品推薦模塊的制作

精品模塊的制作布局是由一個長盒子goods 和三個小盒子組成的

body部分

<ul>

<li><span>|</span> <a href="#">JQyery</a></li>

<li><span>|</span> <a href="#">Spark</a></li>

<li><span>|</span> <a href="#">MySQL</a></li>

<li><span>|</span> <a href="#">javaWeb</a></li>

<li><span>|</span> <a href="#">MySQL</a></li>

<li><span>|</span> <a href="#">javaWeb</ahref=>

</li>

</ul>

</div>

.goods {

margin-top: 10px;

height: 60px;

line-height: 60px;

background-color: #ffffff;

box-shadow: 0px 4px 3px 3px rgba(0, 0, 0, 0.3);

}

css部分：

.goods h3 {

float: left;

width: 133px;

height: 60px;

}

.goods h3 a {

margin-left: 36px;

text-align: center;

font-size: 16px;

color: #00a4ff;

}

.goods ul li {

float: left;

width: 140px;

height: 60px;

margin: 0 anto;

}

.goods ul li span {

color: #bfbfbf;

line-height: 60px;

}

.goods ul li a {

color: #454545;

font-size: 16px;

padding: 0 30px;

}

.goods ul li a:hover {

color: #42b2ff;

}

.goods h5 {

float: right;

font-size: 14px;

margin-right: 10px;

text-align: center;

color: #42b2ff;

}

box-hd模塊的制作

首先建立一個上下布局分為box大盒子和它里面裝的bd，hd兩個小盒子

hd盒子要走做的就是把查看全部和精品推薦給放上去

我們可以直接把大盒子和之間的w盒子并列然后打到居中的目的

</div>

<!-- box-hd模塊end -- >

與此同時box大盒子與上面頭部盒子也有點間距我們直接量出來上邊距即可調整盒子到對應的位置

.box {

margin-top: 30px;

}

然后開始時寫精品推薦左浮動并設置它的屬性樣式二查看全部只需右浮動后重復步驟即可

.box-hd h3 {

float: left;

font-size: 20px;

color: #494949;

}

.box-hd {

height: 45px;

}

.box-hd a {

float: right;

font-size: 12px;

color: #a5a5a5;

margin-top: 10px;

margin-right: 30px;

}

完成上述步驟后可以達到下圖效果：

box-bd模塊的制作

bd盒子制作同理我們需要寫一個bd盒子然后在bd盒子里寫上十個li盒子

<ul>

<h4>Think PHP 5.0 博客系統實戰項目演練 </h4>

<p>高級</p> ? 1125人在學習

</div>

</li>

<h4>Android 網絡圖片加載框架詳解 </h4>

<p>高級</p> ? 1125人在學習

</div>

</li>

<h4>Angular 2 最新框架+主流技術+項目實戰 </h4>

<p>高級</p> ? 1125人在學習

</div>

</li>

<h4>Android Hybrid APP開發實戰 H5+原生！ </h4>

<p>高級</p> ? 1125人在學習

</div>

</li>

<h4>TAndroid Hybrid APP開發實戰 H5+原生！</h4>

<p>高級</p> ? 1125人在學習

</div>

<h4>Think PHP 5.0 博客系統實戰項目演練 </h4>

<p>高級</p> ? 1125人在學習

</div>

</li>

<h4>Android 網絡圖片加載框架詳解 </h4>

<p>高級</p> ? 1125人在學習

</div>

</li>

<h4>Angular 2 最新框架+主流技術+項目實戰 </h4>

<p>高級</p> ? 1125人在學習

</div>

</li>

<h4>Android Hybrid APP開發實戰 H5+原生！ </h4>

<p>高級</p> ? 1125人在學習

</div>

</li>

<h4>TAndroid Hybrid APP開發實戰 H5+原生！</h4>

<p>高級</p> ? 1125人在學習

</div>

</ul>

</div>

style.css模塊

.box-bd ul li {

float: left;

width: 228px;

height: 270px;

background-color: #ffffff;

margin-right: 15px;

margin-bottom: 15px;

}

.box-bd ul {

width: 1225px;

}

.box-bd ul li img {

width: 100%;

}

.box-bd ul li h4 {

margin: 25px 20px 20px 25px;

font-size: 14px;

color: #050505;

font-weight: 400;

}

.box-bd ul li .info {

font-size: 12px;

color: #999999;

}

.box-bd ul li .info p {

float: left;

margin-left: 25px;

font-size: 12px;

color: #ff7c2d;

}

完成上述步驟后即可出現下圖效果：

footer模塊的制作

footer模塊的制作涉及到盒子的清除浮動，如果不清除浮動就會導致新創的盒子上移與上面的box進行重疊如下圖所示：

清除浮動的方法（很多種詳情看學習筆記9）：

加上清除浮動代碼

.clearfix:before,

.clearfix:after {

content: "";

display: table;

}

因為是要清除與box盒子中li盒子的浮動所以也要在ul盒子中加上 <ul class="clearfix">

即可達到下圖效果：

copyright模塊的制作

此模塊由三個部分構成，分別是p，a，img代碼如下：

<p>學成在線致力于普及中國最好的教育它與中國一流大學和機構合作提供在線課程。</p>

<a href="#" class="app ">下載APP</a>

</div>

style.css部分

.footer {

height: 415px;

background-color: #fff;

}

.footer .w {

padding-top: 35px;

}

.copyright {

float: left;

}

.copyright p {

font-size: 12px;

color: #666;

margin: 20px 0 15px 0;

}

.copyright .app {

display: block;

border: 1px solid #00a4ff;

width: 118px;

height: 33px;

line-height: 33px;

text-align: center;

color: #00a4ff;

font-size: 16px;

}

然后再調配盒子的屬性配置即可得到下圖：

links模塊的制作

links模塊這里使用的方法是用表單來做也就是dl-dt-dd

<dl>

<dt>關于學成網</dt>

</dl>

<dl>

<dd><a href="#">如何拿到畢業證</a></dd>

<dd><a href="#">學分是什么</a></dd>

<dd><a href="#">考試未通過怎么辦</a></dd>

</dl>

<dl>

</dl>

</div>

style.css部分：

.links {

float: right;

margin-right: 32px;

}

.links {

float: right;

}

.links dl {

float: left;

margin-left: 100px;

}

.links dl dt {

color: #333333;

font-size: 16px;

margin-bottom: 5px;

}

.links dl dd a {

color: #333;

font-size: 12px;

}

最后可得到下圖：

總結

以上是生活随笔為你收集整理的学习笔记10----学成在线案例的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Android App专项测试-压力测试
下一篇：韩国VPS选择指南