web front end project structure construction

1. Preparation of documents and directories

Create a new folder in which all items are saved;

Materials include favicon.ico,images and uploads;

images usually store fixed image materials;

uploads is used to store non fixed picture materials;

Create index.html;

Create base.css,common.css,index.css;

2. Usually, the browser default style will be removed before the project starts and set to the initialization style required by the current project;

Function: prevent the influence of different default styles of labels in different browsers, unify the default setting effect of different browsers, and facilitate subsequent project development;

Specific operation: basic public style base.css code

/*Remove margin and padding of common tags*/
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    li,
    dl,
    dt,
    dd,
    input{
    margin:0;
    padding:0;
}

/*Set the uniform font size, line height and font family related properties of the web page*/
   　body{
   font: 16px / 1.5;
}
/*Remove list default style*/
  ol,ul,li{
     list-style:none;
}
 /*Remove default slant style*/
    em,i {
     font-style: normal;
 }

 
/*Remove the default underline of a label and set the text color*/
 　　a{
    color:#000000;
    text-decoration:none;
}
 
　　a:hover{
    color:#BA2636;
    text-decoration:underline;
}
/*Set the vertical alignment of img to center alignment, and remove the default clearance of img*/
    img{
    border:0;
    vertical-align:middle;
}
 /*Remove the default style of input*/
    input {
        border: none;
        outline: none;
        color: black;
    }


 /*Left float*/
    fl {
        float: left;
    }

 /*Right float*/
    fr {
        float: right;
    }


 /*Double pseudo element clarity method*/
　　.clearfix::before,
    .clearfix::after {
        content: "";
        display: table;
    }
    .clearfix::after {
        clear: both;
    }
}

base.css code is portable and can be directly introduced and used in the project.

3.index page skeleton

Change lang to set Web page language: en (Language), Zh CN (Chinese);

Change the title to set the page title;

Modify the description of the web page;

Select shortcut through link to set ico icon;

link css styles to set related styles;

<!-- Basic skeleton -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content=" ">
    <link rel="shortcut icon" href="favicon (1)_wps picture" type="image/x-icon">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/index.css">

4.header development

4.1header includes shortcut menu module and main navigation module

The shortcut menu module is composed of a box in the center of the layout, an unordered list nested in the box and an external chain;

The main navigation module is divided into navigation and search (shopping cart and logo can be added);

<!-- Head module -->
<header>
<!-- Shortcut menu module -->
<div class="rm-shortcut">
<!-- The box of the edition Center -->
<nav class="container">
<ul class="fr">
  <li><a target="_blank" href="#">To be Continued</a></li>
  <li><a target="_blank" href="#">Vedio Rubik's Cube</a> </li>
  <li><a target="_blank" href="#">Audio Rubik's Cube</a> </li>
  <li><a target="_blank" href="#">Music Rubik's Cube</a> </li>
</ul> 
</nav>
</div>
<!-- Main navigation module -->
<div class="rm-main-nav">
<!-- Navigation -->
<ul class="fl">
  <li><a target="_blank" href="#"> Home Page</a></li>
  <li><a target="_blank" href="#"> column I < / a ></li>
  <li><a target="_blank" href="#"> column 2 < / a ></li>
<!-- The column item data depends on the actual item -->
  <li><a target="_blank" href="#"> column n < / a ></li>
</ul> 
<nav class="fl"></nav>
<!-- search -->
<div class="search fl"></div>
<input type="search" placeholder="Search">
</div>
</header>

4.2 setting style for header

The style includes setting the width and height of the layout center;

Shortcut menu width, background color, unordered list floating, etc;

In this process, the dark color system is usually used as the layout center, and the background color of the main navigation module will help the development. Later, it will be adjusted to make the web page more beautiful;

/*Public class of edition Center*/
.container {
    width: 1240px;
    margin: 0 auto;

}

/*---------------Shortcut menu module.rm-shortcut*/
.rm-shortcut {
    height: 52px;
    background-color: antiquewhite;

}
.rm-shortcut .container {
    height: 52px;
    background-color: white;
}
.rm-shortcut ul li {
    float: right;
    line-height: 52px;
}
.rm-shortcut a {
    margin: 0 16px;
    color: black;
    font-size: 14px;
}
.rm-shortcut li :last-child a {
    margin-right: 0;
}

/*---------------Main navigation module.rm-main-nav*/
.rm-main-nav {
    height: 130px;
    background-color: cadetblue;
}
.rm-main-nav .logo {
    width: 207px;
    height: 70px;
    /*PS*/
    background-color: red;
}
.rm-main-nav .logo a {
    display: block;
    height: 70px;
/*Background picture optional*/
    background: url();
    background-size: 100% 100%;

}



.rm-main-nav nav li {
    float: left;
    height: 70px;
    margin-right: 48px;
    line-height: 70px;
}

.rm-main-nav a {
    color: deepskyblue;
    border-bottom: 1px solid #27ba9b;
    padding-bottom: 7px;
}

.rm-main-nav .search input {
    width: 172px; 
    height: 30px;
    border-bottom: 2px solid #e7e7e7;
    padding-left: 31px;
}

5. Development of footer

Similar to the header section, the layout center and the general column are used for text and style settings

No more details here

Tags: html5 html css

Posted on Fri, 15 Oct 2021 14:52:41 -0400 by dopp

Programmer Help

web front end project structure construction

Hot Tags