最新消息： 关于Git&GitHub 版本控制你了解多少？
您现在的位置是：群英 > 开发技术 > web开发 >
简单网页实现代码实例分享
网络发表于 2021-05-17 17:46 次浏览
本篇文章给大家介绍一下实现简单网页的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

 

网页的大致效果

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="piclogo.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="pictext.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>

网页的css代码

body{
	font-family: 'Lato', 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:'Lato',sans-serif;
	font-size:14px;
	font-weight:700;
	margin-top:16px;
}

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

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

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

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


.fUl ul{
	font: 14px/1.2em 'Roboto', 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;
}

推荐学习：html视频教程

以上就是如何实现简单网页的详细内容，更多请关注群英网络其它相关文章！

标签：html网页代码
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
上一篇：详解nodejs中的事件循环机制
下一篇：关于html的含义解释
相关信息推荐
css中样式的写法是什么？这三种常见写法要知
2021-09-30 16:57:33　关键词：css样式的写法
摘要：css中样式的写法是什么？对一些新手来说，可能不是很了解css中样式的写法，因此本文就给大家来介绍一下CSS的内联样式、内部样式和外部样式的常见写法，有需要的朋友可以参考。..
在css3如何实现阴影效果？方法是什么？
2021-09-30 16:57:19　关键词：css3阴影效果
摘要：css3如何实现阴影效果？在CSS3中，我们想要实现阴影效果，可以使用box-shadow属性。box-shadow属性的使用也很简单的，但是有些值和问题是需要了解清楚的，下面我们就来详细的了解box-sh..
css增加边框怎样做？一文带你了解border属性
2021-09-30 16:57:18　关键词：css增加边框
摘要：css如何增加边框？有时候我们需要给元素添加边框的效果，在CSS中，添加边框，我们可以使用border属性，接下来小编就给大家介绍一下border属性的使用、值的介绍和使用要注意的问题，..
用css怎么样做一个简单的对话框？
2021-09-30 16:57:06　关键词：css对话框
摘要：用css怎么样做一个简单的对话框？对于对话框，大家应该都不陌生，最简单的对话框就是侧面带有一个小三角形的矩形，而实现这样的效果其实并不困难，下面我们就用纯CSS写一个简单..
css设置分辨率的方法是什么？怎样做？
2021-09-29 19:15:17　关键词：css设置分辨率
摘要：这篇文章主要给大家介绍css设置分辨率的内容，在实际的项目中，因为不同的屏幕尺寸要求的分辨率不同，因此为了不同满足用户需要，我们要设置不用分辨的样式。那么具体怎样做呢..
推荐内容
热门关键词
python for语句python列表去重css样式的写法css3阴影效果css增加边框css对话框Python迭代器python列表操作Python双向队列python猜数字游戏python数字类型vue删除cookiejavascript类如何卸载node.jsnode更改安装路径css设置分辨率css图片失真css设置文本不可选中html输入框python判断质数javascript变量PyCharm安装python随机漫步图python的sum函数python输出语句python数字转汉字css间距设置css添加两张背景图片css伪元素vuex
热门信息
  • MySQL增量备份与恢复如何实现？
    2021-03-02
  • 【Git&GitHub教程】GitLab服务器环境搭建步骤分享
    2021-03-13
  • Composer2.0向下不兼容致使无法安装插件？
    2021-03-10
  • 好用的VSCode技巧你知道吗？VSCode新手指南
    2021-03-13
  • Notepad 搜索栏在哪里找？
    2021-02-19
  • 执行一句SQL会有哪些情况出现？
    2021-03-02
  • redis数据库可以用来存储用户信息吗？
    2021-03-02
  • mac 如何通过sublime命令行启动？
    2021-02-26
  • MySQL8.0.22安装及配置步骤分享
    2021-03-02
  • 这些PHPmyadmin漏洞以及拿shell你了解多少？
    2021-03-02

    • Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司

    增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号-36   粤公网安备 44090202000006号粤公网安备 44090202000006号   粤工商备P091701000595