网页布局任务html+css

初学者做不对
扩展练习😭
有会写的吗？
文本如下：
专业设置
PROFESSIONAL
计算机网络技术
计算机应用技术
数字媒体应用技术
移动通信技术
大数据技术
智能终端技术
计算机应用技术 您当前的位置：首页>专业设置>计算机应用技术
【专业名称】计算机应用技术
样
本专业培养熟练掌握HTML5、CSS3、JavaScript等前端基础技术,熟悉Bootstrap、jQuery、Vue. js等常用前端框架、平面设计、Web前端设计、移动端设计、职业设计等UI技术，具备PC网站和移动Web APP开发能力、跨平台设计能力和Web前端能力，具有实践动手能力和创新精神，具有良好的沟通协作能力、良好的自我提升能力的，能够在传媒公司、广告公司、电子商务企业、互联网技术企业以及各企事业单位的互联网技术部门等领域从事UI设计工作、Web前端开发工作的高级技术、技能型专门人才。
【核心课程】
Web前端工程师是目前互联网行业中招聘需求非常大的一类。随着web前端行业的高速发展，相比国外的前端开发和后端开发人员比例约为1：1，国内比例目前仍然在1：3以下，人才缺口巨大。现在，企业都开始注重网站和产品的交互设计及用户体验，好的UI设计不仅是让软件变得有个性有品味，还能让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。

两张图片如下：

img

img

样本最终运行成功如下图：

img

页面比较简单，要注意的是背景颜色的渐变和字体图标的定位，大概做了下可以看一下


<body>
    <div class="header">
        <div class="bx clearfix">
            <div class="left">
                <div class="logo">
                    <h2>专业设置</h2>
                    <p>PROFESSIONAE</p>
                </div>
                <ul>
                    <li></li>
                    <li>计算机网络技术<span class="iconfont icon-youjiantou"></span></li>
                    <li>计算机应用技术<span class="iconfont icon-youjiantou"></span></li>
                    <li>数字媒体应用技术<span class="iconfont icon-youjiantou"></span></li>
                    <li>移动通信技术<span class="iconfont icon-youjiantou"></span></li>
                    <li>大数据技术<span class="iconfont icon-youjiantou"></span></li>
                    <li>智能终端技术<span class="iconfont icon-youjiantou"></span></li>
                    <li></li>
                </ul>
                <div class="logo_img">
                    <img src="imgs/03.png" alt="">
                </div>
            </div>
            <div class="right">
                <div class="right_header">
                    <h2>计算机应用技术</h2>
                    <p>您当前的位置:首页>专业设置>
                        <span>计算机应用技术</span>
                    </p>
                </div>
                <div class="right_box">
                    <div class="box1 box2">
                        <h4>【专业名称】</h4>
                        <p>计算机应用技术</p>
                    </div>
                    <div class="box1 box2">
                        <h4>【专业代码】</h4>
                        <p>610201</p>
                    </div>
                    <div class="box1">
                        <h4>【培养目标】</h4>
                        <p>本专业培养熟练掌握HTML5、CSS3、 JavaScript等前端基础技术 ，熟悉Bootstrap. jQuery、 Vue.js等 常用前端框
                            架、平面设计、Web前端设计、移动端设计、职业设计等UI技术,具备PC网站和移动Web APP开发能力、跨平台设计能
                            力和Web前端能力,具有实践动手能力和创新精神，具有良好的沟通协作能力、良好的自我提升能力的,能够在传媒公
                            司、广告公司、电子商务企业、互联网技术企业以及各企事业单位的互联网技术部门]等领域从事UI设计工作、Web前端
                            开发工作的高级技术、技能型专门人才。
                        </p>
                    </div>
                    <div class="box1">
                        <h4>【核心课程】</h4>
                        <p>Photoshop网页设 、Html5网页美化与布局、JavaScript交互设计、 Bootstrap框架、 jQu
                        </p>
                    </div>
                    <div class="box1">
                        <h4>【就业前景】</h4>
                        <p>Web前端工程师是目前互联网行业中招聘需求非常大的一类。随着web前端行业的高速发展相比国外的前端开发和
                            后端开发人员比例约为1:1,国内比例目前仍然在1:3以下，人才缺口巨大。现在，企业都开始注重网站和产品的交互设计及
                            用户体验，好的U设计不仅是让软件变得有个性有品味，还能让软件的操作变得舒适简单、自由, 充分体现软件的定位和
                            特点。
                        </p>
                    </div>

                </div>

            </div>
        </div>
    </div>

</body>

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

input,
textarea {
    outline: none;
}

img {
    vertical-align: middle;
}

input {
    outline: none;
}

.clearfix::after {
    content: "";
    height: 0;
    clear: both;
    display: block;
    overflow: hidden;
}
.header {
    width: 100%;
    height: auto;
}

.header .bx {
    width: 1188px;
    height: auto;
    margin: auto;
    box-sizing: border-box;
    padding: 10px;
    background: linear-gradient(to right top, #fcfcff, #babaff);
}

.header .bx .left {
    width: 298px;
    float: left;
}

.header .bx .left .logo {
    width: 298px;
    height: 200px;
    background: #1553a4;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo h2 {
    font-size: 34px;
    color: #fff;
}

.logo p {
    font-size: 30px;
    color: #618393;
}

.left ul {
    width: 298px;
    height: 400px;
    display: flex;
    flex-direction: column;
    background: #f6f6f6;

}

.left ul li {
    box-sizing: border-box;
    width: 298px;
    height: 50px;
    border-bottom: 1px solid #cccccc;
    padding-left: 50px;
    line-height: 50px;
    position: relative;
}

.left ul li span {
    position: absolute;
    color: #f0a80c;
    right: 40px;
    top: 0;
}

.left .logo_img img {
    width: 298px;
    height: 196px;
}


.header .bx .right {
    width: 850px;
    height: 800px;
    float: left;
    margin-left: 20px;
}

.header .bx .right .right_header {
    width: 850px;
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}

.header .bx .right .right_header h2 {
    width: 240px;
    height: 60px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    box-sizing: border-box;
    border-bottom: 3px solid #cccccc;
}

.header .bx .right .right_header p {
    width: 610px;
    height: 60px;
    box-sizing: border-box;
    font-size: 16px;
    color: #333333;
    text-align: right;
    border-bottom: 3px solid #1553a4;
}

.header .bx .right .right_header p span {
    color: #fff;
}

.right_box {
    line-height: 45px;
    text-indent: 32px;
    color: #000000;
}

.right_box h4 {
    color: #1553b7;
}

.right_box .box2 {
    display: flex;
}