学习web前端历程（十四）

金立官网页面（部分）、css3动画（圆角、阴影）

一、金立官网导航条、转播图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>金立手机官网—金立手机及配件官方正品专卖网站_金立全面全面屏s11新品首发</title><link rel="stylesheet" href="css/reset.css"/><link rel="stylesheet" href="css/jinliStyle.css"/>
</head>
<body>
<!--导航栏开始-->
<div class="nav"><div class="wrap"><div class="logo"><img src="jinli-images/logo.png" width="200px" height="51px"></div><div class="nav_right"><div class="up"><ul><li><a href="">amigo账号登录</a><span>|</span></li><li><a href="">原账号登录</a><span>|</span></li><li><a href="">注册</a></li><li><a href="">购物车(0)</a></li></ul></div><div class="down"><ul><li><a href="">首页</a></li><li class="phone"><a href="">手机</a><div class="phone_hidden"></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" title="请输入"/><button>搜</button></li></ul></div></div></div>
</div>
<!--导航栏结束-->
<!--轮播图开始-->
<div class="lunbotu"></div>
<!--轮播图结束-->
<!--明星产品开始-->
<div class="start">
<div class="wrap"><h2>明星产品</h2><div class="img-box"><img src="jinli-images/28_1514454113062.jpg "/><img src="jinli-images/19_1516348649876.jpg"/><img src="jinli-images/28_1514454181297.jpg"/></div>
</div>
</div>
<!--明星产品结束--><!--热卖产品开始-->
<div class="hot"><div class="wrap"><h2>热卖推荐</h2><div class="hot_left"><img src="jinli-images/05_1520212662703.jpg"></div><div class="hot_right"><div class="one"><img src="jinli-images/28_1514451554121.png"><p class="hr-title">金立F6</p><p class="hr-detail">5.7英寸高清全面屏，四曲面机身</p><p class="hr-price"><span class="hr-money">¥</span>1399<span style="font-size: 18px;"></span></p></div><div class="two"><img src="jinli-images/28_1514451528464.png"><p class="hr-title">S10C</p><p class="hr-detail">1600万柔光自拍</p><p class="hr-price"><span class="hr-money">¥</span>1399<span style="font-size: 18px;"></span></p></div><div class="three"><img src="jinli-images/28_1514451623552.png"><p class="hr-title">大金钢2</p><p class="hr-detail">6.0英寸高清全面屏</p><p class="hr-price"><span class="hr-money">¥</span>1799<span style="font-size: 18px;"></span></p></div><div><img src="jinli-images/28_1514451679603.png"><p class="hr-title">金钢3</p><p class="hr-detail">5.5英寸高清全面屏、4000mAh大电量</p><p class="hr-price"><span class="hr-money">¥</span>1199<span style="font-size: 18px;"></span></p></div><div><img src="jinli-images/28_1514451724867.png"><p class="hr-title">金立M6S Plus</p><p class="hr-detail">6020mAh超级续航、骁龙八核处理器</p><p class="hr-price"><span class="hr-money">¥</span>3299<span style="font-size: 18px;">起</span></p></div><div><img src="jinli-images/28_1514451757927.png"><p class="hr-title">金立S9</p><p class="hr-detail">双摄柔光自拍、5.5英寸1080P高清屏</p><p class="hr-price"><span class="hr-money">¥</span>1699<span style="font-size: 18px;"></span></p></div></div></div>
</div>
<!--热卖产品结束-->
</body>
</html>jinliStyle.css.nav{
width: 100%;height: 103px;border-bottom: 1px solid #d5d5d5;position:fixed;left:0px;top:0px;background-color: white;
}
.wrap{width: 1196px;margin: 0 auto;
}
.logo{
width: 205px;
}
.logo,.nav_right {float: left;
}
.logo>img{margin-top: 25px;
}
.nav_right{width: 991px;height: 103px;
}
.up{width: 100%;height: 40px;line-height: 40px;
}
.nav_right ul{float: right;
}
.nav_right ul li{float: left;/*margin-top: 10px;*/
}
.nav_right ul a{margin: 0 5px;color: #9f9f9f;
}
.nav_right ul li:first-child a{color: #ef4222;
}
.nav_right ul li a:hover{color: #ef4222;
}
.down{width: 100%;height: 63px;line-height: 63px;
}
.down>ul a{margin-left: 52px;font-size: 16px;color: #000;font-weight: bolder;
}
.search{width:170px;height:30px;border: 1px solid #d5d5d5;/*box-sizing: border-box;*/padding-left: 5px;margin-top: 16.5px;margin-left: 120px;
}
.search input{width: 134px;height: 22px;float: left;margin-right:1px;margin-top: 1px;
}
.search button{width: 25px;height: 28px;float:left;background-color: #ffffff;border: none;
}
.phone_hidden{width: 100%;height: 260px;background-color: #cc0000;position: absolute;left: 0;top: 104px;display: none;
}
.down .phone:hover .phone_hidden{
display: block;
}
.lunbotu{width: 100%;height: 640px;background-image: url("../jinli-images/04_1515047442501.jpg");margin-top: 104px;background-position: -280px;-webkit-animation: lunbotu 5s infinite alternate;  /*轮播动画(后面动画会讲)*/
}
@-webkit-keyframes lunbotu{   /*轮播*/
0%{background-image: url("../jinli-images/04_1515047442501.jpg");
}100%{background-image: url("../jinli-images/02_1517536570441.jpg");}
}
.start{width: 100%;height: 451px;
}
.start h2{padding: 40px 0;font-size: 30px;letter-spacing: 1px;color: #000;
}
.img-box img{float: left;
}
.img-box img:nth-child(2)
{margin-left: 13px;margin-right: 13px;
}
.hot{width: 100%;height: 912.5px;background-color: #f4f4f4;
}
.hot h2{padding: 40px 0 0;font-size: 30px;letter-spacing: 1px;color: #000;text-align: center;
}
.hot more{text-align: right;font-size:15px;padding-bottom: 15px;display: inline-block;float: left;
}
.hot_left{width: 310.95px;height: 785px;background-color: white;float: left;
}
.hot_right>div{width:280px;height:390px;float: left;background-color: white;margin-right: 7px;margin-top: 5px;
}
.hot_left{margin-right: 6px;
}
.hot_right>.three{margin-top: 5px;
}
.hot_right>.two{margin-top: 5px;
}
.hot_right>.one{margin-top: 5px;
}
.hot_right img{width: 120px;height: 240px;
}
.hr-title{color: #0f0e0e;font-size: 16px;
}
.hr-detail{color: #9E9E9E;font-size: 14px;padding-top: 3px;
}
.hr-money{font-size: 18px;padding-right: 2px;
}
.hr-price{color: #fe6a00;font-size: 24px;padding-top: 12px;
}reset.cssa{text-decoration: none;
}
ol,dl,li,ul{list-style: none;}
ol,dl,li,ul,div{margin: 0px;padding: 0px;text-align: center;color: #333;font-size: 14px;font-family: "宋体";}

页面显示图：
金立导航

轮播图：

明星产品：

二、CSS3动画（圆角）

css3是css技术的升级版

圆角（border-radius）可以创建圆角
设置单位百分比、px相素、em

1、border-radius：value         （四个角）
2、border-radius：value  value  （左上右下、右上左下）
3、border-radius：value  value  value  value（左上、右上、右下、左下）

注意：
画图时的border-radius一定要加上边框的值（才更圆）

圆角代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>圆角</title><style>/* div{  椭圆形(一个值)width: 200px;height: 100px;background-color: #cc0000;border-radius: 30px;margin: 0 auto;}*//* div{  圆形（一个值）width: 100px;height: 100px;border: 3px solid red;margin: 0 auto;border-radius: 53px;}*//*div{   （两个值）width: 200px;height: 100px;border: 3px solid red;margin: 0 auto;border-radius: 50px 30px;}*//*div{    四个值width: 200px;height: 100px;border: 3px solid red;margin: 0 auto;border-radius: 10px 20px 30px 40px;}*/.zheng{width: 200px;height: 100px;background-color: deeppink;margin: 0px auto;border-radius: 30px;position: relative;}.circle{width: 50px;height: 50px;border: 1px solid #ef4222;background-color: pink;border-radius: 26px;position: absolute;left: 50px;top: 20px;}</style>
</head>
<body>
<!--<div></div>-->
<div class="zheng"><div class="circle"></div>
</div>
</body>
</html>

三、阴影

1、盒阴影（box-shadow）
语法：

box-shadow:h-shadow  v-shadow  blur  spread  color  inset

值	描述
h-shadow	必需。水平阴影的位置（允许负值）
v-shadow	必需。垂直阴影的位置（允许负值）
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。颜色
inset	可选。将外部阴影（outset）改为内部阴影

2、文字阴影（text-shadow）

text-shadow:h-shadow  v-shadow  blur  color

值	描述
h-shadow	必需。水平阴影的位置（允许负值）
v-shadow	必需。垂直阴影的位置（允许负值）
blur	可选。模糊距离
color	可选。颜色

阴影的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>阴影</title><style>/*div{width: 150px;height: 80px;border: 1px solid black;margin: 10px auto;box-shadow: 0px 0px 5px 5px red ;}*/
div{   /*文字*/font-size: 50px;font-weight: bold;color:black;text-shadow: 5px -5px 5px powderblue  ;
}</style>
</head>
<body>
<!--<div></div>-->
<div>leikuan</div>
</body>
</html>

学习web前端历程（十四）相关推荐

学习web前端历程（十）
文本属性.列表属性.CSS3新增选择器.CSS属性选择器.伪类选择器(链接伪类选择器) 一.文本属性 1.text-align 内容方式对齐,针对于元素的内容属性值描述 left 左边 cente ...
【web前端(二十四)】CSS详述
CSS的发展历程从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制.最初的HTML只包含很少的显示属性. 随着HTML的成长,为了满足页面设计者的 ...
零基础学习WEB前端开发(十六)：font-family字体系列
一.基本语法 font-family 二.演示 <!DOCTYPE html> <html lang="en"> <head><meta ...
经验分享：如何系统学习 Web 前端技术？
本文作者:曾亮.晟暄科技 CEO ,HTML5 & Node.js 技术讲师. Javascript前后端全栈开发人员 DDD/CQRS 设计师对 Node.js 和 HTML5 有多年开发 ...
学习Web前端需要避免哪些错误
很多初学web前端的同学,在学习web前端的时候都会遇到一些错误,虽然有些错误与某一个具体的行为相关,但有些错误却是所有Web开发人员都需要面对的挑战.下面小编就整理一下学习Web前端需要避免哪些错误 ...
哪些人适合学习web前端?
web前端在互联网行业一直都备受关注,部分人担心web前端没有发展前景,还担心自己学不了web前端技术,那么具体哪些人适合学习web前端呢?来看看下面的详细介绍就知道了. 哪些人适合学习web前端? ...
学习Web前端的七大误区，你遇到过几个？
随着移动互联网的兴起,Web前端开发异常火爆,互联网公司对于Web前端开发的需求越来越旺盛,越来越多的人加入前端开发队伍中.但Web前端在大学中没有课程体系,而且知识也在不断更新着,很多人在学习Web ...
如何科学高效的学习Web前端开发？
近几年,web前端开发工程师越来越火了,薪资待遇也快接近后端开发工程师了.很多准备入行前端开发工程师的小伙伴们,不知道准备得怎么样了呢? 有的朋友在想方设法的学习,争取在年后的金九银十能靠实力找到一份 ...
关于零基础学习web前端开发，有些过来经验分享
大家好,今天给大家分享一下我从事WEB前行业一些自己的学习经验分享也希望通过这篇文章,可以帮助到更多正在学习但是又不知道从哪里学习学习的前端的小伙伴,还有一些想要去转行的,但是不知道不知道如何去学习 ...

学习web前端历程（十四）

金立官网页面（部分）、css3动画（圆角、阴影）

学习web前端历程（十四）相关推荐

最新文章

热门文章