从这张图中我们可以看到首页大致分为如下的几个部分:
CSS初始化
确定版心的大小
可以使用PS的矩阵选框工具确定
如图所示版心的宽为1200px
导航栏的大小为1366px
可以分为四部分来做:logo、navbar、search、personal
页面结构部分:
CSS的样式部分
其中需要注意的几个点是:
结构
css样式为:
注意点:
结构
CSS样式:
需要注意的是
结构
样式
注意:
结构
样式css
注意
浏览器对于样式表的优先级从高到低------内联接 style外部链入的。内联接就是在标签内加style,如<div style="color:#000"></div>
style就是加一个style标签,可以放在html的任何位置,如<style>css属性</style>
外部连入的分给import和link
import和第二种差不多只不过写的不是css属性二是<style>@import url(xx.css)</style>这种自我感觉不常用
link是最常用的一种方法。如<link type="text/javascript" href="xx.css" rel="stylesheet"/>
最后俩个都要注意引用的路径
只显示下划线的文本框,像文字一样的按钮body{
background-color:#daeeff
/*
页面背景色
*/
}
form{
margin:0px
padding:0px
font:14px
}
input{
font:14px
Arial
}
.txt{
color:#005aa7
border-bottom:1px
solid
#005aa7
/*
下划线效果
*/
border-top:0px
border-left:0px
border-right:0px
background-color:transparent
/*
背景色透明
*/
}
.btn{
background-color:transparent
/*
背景色透明
*/
border:0px
/*border:0px
solid
#005aa7边框取消
*/
cursor:pointer
}
用户名:
密 码:
[Ctrl+A
全选
注:如需引入外部Js需刷新才能执行]