学习web前端历程（十四）

最新推荐文章于 2024-09-01 00:22:26 发布
最新推荐文章于 2024-09-01 00:22:26 发布
阅读量136 收藏 2
点赞数 1
文章标签： 金立官网页面（部分） CSS3动画（圆角、阴影）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l123zmj/article/details/98874952
版权

金立官网页面（部分）、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.css

a{
    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>
l123zmj
关注
web前端进阶架构师之路
m0_67537062的博客
03-26 4935
web前端架构师必学知识点，包含Vue、React、Electron、服务端渲染、微前端、前端性能优化、前端工程化、前端面试等方面的知识。
web前端学习路线.xmind
12-16
对web开发进行总结 以上资源属于个人见解及查找资料所总结。 HTML5 + CSS3 • CSS3基本语法规范 •CSS常见布局技巧大全 • 网页开发规范以及流程 • CSS3基本变换特效 • 了解常用...
web前端发展历程
热门推荐
官方推荐
05-30 3万+
前言 目前在IT公司中前端的岗位越来越成为不可或缺的，前端的地位也愈见明显，很多学校已经体系的传授前端课程，众多培训机构也将前端知识作为了主流课程，也有越来越多的同学加入到前端学习的行列中，作为前端工程师或者前端的学习者我们有必要去了解前端的发展史。...
Web前端学习历程
Partrickzh的博客
03-17 464
Web前端入门阶段学习 1.PS的入门学习：掌握的PS的基础操作，例如简单的切图，分割，储存等 2.Axure的入门学习：简单了解如何用Axure制作思维导图，网页图统计，结构导图制作以及网页简图与高保真图还原等 3.html：系统的学习了DIV标签制作结构图，掌握HTML中一些,,等标签的使用方法 在学习的工程中初步了解的前端开发的基本流程（需求分析-设计-编码-测试-上线-维护）等一些基础知识...
web前端学习历程
Keer的博客
06-01 1840
    本科毕业设计跟一个大牛老师做了前端的课题：数字印刷机控制软件-主控系统设计。作为一个电子的学生第一次接触前端的知识，也从此觉得这是一个适合我学习和我喜欢学的方向。-----2016届本科毕业生    因为研一第一学期一直有课，基本除了做导师的课题就没有时间来进行自学，等下学期三四月份的时候突然发现自己没有能够找到好工作的本领，想找一个可以支持自己就业的本领，web前端技术就成为了我的首选项...
学习web前端的历程（一）
l123zmj的博客
07-26 424
初学web前端第一天（7月22日) 我是跟着视频来学习的web前端，刚开始就先下载了开发工具，有记事本、sublime text和notepad++等开发工具。也了解了集成开发环境的软件，有webstrom、HBuilder，我使用的是webstrom 2019.1.3的版本的，还有用来浏览自己写的网页的浏览器有谷chrome、火狐Firefox。 ...
一文带你了解Web前端发展历程
忘川
07-09 2858
摘要：自互联网行业发展以来，web前端不断发展变化着。在前人的基础上，后人有幸能够站在前人的肩膀上行走。前端的发展变化不仅是继承式的迭代，同时也是不断的变革和创造。 一、前端到底是个什么？ 简单点说，浏览器呈现出来的页面，给用户看的、操作的就是前端（客户端）；你看不到的，类似一些游戏数据、应用数据之类的就是后端（服务端）。 那么再简单点就可以说，前端指的就是浏览器端，后端指的就是为浏览器提供服务和数据的服务器端。 这是比较准确的描述，如果往大了讲，你所有看到的一切，网页、移动端网页、小程序、甚至某些
PythonWeb前端
weixin_74889578的博客
06-19 868
学校的一门选修课，PythonWeb开发从入门到实践，用到的技术有Python,Flask,MySQL,前端三件套等，但因为是选修课，所以都只涉及到了一点点
Web3前端开发：重塑互联网的未来
孔乙己大叔的博客
09-01 1252
Web3，作为区块链技术的集大成者，旨在通过去中心化的方式重新分配互联网上的数据所有权和控制权。在传统Web 2.0时代，大多数互联网应用程序都由集中式实体控制，这些实体不仅决定数据的存储方式，还掌握着用户数据的使用权。而Web3则通过区块链技术，实现了数据的去中心化存储和管理，让用户能够真正掌握自己的数据命运。Web3的核心概念包括去中心化、去信任性、语义网和互操作性。去中心化意味着数据不再由单一实体控制，而是分散存储在多个节点上，从而提高了系统的安全性和稳定性。
学习前端web的心路历程------Request对象和Response对象
S_yyuan的博客
02-18 753
Request对象和Response对象
web前端的学习历程
z小鱼的博客
01-06 1586
在进入web前端之前，我只是个混迹于IT边缘的计科小白 2016年7月开始真正着手准备做web前端开发 首先，第一个月我去搞了ps ，ai ,学习了一些最基本的制图绘图，这些在后面做项目时确实有用到，虽然不多，但是对图片的基本处理的能力还是要有的。一个很好的截图和取色软件是必备的--“最好的截图软件.exe”；            当然了解一些设计规范是必须的，比如APP的设计图纸一般会给
web前端期末节课大作业~html学生信息管理系统模板
06-18
web前端期末节课大作业 ,html+css+javascript实现~ (功能齐全)学生信息管理系统模板，全套模板，DIV+CSS布局，清新简约。有个人中心、我的信息、班级信息、短信息、学院通知、我的异议、教务中心、我的报考、我的...
讲述web前端工程师的成长历程.zip
08-25
【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛...
前端笔记录，前端的学习历程
06-16
在前端开发领域，学习历程是不断提升技术和理解的过程。这篇笔记主要涵盖了前端开发的基础知识、框架学习以及遇到问题的解决经验，旨在帮助初学者系统地掌握前端技术栈。 首先，前端基础知识是所有前端开发者必备的...
WEB前端开发框架.zip
06-20
【标题】"WEB前端开发框架.zip" 涵盖了前端开发中常用的各种技术和工具，主要关注于构建高效、响应式且易于维护的Web应用程序。这个压缩包可能包含了一个完整的前端框架或者库的源代码，方便开发者进行快速开发。 ...
基于JavaScript的human-resource-backend后端开发源码设计
10-05
该项目是一款以JavaScript为主语言的HR（人力资源）后端开发源码，集成了Java、CSS、Vue和HTML等多种语言，共计1035个文件。具体文件构成如下：236个Java文件、179个JavaScript文件、104个PNG图片文件、59个CSS文件、56个Vue文件、54个GIF动画文件、42个类文件、41个XML文件、36个SVG文件、35个HTML文件。该后端系统旨在构建一个高效的人力资源管理平台。
基于Java的SpringCloud脚手架及Vue前端设计源码
10-05
该项目是一款基于Java的SpringCloud微服务架构的脚手架，同时融合了Vue前端技术。项目包含131个文件，其中Java源代码文件50个，Vue组件文件19个，JavaScript和HTML/CSS相关文件共计38个，XML配置文件13个，YAML文件8个，JSON文件4个，图片文件3个，Git忽略配置文件2个，Markdown文件2个，HTML文件2个。项目结构清晰，功能完善，适用于快速开发和部署微服务应用。
长治医学院在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
留守儿童爱心网站 毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
最新发布
10-05
留守儿童爱心网站 毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV11ktveuE2d
Web前端开发：新时代的崛起
"本文探讨了Web前端应用的发展历程和未来趋势，强调了前端工程师在现代互联网产品中的重要性。文章指出，随着Web2.0时代的到来，前端开发经历了从网页设计师到前端架构师的角色转变，而前端技术如HTML5和CSS3的兴起...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值