2020-09-26 项目实践（一）

最新推荐文章于 2023-03-30 11:29:29 发布
最新推荐文章于 2023-03-30 11:29:29 发布
阅读量420 收藏 1
点赞数
文章标签： html css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45665275/article/details/108942003
版权

太平洋保险官网项目实践（一）

文章目录

实现目标

今日实现目标：首页导航栏以及导航栏的副标题，鼠标移动到标题上，副标题会显示，否则不会显示。
具体效果如下图所示

在这里插入图片描述

项目中的图标

项目中的图标引用的是iconfont-阿里巴巴矢量图标库中的在线图标
链接: iconfont-阿里巴巴矢量图标库.
使用方法如下：

  1. 进入网站，搜索自己想要的图标名称

  2. 将选中的图标加入购物车在这里插入图片描述

  3. 然后添加至项目在这里插入图片描述

  4. 到项目中查看是否有刚刚添加的标签

  5. 复制代码到项目中进行链接在这里插入图片描述

<!--head标签中-->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2089602_etc930pmrx.css">

  1. 链接成功后，回到图标库，复制图标代码在这里插入图片描述

  2. 到项目中进行引用<i class="iconfont icon-taipingyangbaoxian"></i>
    iconfont必写，icon-taipingyangbaoxian为上一步复制的代码
    至此图标应用完成
    在图标库中还有两种方式，此篇文章运用了font class方式

以下是本篇文章正文内容，下面案例可供参考

一、大体布局

1.html

将导航栏分为三个部分，左-logo、中-导航、右-搜索框及图标
代码如下（示例）：

    <div class="header">
        <div class="header_center">
            <div class="logo"> </div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    </div>

2.css

代码如下（示例）：

/*对整个导航栏进行设置*/
.header{
    width: 100%;
    height: 84px;
    background-color: #1565c0;
    position: fixed;/*始终悬浮在顶部*/
    z-index: 15;/*悬浮在所有元素上，不会影响其他元素*/
}
/*导航栏中部*/
.header_center{
    width: 1148px;
    height: 84px;
    margin: 0 auto;/*居中显示*/
}
/*左侧logo*/
.logo{
    width: 175px;
    height: 60px;
    float: left;/*向左浮动*/
}
/*中间导航*/
.header_center>.center{
    width: 580px;
    height: 84px;
    float: left;
}
/*右侧搜索框及图标*/
.header_center>.right{
    width: 380px;
    height: 84px;
    float: left;
}

二、logo细节布局

1.html

logo主要分为图标以及文字
代码如下（示例）：

<div class="logo">
    <a href="../html/home_page.html">
         <i class="iconfont icon-taipingyangbaoxian"></i>
         <h2>太平洋保险CPIC</h2>
    </a>
</div>

2.css

代码如下（示例）：

/*为太平洋保险logo添加样式*/
.icon-taipingyangbaoxian{
    color: white;
    font-size: 50px !important;
    text-align: center;
    float: left;
    line-height: 84px;
}
/*为左侧div布局*/
.logo{
    width: 175px;
    height: 60px;
    float: left;
}
/*超链接样式*/
.logo a{
    text-decoration: none;/*设置下划线为无*/
    width: 175px;
    height: 60px;
}
/*设置太平洋保险CPIC文字样式*/
.logo a h2{
    width: 120px;
    float: left;
    margin: 0;
    color: white;
    margin: 16px 1px;
    letter-spacing: 2px;
    font-size: 22px;
}

三、导航细节布局

1.html

导航运用ul以及li进行设计，为li添加div完成副标题的设计。
代码如下（示例）：

<div class="center">
    <ul>
       <li class="nav"><a href="../html/insurance.html">保险超市</a>
           <div>
               <ul>
                   <li>
                       <a href="../html/medical.html">
                           <i class="iconfont icon-yiliao"></i>
                           <p>医疗</p>
                       </a>
                   </li>
                   <!--下方拥有相同li标签，省略-->
               </ul>
           </div>
       </li>
    </ul>
</div>

2.css

代码如下（示例）：

/*整个中间部分布局*/
.header_center>.center{
    width: 580px;
    height: 84px;
    float: left;
}
/*标题栏*/
.header_center>.center>ul{
    height: 84px;
    float: left;
    margin: 0 0 0 10px;
    padding: 0;
    position: relative;
}
/*为ul清除浮动，完成副标题设计的前提*/
.header_center>.center>ul::after{
    content: '';
    display: block;
    clear: both;
}
/*一级标题的样式*/
.header_center>.center>ul>.nav{
    display: inline-block;
    width: 110px;
    height: 84px;
    text-align: center;
}
/*超链接样式*/
.header_center>.center>ul>li>a{   
    line-height: 84px;
    color: white;
    text-decoration: none;
    font-weight: bolder;
}
/*鼠标悬浮在li标签上方时进行变色*/
.header_center>.center>ul>.nav:hover{
    background-color: #0d47a1;
}
/*以第一个标题的副标题为例，后几个副标题同理*/
/*副标题布局*/
.header_center>.center>ul>.nav:nth-child(1)>div{
    width: 1519.2px;
    height: 150px;
    position: absolute;/*定位布局，将副标题固定位置*/
    left: -370px;
    top: 84px;
    color: #4a4a4a;
    z-index: 5;/*浮动在上方，不会影响下方元素*/
    background-color: white;
    display: none;/*默认不显示*/
}
/*副标题样式*/
.header_center>.center>ul>.nav:nth-child(1)>div>ul{
    width: 1148px;
    height: 120px;
    margin: 22px auto;
    padding: 0;
}
.header_center>.center>ul>.nav:nth-child(1)>div>ul>li{
    width: 9%;
    height: 100px;
    float: left;
    list-style: none;
    text-align: center;
}
/*副标题中图标样式*/
.header_center>.center>ul>.nav:nth-child(1)>div>ul>li>a>i{
    font-size: 52px;
    text-align: center;
    color: #3599f4;
    line-height: 52px;
}
.header_center>.center>ul>.nav:nth-child(1)>div>ul>li>a{
    line-height: 50px;
}
/*副标题文字样式*/
.header_center>.center>ul>.nav:nth-child(1)>div>ul>li>a>p{
    margin: 0;
    height: 30px;
    line-height: 40px;
    color: #4a4a4a;
    font-weight: 100;
}
/*鼠标悬浮在标题上时，副标题显示*/
.header_center>.center>ul>.nav:hover>div{
    display: block;
}

其中副标题基本相似，大体相同，相同的布局可运用相同css，代码同上！

四、右侧搜索框及图标细节布局

1.html

右侧主要分为搜索框、图标，以及鼠标悬浮在手机图标上出现的二维码。
代码如下（示例）：

<div class="right">
                <input type="text" placeholder="搜索您感兴趣的保险类型或服务"><!--placeholder文本框中提示文字-->
                <li class="iconfont icon-iconfontsousuo"></li>
                <li class="iconfont icon-shoujierweima">
                    <div>
                        <ul>
                            <li>
                                <img src="../image/erwei_app_WPS图片.png">
                                <span class="sj1">太平洋保险APP</span>
                            </li>
                            <li>
                                <img src="../image/icon_douyin.png">
                                <span class="sj1" style="width: 120px;">太平洋保险抖音号</span>
                                <p class="sj2">使用最新版抖音扫码关注@太平洋保险</p>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="iconfont icon-yonghu"></li>
            </div>

2.css

代码如下（示例）：

/*右侧整体布局*/
.header_center>.right{
    width: 380px;
    height: 84px;
    float: left;
}
/*搜索框*/
.header_center>.right>input{
    height: 36px;
    width: 250px;
    border-radius: 25px;/*圆角*/
    text-align: center;
    border: 1px solid #1565c0;
    display: inline-block;/*行内块元素*/
    vertical-align: middle;/*垂直居中对齐*/
}
/*图标样式*/
.header_center>.right>li{
    display: inline-block;
    vertical-align: middle;
    color: white;
    font-size: 30px;
    letter-spacing: 5px;
    line-height: 84px;
}
/*手机二维码副标题布局*/
.header_center>.right .icon-shoujierweima{
    position: relative;
}
/*副标题div*/
.header_center>.right .icon-shoujierweima div{
    width: 270px;
    height: 180px;
    border-radius: 10px;
    position: absolute;/*固定位置*/
    z-index: 5;
    background-color: white;
    top: 70px;
    left: -120px;
    display: none;/*默认不显示*/
}
.header_center>.right .icon-shoujierweima div>ul{
    width: 250px;
    height: 150px;
    padding: 0;
    margin: 10px auto;
}
.header_center>.right .icon-shoujierweima div>ul>li{
    width: 100px;
    height: 150px;
    float: left;
    list-style: none;
    text-align: center;
    position: relative;
    padding: 0 10px 0 10px;
}
/*二维码图片大小*/
.header_center>.right .icon-shoujierweima>div>ul>li>img{
    width: 100px;
    height: 100px;
}
/*图片下方文字样式*/
.header_center>.right .icon-shoujierweima div>ul>li>.sj1{
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: 100px;
    display: block;
    color: #4a4a4a;
    text-align: center;
}
.header_center>.right .icon-shoujierweima div>ul>li>.sj2{
    margin: 0;
    font-size: 12px;
    line-height: 20px;
    position: absolute;
    top: 120px;
    letter-spacing: 0;
    color: #aaaaaa;
    text-align: center;
}
/*鼠标悬浮时显示副标题*/
.header_center>.right .icon-shoujierweima:hover>div{
    display: block;
}
下集预告：轮播图~
努力学习前端的小朋友
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
html图标代码大全_非常流行的开源图标库，完全开源免费，可商用——ikonate
weixin_28729843的博客
12-04 6944
介绍这是一个图标库，上面的所有图标完全开源，皆可商用！该图标库还支持自定义图标，你可以随意设置图标的边框、大小、风格、颜色等属性。在无障碍浏览和性能方面该库也做了充足的优化，它与众不同！Githubhttps://github.com/mikolajdobrucki/ikonate是什么让Ikonate与众不同？完全可定制化我们很难找到一个完美的图标集，尤其是免费图标集。Ikonate图标可以轻松...
阿里巴巴 HTML 图标大全 使用详解
最新发布
m0_61743947的博客
06-15 2151
网页图标的下载与使用
HTML特殊符号大全
我的专栏
03-30 1万+
对HTML常用的特殊符号进行整理，便于速查，如 ①②③④⑤⑥⑦⑧⑨⑩
html图标动态移动效果图,html5实现可拖拽移动的悬浮图标的示例代码
weixin_39595537的博客
06-03 754
h5 上经常会有这样的需求：需要在页面上加上一个悬浮图标，大致是如下图的最终实现但是往往按照设计稿是不会遮住主体区域的，但是实际上有时候偏偏会遮挡主体区域，但是为了更好的点击量，又不得不悬浮在页面上...如果能让图标可拖拽移动，这样在遮住主体区域之后，用户可自由移动，这种方案及可以兼顾了。实现的效果如下：(和微信的浮窗效果类似，左右位置靠边显示，上下位置随意放)话不多说，上代码了:style="{...
后台常用图标，代码大全
08-21 5297
后台常用图标，代码大全
eclipse-jee-2020-06-R-win32-x86_64
08-13
Eclipse JEE 2020-06 R Win32 x86_64是专为Windows 32位及64位平台设计的一款强大的Java集成开发环境（IDE），特别适用于企业级Java应用的开发。这个版本的发布，为开发者提供了最新的开发工具和技术支持，旨在提升...
S7-1500 PLC 项目设计与实践_14117094(1).pdf
08-08
S7-1500 PLCS7-1500 PLC
2020-2021-PNE:实践
03-28
在“2020-2021-PNE:实践”这个项目中，我们主要探讨的是在实际网络环境中使用Python编程进行开发和实践的经验。Python作为一种强大、易学且广泛应用于各种领域的编程语言，它的网络编程能力是其众多优点之一。下面将...
计算机网络教案28-中期项目实践-高阶项目.docx
12-15
计算机网络教案28-中期项目实践-高阶项目.docx
mani-pedi：2020-2021实践项目的材料
02-18
mani-pedi：2020-2021实践项目的材料
HTML代码大全
07-08
Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用来表示标志的开始和结束(例如标志对)，因此在Html文档中这样的标志对都必须是成对使用的。在此教程中，我先讲一下Html的基本标志：
常用html图标小集1
09-16
我的图标，收集的美丽html图标，值得收藏，准备好好收藏，以备后续使用
HTML图标字体
MCdongchao的博客
05-18 469
图表字体（iconfont） -在网页中经常需要使用一些图标，可以通过图片来引入图片，但图片本身比较大，也不灵活 -使用图标的时候，可以将图标直接设置为字体， 然后引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
网页小图标代码
拓
04-02 4384
Special Characters for HTMLCO Controls and Basic Latin[ " ] quotation mark[name: "] [number: "][ & ] ampersand[name: &] [number: &][ [name: <] [number: &#60
html自定定义图标,博客个性自定义HTML模块代码大全
weixin_33117513的博客
06-08 576
二、漂亮的个性鼠标特效代码鼠标特效代码为：① 单鼠标特效代码： BODY {CURSOR:url('http://webme.bokee.com/inc/mouse025.cur');} A {CURSOR:hand} ② 双鼠标特效代码：BODY{cursor:url('http://webme.bokee.com/inc/mouse025.ani');}A{CURSOR: url('http:...
html+字体图标+ttf,iconfont 图标字体(示例代码)
weixin_35949857的博客
06-09 912
iconfont技术的主要是将图标转化为字体来减少应用体积。如需在项目中使用iconfont技术，图标矢量图一开始都应合并转化为字体库。优点：减小体积，字体文件比图片要小图标保真缩放，解决2x/3x乃至将来的nx图问题方便更改颜色大小，图片复用缺点：只适用于纯色icon使用unicode字符难以理解需要维护字体库字体管理字体管理方式分为两种：在线管理(iconfont.cn)和FontForge工...
网页特殊符号(HTML字符实体)大全
热门推荐
前端向朔
11-15 14万+
网页特殊符号有很多实用的地方哦，比如版权符号：© 商标注册符号： ® 关闭符号：×（这个我经常用）字体一般要设置大点。下面我们就来看下网页中有哪些特殊符号吧。HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。 HTML 原代码 显示结果 描述 < < 小于号或显示标记 > > 大于号或显示标记 & & 可用于显示其它特殊字符 " “ 引
html中显示特殊符号（附带特殊字符对应表）
sunbocong的博客
07-13 11万+
html中显示特殊符号（附带特殊字符对应表） 问题重现 在使用html进行编辑的时候，特殊符号往往会显示错误，极端情况下更可能导致网页崩溃。如下面这段代码： &lt;table&gt; &lt;tr&gt; &lt;td&gt; 中_国_人 &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; 在网页中则显示为： 这里将两个下划线自动转化为斜体标识符，导致...
JS代码收藏大全
weixin_30337251的博客
12-31 4122
JS代码收藏大全 从其他地方找来的，希望对有需要的人带来方便！ 1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table 2...
SAP-PS原理介绍和项目管理知识概要.ppt
12-05
SAP-PS是一种项目管理工具，它基于项目管理的原理和实践，旨在帮助组织更好地管理项目。下面是SAP-PS原理介绍和项目管理知识概要中的重要知识点： **项目管理原理** 项目管理是指在项目活动中运用知识、技能、工具...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值