WEB前端第十四课——应用及测试
知识点摘记
1.display属性，规定元素应该生成的框的类型
none，此元素不会被显示
block，此元素将显示为块级元素，元素前后会带有换行符
inline，默认值，此元素会被显示为内联元素，元素前后没有换行符
flex，指定元素为弹性盒子
inline-block，此元素将会显示为行内块级元素
list-item，此元素会作为列表显示
run-in，此元素会根据上下文作为块级元素或内联元素显示
table，此元素会作为块级表格元素显示（类似<table>），元素前后有换行符
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>
