html--整站制作

Posted 2020-08-07

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标签，不用标记行高，只要知道字体、大小等信息，然后定位到某个地方就行

 

 

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