字体图标引用的项目案例

最新推荐文章于 2024-04-05 13:57:19 发布

Lucivita

最新推荐文章于 2024-04-05 13:57:19 发布

阅读量201

点赞数

分类专栏： html+css Web前端文章标签： html css

本文链接：https://blog.csdn.net/qq_41568313/article/details/112846659

版权

Web前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

html+css

7 篇文章 1 订阅

订阅专栏

第一步：构建页面HTML框架

分析页面布局将页面分为三个大部分，页面主体分为左右两部分，构建五个div并且分别命名

第二步：编写页面HTML代码

1.界面图标选择

1.1阿里图标选择相关图片

*也可选择icomoon下载导入图标*

1.2将链接导入head中

2.页面代码编写

2.1页头部分

2.2主体内容左侧部分

2.3主体内容右侧部分

2.4尾部部分

2.5页面整体HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体图标项目案例</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1401247_kvavbuybnz.css">
    <!-- <link rel="stylesheet" href="css/style.css"> -->
</head>

<body>
    <!-- 页头部分 -->
    <div class="head">
        <ul>
            <li>首页</li>
            <li>课程</li>
            <li>路径</li>
            <li>实践</li>
            <li>帮助</li>
        </ul>
    </div>
    <!-- 页面主体 -->
    <div class="main">
        <!-- 页面主体左侧 -->
        <div class="main-left">
            <ul>
                <li><br>前端开发</li>
                <li>后端开发</li>
                <li>移动开发</li>
                <li>数据库</li>
                <li>大数据<br>&云计算<br></li>
                <li>运维<br>&测试</li>
                <li>UI设计</li>
            </ul>
        </div>
        <!-- 页面主体右侧 -->
        <div class="main-right">
            <ul>
                <li><span class="iconfont iconcaidan"></span><br>html</li>
                <li><span class="iconfont iconchenggong"></span><br>css</li>
                <li><span class="iconfont iconqitalaji"></span><br>iconfont</li>

                <li><span class="iconfont iconcaidan"></span><br>html</li>
                <li><span class="iconfont iconchenggong"></span><br>css</li>
                <li><span class="iconfont iconqitalaji"></span><br>iconfont</li>

                <li><span class="iconfont iconcaidan"></span><br>html</li>
                <li><span class="iconfont iconchenggong"></span><br>css</li>
                <li><span class="iconfont iconqitalaji"></span><br>iconfont</li>

                <li><span class="iconfont iconcaidan"></span><br>html</li>
                <li><span class="iconfont iconchenggong"></span><br>css</li>
                <li><span class="iconfont iconqitalaji"></span><br>iconfont</li>

                <li><span class="iconfont iconcaidan"></span><br>html</li>
                <li><span class="iconfont iconchenggong"></span><br>css</li>
                <li><span class="iconfont iconqitalaji"></span><br>iconfont</li>

                <li><span class="iconfont iconcaidan"></span><br>html</li>
                <li><span class="iconfont iconchenggong"></span><br>css</li>
                <li><span class="iconfont iconqitalaji"></span><br>iconfont</li>

                <li><span class="iconfont iconcaidan"></span><br>html</li>
                <li><span class="iconfont iconchenggong"></span><br>css</li>
                <li><span class="iconfont iconqitalaji"></span><br>iconfont</li>
            </ul>
        </div>
    </div>
    <!-- 页脚部分 -->
    <div class="footer">
        <ul>
            <li><span class="iconfont iconanquan"></span><br>首页</li>
            <li><span class="iconfont iconanquan"></span><br>手记</li>
            <li><span class="iconfont iconanquan"></span><br>我的学习</li>
            <li><span class="iconfont iconanquan"></span><br>账号</li>
        </ul>
    </div>
</body>
</html>

3.代码效果图

第三步：编写css效果

1.新建css文件并写入HTML头部

2.编写界面效果

2.1整体界面样式

2.2表头部分

2.3主体全部部分

2.4主体部分左侧部分

2.5主体部分右侧

2.6页尾部分

2.7整体css代码

/* 设置列表项目样式为不使用项目符号 */
li{
    list-style: none;
}

/*  将页面边距设为0
    调整字体为15px
    去掉列表编号 */
*{
    margin: 0;
    padding: 0;
    font-size: 15px;
}

/* 页头样式 */

/*  设置宽为400px，行高为40px，盒子颜色为蓝色，
    对象上下间隔为0px,左右间隔根据对象宽度自适应，
    设置行间的距离为40px，文本的对齐方式为居中
    字体颜色为白色 */
.head{
    width: 400px;
    height: 40px;
    background-color: blue;
    margin: 0px auto; 
    line-height: 40px;  
    text-align: center; 
    color: white;
}
/* 水平显示  
    开启弹性布局
    设置水平成像，均匀分布*/
.head ul{
    display: flex;
    flex-direction: row;           
    justify-content: space-around; 
}



    .head{
        width: 400px;
        height: 40px;
        background-color: blue;
        margin: 0px auto; 
        line-height: 40px;  
        text-align: center; 
        color: white;
    }
/* 主体部分样式设置 */

/*  全部主体
    设置宽为400px，盒子颜色为浅灰色，
    对象上下间隔为0px,左右间隔根据对象宽度自适应，
    开启弹性布局
    设置上内边距和下内边距是 10px
        右内边距和左内边距是 0px */
.main{
    width: 400px;
    background-color: #fcfcfc;
    margin: 0px auto;
    display: flex;
    padding: 10px 0;
}

/* 设置左侧盒子宽度占整体25% 
    颜色为浅灰色*/
.main-left{
    width: 25%;
    background-color: #fcfcfc;
}
/*  设置左侧列表距离顶部30px距离
    高为300px，将项目垂直显示，
    文字均匀分布，文本排列到中间
    */
.main-left ul{
    padding-top: 30px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
}
/* 左边框设置 */
/* 设置边框颜色为灰色宽度为2px横线
    距离上下距离为15px，左右距离为10px */
.main-left ul li{
    border-bottom: #ececec 2px solid;
    padding-left:10px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-top: 15px;
}

/* 设置左侧盒子宽度占整体75% 
    颜色为浅灰色*/
.main-right{
    width: 75%;
    background-color: #fcfcfc;
}
/*  
    将项目垂直显示，
    项目在必要的时候拆行或拆列
    文字均匀分布，文本排列到中间
    */
.main-right ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
}
/* 设置li宽为100px高为57px
    使他排列为每行三个 */
.main-right ul li{
    width: 100px;
    height: 57px;
} 

/* 页脚样式设置 */
/*  设置宽为400px，行高为22px，盒子颜色为蓝色，
    对象上下间隔为0px,左右间隔根据对象宽度自适应，
    设置行间的距离为40px，文本的对齐方式为居中
    字体颜色为白色 */
.foot{
    width: 400px;
    line-height: 22px; 
    background-color: blue;
    margin: 0px auto;
    text-align: center; 
    color: white;
}
/*  
    将项目垂直显示，
    项目在必要的时候拆行或拆列
    文字均匀分布
    */
.foot ul{
    display: flex;
    flex-direction: row;           
    justify-content: space-around;  
}