CSS基础——页面设计思路及简单样式设计

清疚 2022-04-25 02:20 257阅读 0赞

**目录**

一、框架搭建：

二、模块设计分析：

\#banner:

\#globallink

横向菜单：

竖向菜单：

\#left

\#main

CSS小结

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70][]

# **一、框架搭建：** #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1][]

# 二、模块设计分析： #

## **\#banner:** ##

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

## \#globallink ##

### 横向菜单： ###

![20190430153726949.jpg][]

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

### 竖向菜单： ###

![20190430155128479.jpg][]

HTML样式

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 ##

![20190430154146329.jpg][]

*  顶端圆角图片添加，其他部分设置成和图一个颜色即可
 *  输入框呈现下划线的样式设计
 *  按钮设计

html样式设计

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 ;/*鼠标悬停上面的样式*/
                }

## \#main ##

![20190430154342925.jpg][]

同上：圆角图+三张图片横向排列即可，不重复写

# CSS小结 #

（Cascading Style Sheets层叠样式表）CSS与HTML的关联引用，让页面的效果更佳舒服，对页面的布局设计更佳灵活，当前接触到的都是很表层基础的内容，也还没有达到熟练应用的境界，还需要不断练习强化，每一个东西的存在，都有他独特的意义和作用。

CSS的表格，div-span， 盒子模型在现在看来是比较重要的也是基础的部分，先来说一下表格：

**表格**：<tr> <th> <td> 和<ul><li>的混合应用（涉及到一个 vertical-align:top;属性让日期在上面显示）

![20190430164344111.jpg][]

** div -span:**都是为了表示一个块，在这个块内进行样式等内容设置，区别在于div 块会默认占据整个行，而span 只是划定的一个块，可以在一行内有多个span块

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 2][]

**盒子模型：margin border padding** ：分别有四个方向top left right bottom，在布局样式中应用很多

简单粗俗的认识和了解，先记录下，更多更全的内容，可以通过查找官网来学习，一下是CSS整体的简单导图——万丈高楼平地起

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70]: /images/20220210/6c54ea32da0f4cd6a17bcde093f2247a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1]: /images/20220210/8440b81b19c149c7a84eb1827a43c46f.png
[20190430153726949.jpg]: /images/20220210/f5e6e83cadfd491db46801e518b1d7d0.png
[20190430155128479.jpg]: /images/20220210/d4e89bdd6e1a4cedacc5829cdd0e475a.png
[20190430154146329.jpg]: /images/20220210/45008ff8bd634d1eb81549c9e7a50fd7.png
[20190430154342925.jpg]: /images/20220210/f00def7aaf4440e6ac79edc4840f3b51.png
[20190430164344111.jpg]: /images/20220210/4a89297b03e448e58812e540628f2048.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 2]: /images/20220210/fdd5e73932a84397a00b18d0f7b7b549.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 3]: /images/20220210/5dbac8a2c676491aa60a7b8b6b29ae56.png