CSS基础——页⾯设计思路及简单样式设计⽬录
⼀、框架搭建：
<div id="container">
<div id="banner">主题图⽚</div>
<div id="globallink">选择栏</div>
<div id="left">左侧⽬录栏</div>
<div id="main">右侧正⽂</div>
css鼠标点击样式</div>
⼆、模块设计分析：
#banner:
就添加⼀个图即可<div id="banner"><img src="banner.jpg"></div>
#globallink
横向菜单：
导航条除了横向的还有竖向的如下，设置<li>的float属性实现
⿏标移动会变颜⾊：⿏标定位后，通过不同的背景图⽚显⽰ :a:link /a:visited /a:hover实现
竖向菜单：
HTML样式
<div id="globallink">
<ul>
<li><a href="#">鲜花礼物</a></li>
<li><a href="#">⾃助订花</a></li>
<li><a href="#">绿⾊盆栽</a></li>
<li><a href="#">花语赠⾔</a></li>
<li><a href="#">会员中⼼</a></li>
<li><a href="#">联系曦曦</a></li>
<li><a href="#">⽀付⽅式</a></li>
</ul>
</div>
CSS样式
#globallink {
margin: 0px;
padding: 0px;
}
#globallink ul {
list-style:none;
padding:0px;margin:0px;
}
#globallink li {
float:left;/*实现横向导航条*/
text-align:center;
width:100px;
}
#globallink a {/*默认情况下样式，浅粉⾊背景*/
display: block;
padding: 9px 6px 11px 6px;
background: url('lmmw/button1.jpg') no-repeat;
margin: 0px;
}
#globallink a:link, #globallink a:visited {/*⿏标未访问和已经点击访问后样式*/            color:#630002;
text-decoration:none;
}
#globallink a:hover {/*⿏标显⽰在导航条上的样式深粉⾊背景*/
color: #FFFFFF;
text-decoration: underline;
background:  url('lmmw/button1_bg.jpg') no-repeat ;
}
#left
顶端圆⾓图⽚添加，其他部分设置成和图⼀个颜⾊即可
输⼊框呈现下划线的样式设计
按钮设计
html样式设计
<div id="login">
<form>
<p>名字：<input type="text" class="text"></p>
<p>密码：<input type="text" class="text"></p>
<p><input type="button" class="btn" value="登录"><input type="button" class="btn" value="注册"><a href="#">忘记密码</a></p>                </form>
</div>
CSS具体样式设计
#login {
background: url('lmmw/login.jpg') no-repeat;/*添加圆⾓图，并设置距离*/
padding:55px 0px 0px 0px;
}
#login form {
padding:0px;margin:0px;
}
#login p {
margin:0px;text-align:left;
padding:5px 0px 0px 25px;
}
#login p input {
font-family:Arial, Helvetica, sans-serif;/*字体，考虑到兼容性问题*/
font-size:10px;
}
#login {
border-bottom:1px solid #000000;
/*text框的样式，只有下划线*/
border-left:none;border-right:none;border-top:none;
padding:0px;width:90px;
}
#login form input.btn {/*按钮样式设置*/
border:1px solid #000000;
background-color:#ffeff0;
height:17px;padding:0px;
}
#login p a:link, #login p a:visited {/*⿏标未访问和访问后样式*/
color:#333333;
text-decoration:none;
}
#login p a:hover {
color:#630002;
text-decoration:underline ;/*⿏标悬停上⾯的样式*/
}
#main
同上：圆⾓图+三张图⽚横向排列即可，不重复写
CSS⼩结
（Cascading Style Sheets层叠样式表）CSS与HTML的关联引⽤，让页⾯的效果更佳舒服，对页⾯的布局设计更佳灵活，当前接触到的都是很表层基础的内容，也还没有达到熟练应⽤的境界，还需要不断练习强化，每⼀个东西的存在，都有他独特的意义和作⽤。
CSS的表格，div-span， 盒⼦模型在现在看来是⽐较重要的也是基础的部分，先来说⼀下表格：
表格：<tr> <th> <td> 和<ul><li>的混合应⽤（涉及到⼀个 vertical-align:top；属性让⽇期在上⾯显⽰）
div -span：都是为了表⽰⼀个块，在这个块内进⾏样式等内容设置，区别在于div 块会默认占据整个⾏，⽽span 只是划定的⼀个块，可以在⼀⾏内有多个span块
盒⼦模型：margin border padding ：分别有四个⽅向top left right bottom，在布局样式中应⽤很多
简单粗俗的认识和了解，先记录下，更多更全的内容，可以通过查官⽹来学习，⼀下是CSS整体的简单导图——万丈⾼楼平地起

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。