간단한 웹 페이지를 구현하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

간단한 웹 페이지를 구현하는 방법

醉折花枝作酒筹

Apr 30, 2021 am 09:07 AM

csshtml

이 글에서는 간단한 웹페이지를 구현하는 방법을 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

간단한 웹 페이지를 구현하는 방법

웹페이지의 대략적인 효과

html코드

<!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="/static/imghwm/default1.png"  data-src="pic\logo.png"  class="lazy"      style="max-width:90%" height="50px" style="text-align: center;" alt="간단한 웹 페이지를 구현하는 방법" >
<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 id="Our-nbsp-latest-nbsp-projects">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="/static/imghwm/default1.png"  data-src="pic/news1.jpg"  class="lazy"       style="max-width:90%" height=auto   alt="간단한 웹 페이지를 구현하는 방법" >
</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="/static/imghwm/default1.png"  data-src="pic/news2.jpg"  class="lazy"      style="max-width:90%" height=auto    alt="간단한 웹 페이지를 구현하는 방법" >
</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="/static/imghwm/default1.png"  data-src="pic/news3.jpg"  class="lazy"      style="max-width:90%" height=auto  alt="간단한 웹 페이지를 구현하는 방법" >
</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="/static/imghwm/default1.png"  data-src="pic/news4.jpg"  class="lazy"      style="max-width:90%" height=auto  alt="간단한 웹 페이지를 구현하는 방법" >
</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 id="About-nbsp-Us">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 id="Projects">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 id="Our-nbsp-Clients">Our Clients</h2>
<div style="width:349px height:153px">
<img  src="/static/imghwm/default1.png"  data-src="pic\text.png"  class="lazy"      style="max-width:90%" height=auto alt="간단한 웹 페이지를 구현하는 방법" >
</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>

웹페이지의 CSS코드

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;
}

Recom 수정된 학습: html 비디오 튜토리얼

위 내용은 간단한 웹 페이지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 CSDN에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

HTML 문서의 루트 태그는 무엇입니까?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesasthetop-levellement thatenCapsulateslotherContent, 프로퍼 디코 언어 구조에있는 BrowserParsing을 보장합니다.

HTML 태그와 요소가 같은 것입니까?Apr 28, 2025 pm 05:44 PM

이 기사는 HTML 태그가 요소를 정의하는 데 사용되는 구문 마커이고 요소는 태그 및 내용을 포함한 완전한 단위라고 설명합니다. 그들은 웹 페이지를 구조화하기 위해 협력합니다. character count : 159

& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?Apr 28, 2025 pm 05:43 PM

이 기사는 & lt; Head & gt의 역할에 대해 설명합니다. & lt; Body & Gt; HTML의 태그, 사용자 경험에 미치는 영향 및 SEO 영향. 적절한 구조화는 웹 사이트 기능 및 검색 엔진 최적화를 향상시킵니다.

& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?Apr 28, 2025 pm 05:42 PM

이 기사는 HTML 태그, 등의 차이점과 시맨틱 대 프리젠 테이션 사용 및 SEO 및 접근성에 미치는 영향에 중점을 둡니다.

HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?Apr 28, 2025 pm 05:41 PM

기사는 UTF-8에 중점을 둔 HTML에서 문자 인코딩 지정에 대해 논의합니다. 주요 이슈 : 올바른 텍스트 표시 보장, 멍청한 문자 방지 및 SEO 및 접근성 향상.

HTML의 다양한 형식 태그는 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 웹 컨텐츠를 구조화하고 스타일링하는 데 사용되는 다양한 HTML 서식 태그에 대해 논의하여 텍스트 모양에 미치는 영향과 접근성 및 SEO에 대한 시맨틱 태그의 중요성을 강조합니다.

'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 고유성, 목적, CSS 구문 및 특이성에 중점을 둔 HTML의 'ID'와 '클래스'속성의 차이점에 대해 설명합니다. 웹 페이지 스타일링 및 기능에 어떤 영향을 미치는지 설명하고 모범 사례를 제공합니다.

HTML의 '클래스'속성은 무엇입니까?Apr 28, 2025 pm 05:37 PM

이 기사는 스타일링 및 JavaScript 조작을위한 요소 그룹에서 HTML '클래스'속성의 역할을 고유 한 'ID'속성과 대조합니다.

See all articles

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.