html5水果主页代码(h5水果机源码)
admin 发布:2022-12-19 16:54 394
今天给各位分享html5水果主页代码的知识,其中也会对h5水果机源码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
跪求,网页制作成品,用HTML和CSS制作的,要有源代码,只为交作业,十万火急!!!
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html
head
title新疆行知书/title
link href="20.css" rel="stylesheet" type="text/css"
/head
body
div id="container"
div id="banner"img src="banner.jpg"/div
div id="globallink"
ul
lia href="#"首页/a/li
lia href="#"新疆简介/a/li
lia href="#"风土人情/a/li
lia href="#"吃在新疆/a/li
lia href="#"路线选择/a/li
lia href="#"自助行/a/li
lia href="#"摄影摄像/a/li
lia href="#"游记精选/a/li
lia href="#"资源下载/a/li
lia href="#"雁过留声/a/li
/ul
br
/div
div id="left"
div id="weather"
h3span天气查询/span/h3
ul
li乌鲁木齐 雷阵雨 20℃-31℃/li
li吐鲁番 多云转阴 20℃-28℃/li
li喀什 阵雨转多云 25℃-32℃/li
li库尔勒 阵雨转阴 21℃-28℃/li
li克拉马依 雷阵雨 26℃-30℃/li
/ul
br
/div
div id="today"
h3span今日推荐/span/h3
ul
lia href="#"img src="tuijian1.jpg"/a/li
lia href="#"喀纳斯河/a/li
lia href="#"img src="tuijian2.jpg"/a/li
lia href="#"布尔津/a/li
lia href="#"img src="tuijian3.jpg"/a/li
lia href="#"天山之路/a/li
/ul
br
/div
/div
div id="middle"
div id="ghost"a href="#" title="魔鬼城探秘"img src="ghost.jpg" border="0"/a/div
div id="beauty"
h3span美景寻踪/span/h3
ul
lia href="#"img src="beauty1.jpg"/a/li
lia href="#"img src="beauty2.jpg"/a/li
lia href="#"img src="beauty3.jpg"/a/li
lia href="#"img src="beauty4.jpg"/a/li
/ul
br
/div
div id="route"
h3span线路精选/span/h3
ul
lia href="#"吐鲁番——库尔勒——库车——塔中——和田——喀什/a/li
lia href="#"乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯/a/li
lia href="#"乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克/a/li
lia href="#"乌鲁木齐——五彩城——将军隔壁——吉木萨尔/a/li
/ul
br
/div
/div
div id="right"
div id="map"
h3span新疆风光/span/h3
pa href="#" title="点击看大图"img src="map1.jpg"/a/p
pa href="#" title="点击看大图"img src="map2.jpg"/a/p
/div
div id="food"
h3span小吃推荐/span/h3
ul
lia href="#"17号抓饭/a/li
lia href="#"大盘鸡/a/li
lia href="#"五一夜市/a/li
lia href="#"水果/a/li
/ul
br
/div
div id="life"
h3span宾馆酒店/span/h3
ul
lia href="#"美丽华大饭店/a/li
lia href="#"海德大饭店/a/li
lia href="#"银都大饭店/a/li
lia href="#"鸿福大饭店/a/li
lia href="#"友好大酒店/a/li
lia href="#"棉麻宾馆/a/li
lia href="#"电信宾馆/a/li
/ul
br
/div
/div
div id="footer"
p艾萨克 ©版权所有 a href="mailto:demo@demo.com"demo@demo.com/a/p
/div
/div
/body
/html
css为:
body{
background-color:#2286c6;
margin: 0px;
padding:0px;
text-align:center;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
#container{
position:relative;
margin:0px auto 0px auto;
width:780px;
text-align:left;
}
div br{
display:none;
}
#globallink{
margin:0px; padding:0px;
}
#globallink ul{
list-style:none;
padding:0px; margin:0px;
}
#globallink li{
float:left;
text-align:center;
width:78px;
}
#globallink a{
display:block;
padding:9px 6px 11px 6px;
background:url(button1.jpg) no-repeat;
margin:0px;
}
#globallink a:link, #globallink a:visited{
color:#004a87;
text-decoration:underline;
}
#globallink a:hover{
color:#FFFFFF;
text-decoration:underline;
background:url(button1_bg.jpg) no-repeat;
}
#left{
float:left;
width:200px;
background-color:#FFFFFF;
margin:0px;
padding:0px 0px 5px 0px;
color:#d8ecff;
}
#left div{
background-color:#5ea6eb;
margin:0px 5px 0px 5px;
}
#weather{
background:url(weather.jpg) no-repeat -5px 0px;
margin:0px 5px 0px 5px;
background-color:#5ea6eb;
}
div#left #weather h3{
font-size:12px;
padding:24px 0px 0px 74px;
color:#FFFFFF;
background:none;
margin:0px;
}
div#weather ul{
margin:8px 5px 0px 5px;
padding:10px 0px 8px 5px;
list-style:none;
}
#weather ul li{
background:url(icon1.gif) no-repeat 0px 6px;
padding:1px 0px 0px 10px;
}
#left div h3{
font-size:12px;
padding:4px 0px 2px 15px;
color:#003973;
margin:0px 0px 5px 0px;
background:#bbddff url(icon2.gif) no-repeat 5px 7px;
}
#today{
padding:0px 0px 10px 0px;
}
#today ul{
list-style:none;
margin:-5px 0px 0px 0px;
padding:0px;
}
#today ul li{
text-align:center;
}
#today ul li img{
border:1px solid #FFFFFF;
margin:8px 0px 0px 0px;
}
#today ul li a:link, #today ul li a:visited{
color:#d8ecff;
text-decoration:none;
}
#today ul li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#middle{
background-color:#FFFFFF;
margin:0px 0px 0px 2px;
padding:5px 0px 0px 0px;
width:400px; float:left;
}
#middle div{
margin-left:5px;
margin-right:5px;
position:relative;
}
#middle h3{
margin:0px; padding:0px;
height:41px;
}
#middle h3 span{
display:none; /* 文字去掉,换成图片 */
}
#beauty{
margin:15px 0px 0px 0px;
padding:0px;
}
#beauty h3{
background:url(picture_h1.gif) no-repeat;
}
#beauty ul, #route ul{
list-style:none;
margin:8px 1px 0px 1px;
padding:0px;
}
#beauty ul li{
float:left;
width:97px;
text-align:center;
}
#beauty ul li img{
border:1px solid #4ab0ff;
}
#route{
clear:both; margin:0px;
padding:5px 0px 15px 0px;
}
#route h3{
background:url(route_h1.gif) no-repeat;
}
#route ul li{
padding:3px 0px 0px 30px;
background:url(icon1.gif) no-repeat 20px 7px;
}
#route ul li a:link, #route ul li a:visited{
color:#004e8a;
text-decoration:none;
}
#route ul li a:hover{
color:#000000;
text-decoration:underline;
}
#right{
float:left;
margin:0px 0px 1px 2px;
width:176px;
background-color:#FFFFFF;
color:#d8ecff;
}
#right div{
position:relative;
margin-left:5px;
margin-right:5px;
background-color:#5ea6eb;
}
#right div h3{
font-size:12px;
padding:4px 0px 2px 15px;
color:#003973;
margin:0px 0px 5px 0px;
background:#bbddff url(icon2.gif) no-repeat 5px 7px;
}
#map{
margin-top:5px;
}
#map p{
text-align:center;
margin:0px;
padding:2px 0px 5px 0px;
}
#map p img{
border:1px solid #FFFFFF;
}
#food{
padding-top:10px;
}
#food ul, #life ul{
list-style:none;
padding:0px 0px 10px 0px;
margin:10px 10px 0px 10px;
}
#food ul li, #life ul li{
background:url(icon1.gif) no-repeat 3px 9px;
padding:3px 0px 3px 12px;
border-bottom:1px dashed #EEEEEE;
}
#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{
color:#d8ecff;
text-decoration:none;
}
#food ul li a:hover, #life ul li a:hover{
color:#000000;
text-decoration:none;
}
#life{
padding-top:10px;
padding-bottom:5px;
margin-bottom:5px;
}
#footer{
background-color:#FFFFFF;
margin:1px 0px 0px 0px;
clear:both;
position:relative;
padding:1px 0px 1px 0px;
}
#footer p{
text-align:center;
padding:0px;
margin:4px 5px 4px 5px;
background-color:#5ea6eb;
}
#footer p a{
color:#FFFFFF;
text-decoration:none;
}
html5新增的表单元素有哪些
html5新增的表单元素有以下几种:
datalist,keygen,output三种无素。
1.datalist 元素
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id。
2.keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
3.output 元素
output 元素用于不同类型的输出,比如计算或脚本输出。
根据具体问题类型,进行步骤拆解/原因原理分析/内容拓展等。
具体步骤如下:/导致这种情况的原因主要是……
怎么用html5制作个人主页
总体把页面一分为二,header是包含在article里面的,页脚部分是单独的一块儿。大致结构获悉了后再从局部入手,header部分,有主标题、副标题、还有作者署名,前面我们讲过,如果除了主标题,还有一个副标题,那可以把这两个标题写在一个hgroup元素中。如果除了主标题之外,还有其他内容,比如内容摘要、发表时间、作者、图片或者小标题链接等,那就应该把他们放在一个 header元素中。
header
hgroup
h1给个人博客增加色彩元素提升网站用户体验/h1
h2网页的色彩——决定用户是否驻足停留的关键/h2
/hgroup
p class="Byline"design by DanceSmile/p
/header
接下来是文章正文部分:
部分代码:
div class="Content"
p第一眼看到杨青个人博客网站的时候,如果你喜欢.../p
...
/div
正文当中还有一幅插图,html5新增加了插图这个figure语义元素,figcaption不是只能包含文本,任何html元素都可以,比如链接、小图标。figcaption包含了对图片的完整说明,所以alt文本就显得多于了,这种情况下,可以把img元素中的alt属性删除:
figure
img src="/d/file/jstt/bj/2013-06-19/200e781ddaa1d92cc3996637d06c38b2.jpg"
figcaption图片来源:腾讯CDC《浅析网页色彩应用》/figcaption
/figure
最后在把上面的代码写在article里面。
footer部分只是一些简单的页脚信息。
html5常用标记及用法?
HTML5 新增结构元素分为主体结构元素和非主体结构元素
1.主体结构元素包括 article、section、nav、aside、time
2.非主体结构元素包括 header、hgroup、footer、address
一、主体结构元素
article
article 标签,从语义化上看为文档、页面,其用法如下:
通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题,并放在 header 标签中
article 元素可以互相嵌套
使用频率极高,强调独立性,多注意下与 header 标签的使用。
代码如下:
article
header
h1是我标签/h1
/header
p我是段落/p
article
div我的内容/div
/article
/article
section
section 标签,从语义化上看为部分,其用法如下:
用于页面内容的独立分块,往往是文章的一段
通常由内容和标题组成,没有标题的内容不推荐使用 section
使用频率低,强调分段分块。
注:《HTML5与CSS3权威指南》这本书中说明:一个容器需要被定义样式或者脚本定义行为时,推荐用div而非section,不要将section用作设置样式的容器。
代码如下:
section
h1水果/h1
article
h2苹果/h2
div苹果是撒?/div
/article
article
h2桔子/h2
div桔子是撒?/div
/article
/section
!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 --
article
h1中国人物/h1
p三国、两晋、南北朝/p
section
h2三国/h3
p猛将猛将猛将猛将/p
/section
section
h2两晋/h3
p猛将猛将猛将猛将/p
/section
/article
nav
nav 标签,从语义化上看为导航,其用法如下:
通常作为页面导航的链接组
侧边栏导航
使用频率高。
代码如下:
nav
ul
lia href=""菜单1/a/li
lia href=""菜单2/a/li
lia href=""菜单3/a/li
/ul
/nav
aside
aside 标签,从语义化上看为在旁边、侧边,其用法如下:
在 article 标签中使用时,作为主要内容的附属信息部分,如有关的参考资料、名词解释等。
在 article 标签外使用时,作为页面或者站点全局的附属信息部分,如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。
代码如下:
!-- 在article标签外使用时 --
article
h1马云是谁/h1
p马云,男,1964年10月15日出生于浙江省杭州市,中国著名企业家,阿里巴巴集团、淘宝网、支付宝创始人........../p
aside
h1参考资料/h1
p百度网、维基百科.../p
/aside
/article/p p!-- 在article标签内使用时 --
aside
nav
ul
lia href=""老赵的博客/a/li
lia href=""鬼哥的博客/a/li
lia href=""彪叔的博客/a/li
/ul
/nav
/aside
time
time 标签,从语义化上看为时间,其用法如下:
代表 24 小时中的某个时刻或某个日期
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。
代码如下:
time datetime="2013-3-6"2014年3月6日/time
!-- datetime属性中日期与时间之间要用“T” 文字分隔,“T”表示时间 --
time datetime="2013-3-6T20:00"2014年3月6日20:00/time
!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 --
time datetime="2013-3-6T20:00Z"2014年3月6日20:00/time
二、非主体结构元素
header
header 标签,从语义化上看为文档的页眉,其用法如下:
一种具有引导和导航作用的结构元素
通常放置在整个页面或者页面内的一个内容区块的标题
一个网页内并没有限制 header 标签的个数
使用频率极高,比较容易理解。
代码如下:
header
h1我是大头/h1
/header
article
header
h1我是脖子/h1
/header
p我是身体/p
/article
hgroup
hgroup 标签,从语义化上看为标题组,其用法如下:
作为 header 标签的子元素
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup
通常会将 h1~h6 元素进行分组
使用频率高。
代码如下:
article
header
hgrounp
h1我是刘备/h1
h2我是关羽/h2
h3我是张飞/h3
/hgrounp
/header
p吕布惊呆了/p
/article
footer
footer 标签,从语义化上看为文档的脚注,其用法如下:
一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等
使用频率高,比较容易理解。
代码如下:
article
p吕布惊呆了/p
footer
ul
li关于三国/li
li地图信息/li
li游戏攻略/li
/ul
/footer
/article
address
address 标签,从语义化上看为地址,其用法如下:
用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等
使用频率低。
代码如下:
address
a href=""作者:张三丰/a
a href=""地址:武当山/a
a href=""联系方式:1247/a
/address
关于html5水果主页代码和h5水果机源码的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:关于vb调用txt代码的信息
- 下一篇:名片识别代码(名片扫描识别)
相关推荐
- 05-11自助建站系统源码,自助建站源码php
- 05-09网页代码,网页代码快捷键
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
- 05-06php后台权限管理代码(php管理员权限)[20240506更新]
- 05-06付费观看代码php(付费观看代码)[20240506更新]
- 05-06在线html执行代码(html怎么运行)[20240506更新]
- 05-06源代码管理资源管理器(资源管理器运行代码)[20240506更新]
- 05-06代码源软件库(程序代码库)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接