CSS基础——页面设计思路及简单样式设计一、框架搭建：二、模块设计分析：CSS小结

96 阅读 0 评论 64 点赞

我是靠谱客的博主英俊皮皮虾，这篇文章主要介绍CSS基础——页面设计思路及简单样式设计一、框架搭建：二、模块设计分析：CSS小结，现在分享给大家，希望可以做个参考。

一、框架搭建：

二、模块设计分析：

#banner:

#globallink

横向菜单：

竖向菜单：

#left

#main

CSS小结

一、框架搭建：

复制代码

1
2
3
4
5
6
<div id="container">
    <div id="banner">主题图片</div>
    <div id="globallink">选择栏</div>
    <div id="left">左侧目录栏</div>
    <div id="main">右侧正文</div>    
</div>

二、模块设计分析：

#banner:

就添加一个图即可<div id="banner"><img src="banner.jpg"></div>

#globallink

横向菜单：

导航条除了横向的还有竖向的如下，设置<li>的float属性实现
鼠标移动会变颜色：鼠标定位后，通过不同的背景图片显示 :a:link /a:visited /a:hover实现

竖向菜单：

HTML样式

复制代码

1
2
3
4
5
6
7
8
9
10
11
<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样式

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 #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样式设计

复制代码

1
2
3
4
5
6
7
<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 form input.text {
                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 ;/*鼠标悬停上面的样式*/
            }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 #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 form input.text {
                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 ;/*鼠标悬停上面的样式*/
            }