html简易网页模板(html简易网页模板代码)

skyadmin 40 2023-01-09

本文目录一览:

HTML静态网页中的模板

简明步骤:打开一个已经存在的网页→另存为模板→新建可编纂区域→保留。

详细:

(1).打开示例站点中已经建好的index.htm文件,打开“文件”,点击“另存为模板”。

(2).选择模板存放的站点,在“另存为模板”对话框中为模板输入一个独一的名称,单击保留按钮。

(3).在“插入栏”选择“模板”,然后单击“可编辑区域”。

(4).频频这个过程。可以再做一些“可编辑区域”。

(5).打开“文件”菜单,单击“保留”。一个模板就做好了。

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模板

这种模板很多的,百度打开一个网页右键源代码就能找到了。

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网页可以直接利用文本编写的,无需下载特定编辑器。

1、在我们的windows操作系统中,桌面上鼠标右键新建一个txt文本,并命名为"最简单网页",只是便于标识,实际上并不影响我们的操作。注意我们需要提前在文件属性中把扩展名显示出来。

2、我们打开文件夹属性设置,将文件扩展名显示出来,后面我们需要对文件扩展名进行操作,不同操作系统的设置位置不太一样,我们可以直接搜索"文件夹属性"来进行查找修改。

3、然后输入最简单的HTML文本语言。

代码如下:

html

body

最简单的网页

/body

/html

4、保存并关闭txt文本,然后修改我们txt文本的扩展名为html,此时会弹出警告框,提示我们修改后可能会导致文件不能使用,这是操作系统的一个处理逻辑,为了防止无意或恶意的损坏文件的行为。

5、无需担心,因为这在我们自己的掌控之下,确认警告,点击"是",然后双击打开我们自己的第一个html网页,就可以看到一个最简单的html网页了。

关于html简易网页模板和html简易网页模板代码的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注云尚网络www.ysfad.net。

上一篇:网站开源模板(网站开源模板下载)
下一篇:个人简历html网页模板(前端网页版简历模板)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~