html首页简单模板（HTML页面模板）
本文目录一览：
求一个简单的个人网页html模板
这种模板很多的，百度打开一个网页右键源代码就能找到了。
html xmlns=""headmeta http-equiv="Content-Type" content="text/html; charset=gb2312"
meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
meta name="apple-mobile-web-app-capable" content="yes"
meta name="apple-mobile-web-app-status-bar-style" content="black"
link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-57.png" sizes="57x57" rel="apple-touch-icon"
link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon"
link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-114.png" sizes="114x114" rel="apple-touch-icon"
title{dede:global.cfg_webname/}/title
meta name="keywords" content="{dede:global.cfg_keywords/}"
meta name="description" content="{dede:global.cfg_description/}"
link href="{dede:global.cfg_templets_skin/}/style/style.css" rel="stylesheet" type="text/css"
script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/jquery-1.9.1.js"/script
script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/theme_trust.js"/script
style type="text/css"
html,
body {
margin: 0;
padding: 0;
}
.iw_poi_title {
color: #CC5522;
font-size: 14px;
font-weight: bold;
overflow: hidden;
padding-right: 13px;
white-space: nowrap
}
.iw_poi_content {
font: 12px arial, sans-serif;
overflow: visible;
padding-top: 4px;
white-space: -moz-pre-wrap;
word-wrap: break-word
}
/style
script type="text/javascript" src="{dede:global.cfg_templets_skin/}/main.js"/script
script
jQuery(document).ready(function() {
jQuery('#openSidebar').click(function() {
jQuery('.wrapper').toggleClass('openNav');
});
jQuery('#menu a').click(function() {
jQuery('.wrapper').removeClass('openNav');
});
});
/script
script type="text/javascript" src="{dede:global.cfg_templets_skin/}/api"/scriptscript type="text/javascript" src="{dede:global.cfg_templets_skin/}/getscript"/scriptlink rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/bmap.css"
style type="text/css"
html,
body,
wrapper {
height: 100%;
}
/style
/head
body
div class="wrapper"
div class="sidebar"
div class="clearfix k1120"
div class="navBox" id="openSidebar"
a href="javascript:void(0)" class="navOpen"/a
/div
div id="menu"
ul class="clearfix"
lia href="#home" class="nav_home current"span首页br /bHome/b/span/a
/li
lia href="#services" class="nav_services"span服务范围br /bServices/b/span/a
/li
lia href="#case" class="nav_case"span案例展示br /bCase/b/span/a
/li
lia href="#about" class="nav_about"span关于我们br /bAbout us/b/span/a
/li
lia href="#news" class="nav_news"span新闻动态br /bNews/b/span/a
/li
lia href="#contact" class="nav_contact"span联系我们br /bContact us/b/span/a
/li
/ul
/div
/div
/div
div class="pageMain"
div id="header"
div class="k1120 clearfix"a href="{dede:global.cfg_basehost/}" id="logo"logo/a
/div
/div
div id="home" class="scrol-page"
div class="banner"
div class="b_1" style="background-position: 50% 0px;"
div class="k1120 clearfix"
div class="b_pic"
div class="mac" style="margin-top: 0px; opacity: 1;"img src="{dede:global.cfg_templets_skin/}/images/mac.png"
/div
div class="iphone" style="margin-top: 0px; opacity: 1;"img src="{dede:global.cfg_templets_skin/}/images/iphone.png"
/div
div class="ipad" style="margin-top: 0px; opacity: 1;"img src="{dede:global.cfg_templets_skin/}/images/ipad.png"
/div
/div
div class="b_text" style="margin-top: 0px; opacity: 1;"
{dede:global.cfg_ggg/}
/div
/div
/div
/div
div class="banner"
急，求一个简单的html个人网页模板，静态就行
html
head
meta
http-equiv="Content-Language"
content="zh-cn"
meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
title这是我的网页/title
meta
name="keywords"
content="这是我的网页"
meta
name="description"
content="这是我的网页"
/head
body
bgcolor="#808080"
div
style="position:
absolute;
width:
450px;
height:
550px;
z-index:
1;
left:
400px;
top:
60px;
padding-left:
60px;
padding-right:
60px;
padding-top:
90px;
padding-bottom:
60px;
background-color:
#FFFFFF"
id="layer1"
p
align="center"b这是我的XXX页/b/p
/body
/html
将上面的所有代码复制到记事本中,将记事本的后缀由txt更改为htm,这样打开后就会看到一张最简单的网页,如果需要多页,只需多复制几份即可,不同的内容需要你更改一下,如:我的网站首页,照片,个人资料,日志等...
html 初学者 网站模板
!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
style
body{
height:500px;
background: linear-gradient(#A6CADE,#F8C6F8) no-repeat;
}
ul,li,div {
padding:0;margin:0;
}
.container{
width: 500px;
margin:0 auto;
}
#tab-con div{
display: none;
width:500px;
height:282px;
}
#tab-con div img{
width: 100%;
height:100%;
}
#tab-con div.active{
display: block;
}
#tab-list ul li{
float:left;
list-style: none;
}
#tab-list ul li a{
display: block;
width:70px;
text-align: center;
text-decoration: none;
color:#000;
background: #D6D6D1;
}
#tab-list ul li.active a{
color:#fff;
background:#f96302;
}
/style
/head
body
div class="container"
div id="tab-con"
div class="active"img src="img/test1.jpg"/div
divimg src="img/test2.jpg"/div
divimg src="img/test3.jpg"/div
div图片4/div
div图片5/div
div图片6/div
div图片7/div
/div
div id="tab-list"
ul
lia href="javascript:;"首页/a/li
lia href="javascript:;"美食/a/li
lia href="javascript:;"交通/a/li
lia href="javascript:;"图片4/a/li
lia href="javascript:;"图片5/a/li
lia href="javascript:;"图片6/a/li
lia href="javascript:;"图片7/a/li
/ul
/div
/div
script
var tablist = document.getElementById('tab-list').getElementsByTagName('li');
var tabcon = document.getElementById('tab-con').getElementsByTagName('div');
for(var i = 0; itablist.length; i++){
tablist[i].onclick = function(){
starttab(this);
};
};
function starttab(obj){
for(var i = 0; itablist.length; i++){
if(tablist[i] == obj){
tablist[i].className = "active";
tabcon[i].className = "active";
}else{
tablist[i].className = "";
tabcon[i].className = "";
};
};
};
/script
/body
/html
求html模板，图片上的那种布局
简单至极，五分钟写好了，细节自己调整，拿去不谢！效果图如下：
代码如下：
!DOCTYPE html
html lang="zh-cn"
head
meta charset="utf-8"
/head
body
div class="demo"
div class="banner"/div
div class="nav"
ul class="nav-list"
linav1/li
linav2/li
linav3/li
linav4/li
/ul
/div
div class="left"
h4标题/h4
p文本，文本，文本，文本，文本，文本，文本，文本，文本，文本，文本，文本，文本，文本，文本，文本/p
/div
div class="right"
div class="box"
h4模块测试/h4
ul
li文字列表/li
li文字列表/li
li文字列表/li
/ul
/div
div class="box"
h4模块测试/h4
ul
li文字列表/li
li文字列表/li
li文字列表/li
/ul
/div
/div
div class="clear"/div
/div
style type="text/css"
*{margin: 0;padding: 0;font-size: 14px;}
body{background: #fafafa;}
.demo{width: 1000px;margin: auto;background: #fff;min-height: 100vh;}
.banner{height: 200px;background: #4c9cef;}
.nav{height: 40px;background: #42b983;text-align: right;}
.nav-list{list-style: none;}
.nav-list li{display: inline-block;line-height: 40px;padding: 0 20px;position: relative;color: #fff;font-weight: bold;}
.nav-list li:after{content: "";width: 1px;height: 16px;display: block;background: rgba(255,255,255,.5);position: absolute;left: 0;top: 12px;overflow: hidden;}
.nav-list li:first-child:after{content: none;}
.left{width: 760px;height: 300px;float: left;background: #f7dfbe;padding: 20px;}
.right{width: 160px;height: 300px;float: right;background: #ff9900;padding: 20px 20px 20px 20px;}
.box{margin-bottom: 20px;background: rgba(255,255,255,.5);padding: 10px;}
.box:last-child{margin-bottom: 0;}
.box h4{margin-bottom: 10px;}
.box ul{list-style: none;}
.clear{clear: both;}
/style
/body
/html
关于html首页简单模板和HTML页面模板的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注云尚网络www.ysfad.net。
相关文章
发表评论
暂时没有评论，来抢沙发吧~