首页 > Web开发 > 详细

html--整站制作

时间:2016-09-07 09:14:03      阅读:237      评论:0      收藏:0      [点我收藏+]

1、样式初置

body,div,ul,ol,h1,h2,h3,h4,h5,p,form,input,textarea,select{margin:0;padding:0;}

li{list-style:none;}

a{text-decoration:none;}

img{border:none;vertical-align:top;}

input,textarea{outline:none;}

textarea{resize:none;overflow:auto;}

body{font-size:12px;font-family:”微软雅黑”}

2、准备工作

*链接css

<link href=”css/style.css” rel=”stylesheet” type=”text/css”/>

*图标制作

PNG图片—转换成ico格式

<link href=”img/100du.ico” rel=”shortcut icon”/>

*jq的导入

<script  src=”js/jquery-1.11.0.min.js”></script>

3、区域划分

一般分为下面五个方面

header

nav

search

content  又分为 main、side

footer

4、css

公共区域

.fl{float:left;}

.fr{float:right;}

.clear{zoom:1};//给父级清除浮动

.clear:after{content:‘’,display:block;clear:both;}

 

不小心插入border-radius: 1 2 3 4 个角//ie 6 7 8不支持此圆角

 

 

 

 

1、搜索区域

<div id=”header”>

<div class=”search”>

<form>

<input class=”text” type=”text”/>

<input class=”btn” type=”button”/>

</form>

</div>

</div>

.search{width:200px;height:30px;;position:absolute;}

.search .text{width:150px;height:30px;position:absolute;top:0;left:0;}

//将写文本的这个定位到父级的最左边

.search .btn{width:50px;height:30px;position:absolute;top:0;right:0;}

//将按钮定位到父级的最右边

#header .search{top:;left:;}//将这个search定位到某个位置

form不加定位

 

此处三层定位

2、一段话的那种,用p标签,不用标记行高,只要知道字体、大小等信息,然后定位到某个地方就行

 

 

最近在写页面,准备面试的东西。。不考虑很多东西,但写起来还是有点困难,打算一天一个小页面!

html--整站制作

原文:http://www.cnblogs.com/yinqiong/p/5848041.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!