Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > How to implement a simple web page

How to implement a simple web page

醉折花枝作酒筹
Release： 2021-04-30 09:09:29
forward
2575 people have browsed it

This article will introduce to you how to implement a simple web page. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How to implement a simple web page

The approximate effect of the webpage



##html code


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Design</title>
<script type="text/javascript" src="js/conPanel.js"></script>
<link rel="stylesheet" type="text/css" href="css/onLoad.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- 导航条 -->
<div id="navbar">
<img src="pic\logo.png" width="171px" height="50px" style="text-align: center;">
<div  >
<ul>
<li>CONTACT</li>
<li>PAGES▼</li>
<li>PROJECTS</li>
<li>PRICE</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li style="color: #ae130c;">HOME</li>

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

<!-- 幻灯图 -->
<div>
   
</div>
 
<!-- Our latest projects -->
<!-- bootstrap -->
<div>
<h2>Our latest projects</h2>
<div>
<div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div>
<div style=" width:244.5px height:160px ">
<img src="pic/news1.jpg"  width="100%" height=auto  >
</div>
<div>
<p >Lorem ipsum</p>
<p class="pic_p1 pic_p2" >
Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
</p>
<a href="#">more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div>
<div style=" width:244.5px height:160px ">
<img src="pic/news2.jpg" width="100%" height=auto   >
</div>
<div>
<p>Lorem ipsum</p>
<p class="pic_p1 pic_p2">
Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
</p>
<a href="#">more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div>
<div style=" width:244.5px height:160px ">
<img src="pic/news3.jpg" width="100%" height=auto >
</div>
<div>
<p >Lorem ipsum</p>
<p class="pic_p1 pic_p2" >
Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
</p>
<a href="#">more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div>
<div style=" width:244.5px height:160px ">
<img src="pic/news4.jpg" width="100%" height=auto >
</div>
<div>
<p >Lorem ipsum</p>
<p class="pic_p1 pic_p2">
Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
</p>
<a href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
 
<!-- footer -->
<!-- bootstrap -->
<div>
<div>
<div>
<div style="padding: 0 15px">
<h2>About Us</h2>
<p>Perspiciatis unde omnis iste natus error sit voluptatem. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus musull dui.</p>
<p>Lorem ipsumulum aenean noummy endrerit mauris. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus. Null dui. Fusce feugiat malesuada odio.</p>
<a href="#" >read more</a>
</div>
</div>
<div>
<div style="padding: 0 15px">
<h2>Projects</h2>
<div>
<ul >
<li>Singapore Township</li>
<li>Mega luxury Villas</li>
<li>RNT Commercial Shopping Mall</li>
<li>SVN Independent & Duplex Houses</li>
<li>World wide IT park</li>
<li>North Arena SNT Township</li>
</ul>
</div>
</div>
</div>
<div>
<div style="padding: 0 15px">
<h2>Our Clients</h2>
<div style="width:349px height:153px">
<img src="pic\text.png" width="100%" height=auto>
</div>
</div>
 
</div>
</div>
</div>
 
<!-- 最底部 -->
<!-- bootstrap -->
<div>
<div class="container footerText">
<div>
<div class="col-md-6 panel">
<div>
<p>
<a href="index.html">Home</a> | 
<a href="about.html">About</a> |
<a href="services.html">Services</a> |
<a href="price.html">Price</a> |
<a href="projects.html">Projects</a> |
<a href="contact.html">Contact</a>
</p>
</div>
</div>
<div class="col-md-6 panel">
<div>
<p>
Copyright © 2016.Company name All rights reserved.More Templates 
<a href="http://www.cssmoban.com/" target="_blank" style="color: #aaa;" >模板之家</a> 
- Collect from 
<a href="http://www.cssmoban.com/" title="网页模板" target="_blank" style="color: #aaa;">网页模板</a>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Copy after login

Web page css code

body{
	font-family: &#39;Lato&#39;, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

/*bootstrap基本样式*/
.container{
	width: 1140px;
	margin:15px auto;
    padding-left: 15px;
    padding-right: 15px;
}

/*导航条*/


#navbar{
	width: 1140px;
	height: 75px;
	margin: 0 auto;
	padding-top:25px;
	padding-left:15px;
	padding-right:15px; 
}

.navbar_L{
	display: inline-block;
	float: right;
}

.navbar_Ul{
	display: inline-block;
	padding-left: 0;
	margin-bottom: 0; 
}

.navbar_L li{
	font-family: Oswald,sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #8A8A8A;
	display: inline-block;
	text-align: center;
	margin: 0 10px;
	float: right;
}


/*幻灯图片*/
.ppt{
	width: 1024px;
	height: 720px;
	margin: 20px auto;
	background-image: url(../pic/twoimg1.jpg);
	background-size:1920px 1200px;
	background-position:center; 
	background-repeat: no-repeat;
	animation:ppta 5s;
	-moz-animation:ppta 5s; 
	-webkit-animation:ppta 5s; 
	-o-animation:ppta 5s;
	animation-iteration-count:300;
	-moz-animation-iteration-count:300;
	-webkit-animation-iteration-count:300; 
	-o-animation-iteration-count:300;
}

@keyframes ppta
{
	0%   {background-image: url(../pic/twoimg1.jpg);}
	50% {background-image: url(../pic/twoimg2.jpg);}
}

@-moz-keyframes ppta
{
	0%   {background-image: url(../pic/twoimg1.jpg);}
	50% {background-image: url(../pic/twoimg2.jpg);}
}

@-webkit-keyframes ppta 
{
	0%   {background-image: url(../pic/twoimg1.jpg);}
	50% {background-image: url(../pic/twoimg2.jpg);}
}

@-o-keyframes ppta 
{
	0%   {background-image: url(../pic/twoimg1.jpg);}
	50% {background-image: url(../pic/twoimg1.jpg);}
}




/*Our latest projects*/

h2{
	margin: 30px 0;
	font-family: Oswald,sans-serif;
	font-size: 30px;
	color:inherit;
}

.picBox{
	border: 1px solid #D5D5D5;
    padding: 4px;
}

.pic_p1{
	font-family:&#39;Lato&#39;,sans-serif;
	font-size:14px;
	font-weight:700;
	margin-top:16px;
}

.pic_p2{
	font-weight:normal;
	line-height: 1.4;"
}

.more{
	font-family: &#39;Lato&#39;, sans-serif;
	color: #ae130c;font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

/*3排那个位置*/
.h2_Fond{
	margin:30px 0; 
}

.p_p{
	font-family:&#39;Lato&#39;,sans-serif; 
	font-size: 14px;
	line-height: 1.3;
	margin-bottom: 9px;
}


.fUl ul{
	font: 14px/1.2em &#39;Roboto&#39;, sans-serif;
    color: #ae130c;
	padding-left: 0;

}

.fUl li{
	border-top: 1px solid #f2f2f2;
	padding: 6px 0 7px 30px;
}

/*图层*/

/*最底部*/
.big{
	width: 100%;
	background-color: #ae130c;
	padding-top: 10px ;
}


.footerText{
	background-color: #ae130c;
	color: #aaa;
	font-size: 12px;
}

.footerP{
	color: #aaa;
	padding: 4px 8px;
}

.footerP:hover {
    color: #fff;
}
Copy after login

Recommended learning:

html video tutorial

The above is the detailed content of How to implement a simple web page. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css html
source：csdn.net
Previous article：How to make html table Next article：How to implement the top navigation bar with CSS+HTML
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template