用WebStorm开发，基于HTML5+css+JavaScript开发的前端页面

最新推荐文章于 2023-08-15 18:44:49 发布

心为雅好为平

最新推荐文章于 2023-08-15 18:44:49 发布

阅读量4.7k

点赞数 7

文章标签： webstorm javascript css html5 ajax

本文链接：https://blog.csdn.net/qq_44830054/article/details/106353459

版权

摘要由CSDN通过智能技术生成

       由于课程设计的安排，我是第一次使用WebStorm开发项目，之前基于HTML5+css+JavaScript开发的项目是在Eclipse或者My Eclipse上面开发，虽然也可以达到想要的效果但是过程较为麻烦，修改代码稍显繁琐，也用过VS开发前端页面，直接可以拖动控件来实现页面布局，但是做出来的页面有种“僵硬”的感觉（纯属个人看法）。
       现在使用WebStorm开发，感觉很好地结合了两个开发环境的优势，结合Google浏览器的使用能够更好实现对代码的调试，大家开发项目的时候我极力推荐使用Google浏览器进行测试，包括对代码的分析，断点的调试都特别的方便。
       下面我将介绍一下我课设学习中做出来的项目前端页面：
       在项目中的企业项目里面一共有三个页面，再加上登录页面，项目一共有八个前端页面，项目中的图片及小图标存放于项目文件夹中（可以自行创建），下面详细展出效果图及代码；
效果图如下：

图1	图2	图3	图4
图5	图6	图7	图8

页面对应的HTML文件如下：
在这里插入图片描述

首先介绍css样式：

代码如下：

*{
   
    margin: 0;
    padding: 0;
}
body{
   
    /*rgb:red green blue*/
    background: rgb(244,244,246);
    padding-top: 44px;
    padding-bottom: 49px;
}
 .DS_header{
   
    background: rgb(40,133,202);
    line-height: 44px;
    font-size: 18px;
    color: white;
     text-align: center;
      width: 100%;
      left: 0;
      top: 0;
      position: fixed;
}
.DS_second_section img{
   
    width: 100%;
}
footer{
   
    display: table;
    width: 100%;
    background: black;
    height: 49px;
    left: 0;
    bottom: 0;
    position: fixed;
}
footer a{
   
    display: table-cell;
    width: 20%;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
}
footer a img{
   
    width: 18px;
}
footer a span{
   
    display: block;
    color: white;
    font-size: 12px;
}
.BP_first_section{
   
    display: table;
    width: 100%;
    background: rgb(244, 244, 246);
    height: 44px;
    left: 0;
    top: 44px;
    position: fixed;
}
.common_section img{
   
    width: 100%;
}
.BP_first_section a{
   
    display: table-cell;
    width: 33.3%;
    text-decoration: none;

    text-align: center;
    vertical-align: middle;
}
.BP_external_div{
   
    background: white;
    text-align: center;
}
.BP_external_div_sec{
   
    text-align: center;
}
.BP_span{
   
    font-size: 14px;
}
.BP_img{
   
    width: 100%;
}
.BP_inner_div{
   
    text-align: left;
    padding-left: 20px;
    font-size: 10px;
    color: gray;
    line-height: 2em;
}
.BP_first_p{
   
    font-size: 10px;
    color:gray;
}

PS---------------css样式共分为三种，如下：

外部样式：当一个项目外部有多个地方样式一样的时候用外部样式；
页内样式：出现的次数少，但代码量大的时候使用；
行内样式：当某个样式代码很少，但是出现此样式的次数较多时使用；

介绍一下该css样式中所涉及到的重要标签：

link标签中rel属性：rel=“short icon” 特指浏览器中地址栏左侧显示的图标，一般为16*16大小；icon 指的是图标格式为png/gif/jpeg，尺寸一般为16×16，24×24，36×36；
边距标签如下图：
成行标签：display：table；width：需求量
成列标签：display：table-cell；width：需求量
垂直方向：text-align：center（居中）text-align：top（居上对齐）text-align：bottom（居下对齐）
display：block；显示为块级元素，此元素前后会带有换行符。
position：fixed；生成绝对定位的元素，相对于浏览器窗口进行定位。（通过left，top，right，bottom属性进行规定）
text-top：把元素的顶端与元素字体的顶端对齐 text-bottom：把元素…低端对齐；
div标签：简单说就是分块用的，
margin：0 auto；上下不动，水平居中；
height：50px ；line-height： 50px；它俩值一致的时候则垂直居中；
Z-index：数值自己设定；值越大优先级越高；

登录页面（图8）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
    <title>课程设计</title>
    <!--相对路径/绝对路径-->
    <link rel="short icon" href="Resource/icon.png">
    <!--stylesheet；用来加载外部样式表-->
    <link rel="stylesheet" href="ExternalStyle.css">
</head>
<style>
    .L_second_div{
   
        text-align: center;
    }
    .L_head_img{
   
        margin-top: 50px;

最低0.47元/天解锁文章

心为雅好为平

关注

7
点赞
踩
49

收藏

觉得还不错? 一键收藏
3
评论
用WebStorm开发，基于HTML5+css+JavaScript开发的前端页面

由于课程设计的安排，我是第一次使用WebStorm开发项目，之前基于HTML5+css+JavaScript开发的项目是在Eclipse或者My Eclipse上面开发，虽然也可以达到想要的效果但是过程较为麻烦，修改代码稍显繁琐，也用过VS开发前端页面，直接可以拖动控件来实现页面布局，但是做出来的页面有种“僵硬”的感觉（纯属个人看法）。现在使用WebStorm开发，感觉很好地结合了两个开发环境的优势，结合Google浏览器的使用能够更好实现对代码的调试，大家开发项目的时候我极力推荐使用Google浏览器进
复制链接

扫一扫