首页设置
2016-04-13 09:15
281 查看
一、布局
导航 主体 网页底部/ 编程时,将所有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;}
总结:做网页时,最重要的结构的设定,先布局,再做细节。
导航 主体 网页底部/ 编程时,将所有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;}
总结:做网页时,最重要的结构的设定,先布局,再做细节。
相关文章推荐
- 2016.04.05-2016.04.12小结
- OpenGL的gluLookAt和gluPerspective详解
- iOS开发:xib之UICollectionView自定义cell
- 【Spring】Spring集成Quartz
- 好用的GIF捕捉器——LICEcap
- 国内外Android大牛Blog
- SYSTEM_INFORMATION_CLASS枚举类型定义
- JDK源码分析:java.lang.Boolean
- 安装完成后在命令行运行bash时报错0x80070057
- Java IO输入输出流 笔记
- spark支持lzo
- struct的用法--------C语言结构体(struct)常见使用方法(转载)
- TCP/IP(九)TCP协议概述
- 基于Mesos和Docker的分布式计算平台
- Linux 的多线程编程的高效开发经验
- Android 百度地图开发(二)--- 定位功能之MyLocationOverlay,PopupOverlay的使用
- JAVA 新手问题: Request 编码编译出错,Unhandled exception type UnsupportedEncodingException
- Linux查看网卡是千兆还是万兆网卡
- 使用ListView实现一个简单的学生信息展示效果
- 沿海信标台站的坐标系统的问题