HTML5学习

来源：互联网发布：内蒙古出版社知乎编辑：程序博客网时间：2024/06/12 19:39

学者玩 HTML5

主要是HTML5 与CCS的链接，开发工具Untitled-2

链接步骤：先保存，然后在HTML5导入，话说HTML5资料真是少而且质量低。

HTML5

<!doctype html><html><head><link href="Untitled-1.css" rel="stylesheet" type="text/css"><h1>简单测试</h1><nav><ul><li><a href="http://www.hao123.com">路西</a></li><li><a href="http://www.baidu.com">才人</a></li><li><a href="http://www.javaapk.com">女仆</a></li></ul></nav><article><section><k2>嘻嘻哈哈</k2></section><section><p>fate stay night</p><p>吾王万岁</p></section></article><aside><k3>燃烧军团的艾瑞达之王</k3><p>看不懂</p></aside><footer><!-- TemplateBeginEditable name="doctitle" --><title></title><!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --></head><meta charset="UTF-8"><body></body></html>

CCS

@charset "utf-8";/* CSS Document */body{    margin: 0 auto;    width: 900px;    background: #fff;    font: 100%/1.4 helvetica, arial, sans-serif;}header{    background: #ccc;    padding: 20px;}header h1 { margin: 0; }nav{    float: left;    width: 900px;    background: #333;clear: both;overflow: hidden;}nav ul{    margin: 10px;    padding: 0px;}nav ul li{  margin: 10px;   padding: 1px;    display: inline;}nav li a{margin-left:20px;display: block;float: left;color: #fff;text-decoration: none;}article{    clear: left;    float: left;    width: 560px;    padding: 20px 0;    margin: 0 0 0 30px;    display: inline;} article h2 { margin: 0; } aside{    float: right;    width: 240px;    padding: 20px 0;    margin: 0 20px 0 0;    display: inline;} aside h3 { margin: 0; } footer{    clear: both;    background: #ccc;    text-align: right;    padding: 20px;    height: 1%;}

0 0