首页设置

一、布局

导航   主体   网页底部/      编程时，将所有HTML 、css、img、放在一个文件夹中。

二、html编程

<div class="wrapper"容器>  将所有布局放在一个容器里。

<header>h5新标签   头部

<nav>h5新标签  导航栏

<a href="  ">链接</a>

<a href="  ">链接</a>

<a href="  ">链接</a>

</nav>

</header>

<div class="content"内容>

<img src=" "图片地址  alt="  " 图片不显示时可显示提示信息。>

<form action="  "服务器地址>

<input  type=" text">文本输入框

<button type="submit"提交类型>按钮</button>

</div>

<footer>

<p>

<a href="  ">链接</a>

<a href="  ">链接</a>

</p>

<p>

<span></span>需要特殊设置的文字

<a href="  ">链接</a>

<a href="  ">链接</a>

<span></span>需要特殊设置的文字

</p>

</footer>

</div>

三、CSS编写

表单提交效果：form action="https://www.baidu.com/s" method="get" target="_blank">

input中添加name值。搜索框的值以name作为介质，传到百度的服务器，用get的方式，在新的窗口打开。

添加icon：<link rel="shortcut icon" type="image/x-icon"设置icon href="img/favicon.ico"icon的地址/>

引入css：<link rel="stylesheet" type="text/css" href=" "css的地址/>

body{font:12px arial;}

header{overflow:hidden}设置浮动之前清除所有浮动。

header nav{width:400px;float:right:}

header nav a{margin-left:15px;}

.content{text-align:center;}居中对齐，此效果只针对于行内元素。

.content img{width:120px;height:129px;}

.content input{width:450px;height34px;}

.content button{width:100px;height:36px;}

footer{padding-top:50px;}

footer p{text-align:center;}

总结：做网页时，最重要的结构的设定，先布局，再做细节。