使用 HTML 和 CSS 的 Bootcamp 网站模板

在本文中，我们将了解如何使用 HTML 和 CSS 设计一个简单的Bootcamp 网站模板。

对于那些不是 CSS 专家的人来说，创建一个有吸引力的模板会很困难。如果不使用 CSS，您将无法使网页更具吸引力。因此，为了制作网页，我们需要具备 HTML 和 CSS 的知识。在本文中，我们将使用 HTML 和 CSS 来制作网站模板。为了设计一个模板，我们首先需要创建一个 HTML web 结构。

第 1 步：使用 HTML 创建网页结构——在本节中，我们将使用

、

和

标签以及 class 和 id 属性创建一个简单的网页结构。我们将有以下部分：导航栏、横幅、课程、关于，最后，我们将有联系我们部分。因此，这将创建一个简单的界面，您可以通过运行以下代码来检查它。

HTML 代码：

index.html

  

    
    
    
    
    
    

  

    

  
        
        

            BOOTCAMP
            

                

                    
Home
                    
Courses
                    
About
                    
Contact
                
            
        
  
        
        

            
        
  
        
        

            
Courses
            

                
                
Web Designing
                

                    If you are looking for a way to 
                    use your artistic side, web design 
                    is a great way to do it.In today's 
                    world, learning how to design 
                    websites can be an incredibly useful 
                    skill.
                
  
                Know More
            
  
            

                
                
Web Development
                

                    Web development gives you the 
                    opportunity to express yourself 
                    creatively on the internet.
                    Fortunately, the high demand, 
                    easy-to-learn, fun-to-experience
                    life.
                
  
                Know More
            
  
            

                
                
Android
                

                    By learning Android Development, 
                    you give yourself the best possible 
                    chance to reach any career goals you 
                    set. Once you get started, within no 
                    time, you'll land in your dream job.
                
  
                Know More
            
        
  
        

            
Why choose us?
            
            

                In today’s digital world, when there 
                are thousands of online platforms 
                (maybe more than that!) available over 
                the web, it becomes quite difficult for 
                students to opt for a quality, relevant 
                and reliable platform for themselves.
                BOOTCAMP will help you excel in your 
                choice of domain by giving industry 
                equivalent experience.
            
  
            More
        
  
        

            

                
Get inTouch
                
 We are Available
            
  
            

                

                    

                        
                        

                                                
                        
 
                        
                            Send
                        
                    
                
  
                

                    

                         E-mail
                    
                    
[e-mail]


                    

                         Mobile
                    
                    
8212341487, 9080140989
                    

                    

                         Address
                    
                    
 Noida Sector 136

                        Metro Pillar- 237
                    
                
            
        
  
        

            Copyright © 2021 || Designed by Geeks
            
        
    

  

第 2 步：使用 CSS 设计网页结构——我们将使用 CSS 为我们在 HTML 代码中创建的 HTML 网页结构提供适当的设计效果。我们将为上述代码中使用的类和 id 赋予样式。我们将使用 flex 属性，以便轻松定位子元素和主容器。边距不会随内容边距折叠。无需编辑 HTML 部分即可轻松更改任何元素的顺序。

CSS 代码：

样式.css

/* Write CSS Here */* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
  
body {
  background-color: #e3e3e3;
}
.container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
  
nav {
  background-color: #089de3;
}
  
nav > a {
  color: #fff;
  font-size: 30px;
  text-decoration: none;
  /* top right bottom left*/
  padding: 10px 10px 10px 30px;
  float: left;
}
  
.navbar > ul {
  list-style: none;
  float: right;
}
  
.navbar > ul > li {
  display: inline-block;
  line-height: 60px;
  /*top-bottom right-left*/
  padding: 0px 20px;
}
  
.navbar > ul:last-child {
  padding-right: 100px;
}
  
.navbar > ul > li > a {
  text-decoration: none;
  font-size: 18px;
  color: #fff;
}
  
.navbar > ul > li:hover {
  background-color: #111111;
}
  
nav::after {
  content: " ";
  display: block;
  clear: both;
  *zoom: 1;
}
  
/* Navbar End */
  
/* Banner Start */
.main-banner {
  height: 400px;
}
.main-banner > img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
/* Banner End */
  
/* Service Start */
.service {
  background-color: #fff;
}
  
.service > h1 {
  font-size: 30px;
  text-align: center;
  padding: 30px;
}
  
.col {
  width: 300px;
  text-align: center;
  margin-left: 20px;
  border-right: solid #bebebe 1px;
  padding-bottom: 30px;
  float: left;
}
  
.col:last-child {
  border-right: none;
}
  
.col > h3 {
  /* top-bottom right-left */
  padding: 10px 0px;
  color: grey;
}
  
.col > p {
  padding-bottom: 20px;
}
  
.col > a {
  background-color: #089de3;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  border: solid white 2px;
  padding: 5px 10px;
  border-radius: 20px;
}
  
.col > a:hover {
  background-color: #111111;
  border: solid #111111 2px;
}
.service::after {
  content: " ";
  display: block;
  clear: both;
  *zoom: 1;
}
/* Service End */
  
/* about Start */
.about {
  background-color: #089de3;
  min-height: 300px;
  text-align: center;
  padding: 20px;
  color: #fff;
}
  
.about > h1 {
  font-size: 30px;
  padding-bottom: 20px;
}
  
.about > img {
  border: solid 2px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  object-fit: cover;
}
  
.about > p {
  font-size: 18px;
  margin: 10px 200px;
  padding-bottom: 10px;
  line-height: 25px;
}
  
.about > a {
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  border: solid white 1px;
  padding: 5px 20px;
}
  
.about > a:hover {
  background-color: #111111;
  border: solid #111111 1px;
}
/* about End */
  
#contact{
    padding: 30px 0px;
}
  
.contact-row{
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-left-col{
    flex-basis: 50%;
    padding-top: 50px;
}
.contact-right-col{
    flex-basis: 50%;
    max-width: 450px;
    margin: auto;
}
.contact-right-col i{
    font-size: 20px;
    padding: 10px;
    background:#089de3;
    color: white; 
}
.contact-right-col p{
    margin-top: 10px;
    margin-bottom: 20px;
}
  
.form{
  
    width: 70%;
    margin:auto;
    text-align: center;
}
.form input[type="text"]{
    width: 70%;
    padding: 10px;
    margin-bottom: 10px;
}
textarea{
    width: 70%;
    padding: 10px;
    margin-bottom: 10px;
}
  
  
  
.c_btn{
    background: black;
    color: white;
    padding: 10px;
    width: 50%;
    border:none;
}
  
  
/* Footer Start */
footer {
  background-color: #089de3;
  text-align: center;
  padding: 10px;
}
  
footer > small {
  color: #fff;
}
  
footer > small > a {
  color: #fff;
  text-decoration: none;
}
/* Footer End */

输出：在 Visual Studio Code 中使用实时服务器打开，或者如果您使用任何其他代码编辑器，只需在浏览器中打开 index.html 文件。