WEB前端第十四課——應用及測試
知識點摘記html
1.display屬性，規定元素應該生成的框的類型web
none，此元素不會被顯示瀏覽器
block，此元素將顯示爲塊級元素，元素先後會帶有換行符ssh
inline，默認值，此元素會被顯示爲內聯元素，元素先後沒有換行符字體
flex，指定元素爲彈性盒子flex
inline-block，此元素將會顯示爲行內塊級元素動畫
list-item，此元素會做爲列表顯示網站
run-in，此元素會根據上下文做爲塊級元素或內聯元素顯示url
table，此元素會做爲塊級表格元素顯示（相似<table>），元素先後有換行符spa
inline-table，此元素會做爲內聯表格元素顯示（相似<table>），元素先後沒有換行符
table-row（表格行）、table-column（單元格列）、table-cell（表格單元格）……
2.<link>設置網頁title圖標，<link rel="icon" href="圖標url">
3.<img>引用圖片並設置超連接，<a href="#"><img src="圖片url" alt=""></a>
4.<input>加載時文本框內提示文字設置，<input type="text" placeholder="請輸入信息" />，默認值設置經過 value屬性
5.text-align文本對齊方式，
text-align屬性值：left（文本左對齊，默認值）、right（文本右對齊）、center（水平居中）、justify（兩端對齊）
6.text-align-last文本最後一行對齊方式
text-align-last屬性值：auto（默認值，最後一行被調整並左對齊）、left（最後一行左對齊）、right（最後一行右對齊）、center（最後一行水平居中）、justify（最後一行兩端對齊）
7.position屬性值：
static，沒有定位，元素出如今正常的內容流中，忽略top、right、bottom、left或 z-index 的聲明
relative，相對定位，相對於其在父元素中的正常位置進行定位，經過top、right、bottom、left屬性進行偏移量設置
absolute，絕對定位，相對於static之外的第一個父元素進行定位，經過top、right、bottom、left屬性進行偏移量設置
fixed，固定定位，相對於瀏覽器窗口進行定位，經過top、right、bottom、left屬性進行偏移量設置
8.圖片設置
background-image:url(" ")，引用背景圖片
background-repeat:no-repeat，背景圖片僅顯示一次，不重複（平鋪）
background-position:center，背景圖片在元素中居中顯示
9.animation
keyframes
10.cursor，定義光標樣式，語法格式 <span style="cursor:屬性值">文本或其它頁面元素</span>
經常使用屬性值：
cursor:point，手形（IE5以前版本使用 cursor:hand）
cursor:default，默認值
cursor:crosshair，十字準心
cursor:wait，等待/沙漏
cursor:progress，處理中
cursor:help，幫助
cursor:url(" ")，用戶自定義（可用動畫），url 地址文件的格式必須爲「 .cur 或 .ani」
cursor:*-resize，**改變大小
11.模擬Gionee官網建立網頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>金立手機官網—金立手機及配件官方正品專賣網站_金立全面全面屏s11新品首發</title>
<link rel="icon" href="images/GioneePicture/favicon.jpg"> <!--設置頁籤圖標-->
<style>
body{
margin: 0;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>導航欄樣式<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.nav{
width: 100%;
height: 103px;
background-color: white;
border-bottom: 1px solid #d5d5d5;
box-shadow: 0 1px 1px #ccc;
position: fixed;
top: 0px;
z-index: 9;
}
.logo{
width: 200px;
height: 51px;
margin: 26px 0px 26px 193.5px;
float: left;
}
.menu{
width: 996px;
height: 103px;
float: left;
}
.menu_top{
width: 996px;
height: 40px;
}
.menu_top ul{
float: right;
}
.menu_top ul li{
float: left;
margin-left: 20px;
font-size: 14px;
}
.menu_top a{
text-decoration: none;
color: #9f9f9f;
}
.menu_top li:first-child a{
color: #ef4222;
}
.menu a:hover{
color: #ef4222;
}
.menu_bottom{
width: 996px;
height: 63px;
}
.menu_bottom ul{
width: 966px;
height: 63px;
line-height: 63px;
margin: -10px 0px 0px 30px;
padding: 0px;
float: left;
}
.menu_bottom ul li{
float: left;
margin-left: 65px;
font-size: 17px;
}
.menu_bottom a{
text-decoration: none;
color: #000;
}
.menu_bottom li:last-child{
margin-left: 150px;
margin-top: 21px;
}
.menu_bottom .search {
width: 177px;
height: 22px;
margin: auto;
border: 1px solid grey;
}
.search input{
width: 118px;
height: 21px;
float: left;
border: 0px;
padding: 0px 0px 0px 5px;
}
.search button{
width: 53px;
height: 21px;
border: 0px;
padding: 0;
background-color: white;
float: left;
}
/*>>>>>>>>>>>>>>>>>>>>>>浮動菜單樣式<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.phone_hidden{
width: 100%;
height: 256px;
background-color: white;
position: absolute;
left: 0px;
top: 105px;
display: none;
}
.phone_hidden ul{
width: 150px;
height: 200px;
float: left;
list-style-type: none;
}
.phone_hidden ul:first-child{
margin-left: 200px;
}
.phone_hidden ul li{
width: 150px;
height: 23px;
margin: 10px 0px 0px;
}
.phone_hidden .group{
margin-top: 20px;
margin-bottom: 15px;
font-weight: bold;
}
.phone_hidden ul li a{
font-size: 16px;
color: #787772; /*字體顏色只能針對<a>標籤進行設置？？*/
}
.phone_hidden ul li:last-child{
display: none; /*最後一行li會錯位，增長空白li，？？？*/
}
.menu_bottom .phone:hover .phone_hidden{
display: block;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>輪播圖樣式<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.rot{
width: 100%;
height: 640px;
margin-top: 104px;
background-image: url("images/GioneePicture/20200110164428.jpg");
background-repeat: no-repeat;
background-position: center;
-webkit-animation: rot 18s infinite alternate;
}
@-webkit-keyframes rot {
0%{
background-image: url("images/GioneePicture/04_1515047442501.jpg");
}
25%{
background-image: url("images/GioneePicture/02_1517536570441.jpg");
}
50%{
background-image: url("images/GioneePicture/20191106122657.jpg");
}
75%{
background-image: url("images/GioneePicture/20200110164428.jpg");
}
100%{
background-image: url("images/GioneePicture/04_1515047442501.jpg");
}
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>明星產品樣式<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.star{
width: 100%;
height: 425px;
}
.star h2{
width: 1196px;
height: 125px;
font-size: 30px;
font-weight: normal;
letter-spacing: 1px;
margin: 0px 193.5px;
color: #000;
text-align: center;
line-height: 125px;
}
.star_product{
width: 1196px;
height: 300px;
margin: 0px 193.5px;
text-align-last: justify;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>熱賣推薦樣式<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.hot{
width: 100%;
height: 912px;
background-color: #e5e5e5;
}
.hot h2{
width: 1196px;
height: 45px;
font-size: 30px;
font-weight: normal;
letter-spacing: 1px;
padding:40px 0px 0px;
margin: 0px 193.5px;
color: #000;
text-align: center;
vertical-align: bottom;
}
.more_product{
width: 1196px;
margin: 0px 193.5px;
font-size: 15px;
text-align: right;
text-decoration: none;
padding-bottom: 15px;
}
.more_product a{
text-decoration: none;
color: #000000;
}
.more_product:hover a{
color: #ef4222;
}
.hot_product{
width: 1196px;
height: 785px;
margin: 0px 193.5px;
}
.hot_left{
width: 305px;
height: 785px;
float: left;
}
.hot_left:hover{
transform: translate(0px,-3px);
box-shadow: 6px 6px 9px 5px #cccccc; /*陰影未堆疊在上層？*/
}
.hot_right{
width: 891px;
height: 785px;
float: left;
}
.hot_right>div{
width: 290px;
height: 390px;
background-color: #ffffff;
margin-left: 7px;
float: left;
position: relative;
}
.hot_right>div:nth-child(1),.hot_right>div:nth-child(2),.hot_right>div:nth-child(3){
margin-bottom: 5px;
}
.hot_right>div img{
width: 120px;
height: 240px;
float: left;
margin: 25px 85px 0px;
position: absolute;
}
.hot_right>div:hover .back{
right: 35px;
}
.hot_right>div:hover .face{
left: 35px;
}
.hot_right>div>div:last-child{
width: 290px;
height: 125px;
margin-top: 265px;
position: relative;
text-align: center;
}
.hot_right h3{
width: 290px;
color: #0f0e0e;
font-size: 16px;
margin-top: 280px; /* 相對父元素設置margin？？ */
position: relative;
}
.hot_right p{
width: 290px;
color: #9E9E9E;
font-size: 14px;
padding-top: 3px;
margin-top: 0px;
}
.hot_right span{
width: 290px;
color: #fe6a00;
font-size: 24px;
padding-top: 12px;
}
</style>
</head>
<body>
<!-- 網頁導航欄 -->
<div class="nav">
<div class="logo">
<a href="#"><img src="images/GioneePicture/gioneelogo.jpg" alt=""></a> <!--引入logo圖片-->
</div>
<div class="menu">
<div class="menu_top">
<ul type="none"> <!--規定列表項目符號的類型-->
<li><a href="#">amigo帳號登陸</a></li>
<li><a href="#">原帳號登陸</a></li>
<li><a href="#">註冊</a></li>
<li><a href="#">購物車()</a></li>
</ul>
</div>
<div class="menu_bottom">
<ul type="none">
<li><a href="#">首頁</a></li>
<li class="phone">
<a href="#">手機</a>
<div class="phone_hidden">
<ul>
<li class="group"><a href="#">最新></a></li>
<li><a href="#">金立S11S</a></li>
<li><a href="#">金立S11</a></li>
<li><a href="#">金立M7</a></li>
<li><a href="#">金立M7Plus</a></li>
<li></li> <!-- 調整最後一行li錯位問題，沒搞懂！-->
</ul>
<ul>
<li class="group"><a href="#">M系列></a></li>
<li><a href="#">金立M7</a></li>
<li><a href="#">金立M7Plus</a></li>
<li></li>
</ul>
<ul>
<li class="group"><a href="#">S系列></a></li>
<li><a href="#">金立S11S</a></li>
<li><a href="#">金立S11</a></li>
<li></li>
</ul>
<ul>
<li class="group"><a href="#">金剛系列></a></li>
<li><a href="#">金剛3</a></li>
<li><a href="#">金剛2</a></li>
<li></li>
</ul>
<ul>
<li class="group"><a href="#">天鑑系列></a></li>
<li><a href="#">天鑑W909</a></li>
<li></li>
</ul>
<ul>
<li class="group"><a href="#">F系列></a></li>
<li><a href="#">金立F6</a></li>
<li><a href="#">金立F109</a></li>
<li></li>
</ul>
</div>
</li>
<li><a href="#">配件</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">下載</a></li>
<li><a href="#">amigoOS</a></li>
<li class="search">
<input type="text" placeholder="請輸入搜索內容">
<button>Search</button>
</li>
</ul>
</div>
</div>
</div>
<div>
<!-- 網頁內容部分 -->
<!-- 輪播圖片 -->
<div class="rot">
<!-- <a href="#"><img src="images/GioneePicture/20200110164428.jpg" alt=""></a>-->
</div>
<!-- 明星產品 -->
<div class="star">
<h2>明星產品</h2>
<div class="star_product">
<a href="#"><img src="images/GioneePicture/28_1514454113062.jpg" alt=""></a>
<a href="#"><img src="images/GioneePicture/19_1516348649876.jpg" alt=""></a>
<a href="#"><img src="images/GioneePicture/28_1514454181297.jpg" alt=""></a>
</div>
</div>
<div class="hot">
<h2>熱賣推薦</h2>
<p class="more_product"><a href="#">…更多…</a></p>
<div class="hot_product">
<div class="hot_left">
<a href="#"><img src="images/GioneePicture/05_1520212662703.jpg" alt=""></a>
</div>
<div class="hot_right">
<div>
<div>
<a href="#"><img src="images/GioneePicture/20190916182659b.png" alt="" class="back"></a>
<a href="#"><img src="images/GioneePicture/20190916182852a.png" alt="" class="face"></a>
</div>
<div>
<h3>金立K3</h3>
<p>5000mAh大電池，微Q八開</p>
<span>¥999</span>
</div>
</div>
<div>
<div>
<a href="#"><img src="images/GioneePicture/28_1514451535446.png" alt="" class="back"></a>
<a href="#"><img src="images/GioneePicture/28_1514451528464.png" alt="" class="face"></a>
</div>
<div>
<h3>S10C</h3>
<p>1600萬柔光自拍</p>
<span>¥1399</span>
</div>
</div>
<div>
<div>
<a href="#"><img src="images/GioneePicture/28_1514451629703.png" alt="" class="back"></a>
<a href="#"><img src="images/GioneePicture/28_1514451623552.png" alt="" class="face"></a>
</div>
<div>
<h3>大金鋼2</h3>
<p>6.0英寸高清全面屏</p>
<span>¥1799</span>
</div>
</div>
<div>
<div>
<a href="#"><img src="images/GioneePicture/28_1514451683907.png" alt="" class="back"></a>
<a href="#"><img src="images/GioneePicture/28_1514451679603.png" alt="" class="face"></a>
</div>
<div>
<h3>金鋼3</h3>
<p>5.5英寸高清全面屏、4000mAh大電量</p>
<span>¥1199</span>
</div>
</div>
<div>
<div>
<a href="#"><img src="images/GioneePicture/28_1514451729786.png" alt="" class="back"></a>
<a href="#"><img src="images/GioneePicture/28_1514451724867.png" alt="" class="face"></a>
</div>
<div>
<h3>金立M6S Plus</h3>
<p>6020mAh超級續航、驍龍八核處理器</p>
<span>¥3299</span>
</div>
</div>
<div>
<div>
<a href="#"><img src="images/GioneePicture/28_1514451762832.png" alt="" class="back"></a>
<a href="#"><img src="images/GioneePicture/28_1514451757927.png" alt="" class="face"></a>
</div>
<div>
<h3>金立S9</h3>
<p>雙攝柔光自拍、5.5英寸1080P高清屏</p>
<span>¥1699</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
相關文章
- 1. WEB前端第十七課——CSS動畫
- 2. WEB前端第十二課——CSS盒子
- 3. WEB前端第十五課——陰影及漸變
- 4. WEB前端第十八課——媒體及meta viewport
- 5. WEB前端第十六課——轉換及過渡
- 6. 前端第十課--表單
- 7. web前端第五節課
- 8. 前端面試題(十四)
- 9. WEB前端第二十一課——移動端頁面
- 10. Web前端面試指導 四十四 什麼是響應式開發
- 更多相關文章...
- • Maven Web 應用 - Maven教程
- • Maven 構建 & 項目測試 - Maven教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • RxJava操作符（四）Combining
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. WEB前端第十七課——CSS動畫
- 2. WEB前端第十二課——CSS盒子
- 3. WEB前端第十五課——陰影及漸變
- 4. WEB前端第十八課——媒體及meta viewport
- 5. WEB前端第十六課——轉換及過渡
- 6. 前端第十課--表單
- 7. web前端第五節課
- 8. 前端面試題(十四)
- 9. WEB前端第二十一課——移動端頁面
- 10. Web前端面試指導 四十四 什麼是響應式開發