1. 企业网站布局实践-01页面头部制作

    1. 总体分析

    网站的架构采用自顶向下渐进明细的过程进行规划。

    网站首页设计如下:

    2. 页面头部制作

    1、居中

    margin: 0 auto;
    

    2、更改li的图标

    list-style-image: url(../images/li_bg.gif);
    

    去除li的默认图标

    list-style-type:none;
    //或者
    list-style:none
    

    3、浮动菜单右侧

    float: right;
    

    4、菜单的宽度直接设置li的width

    5、文本垂直居中 设置元素文字行高等于盒子的高度

    line-height: 27px;
    

    6、去掉a链接的下划线

    text-decoration: none;
    

    设置链接正常状态:

    a{
        &:link, &:visited{
            color:#8E8E8E;
            text-decoration: none;
        }
    
        &:hover, &:active{
        color ...
    Tagged as : CSS HTML LESS
  2. 网页布局基础

    1. 自动居中一列布局

    1.1 相关知识讲解

    1.1.1 W3C标准:

    结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript)

    倡导结构、样式、行为分离

    1.1.2 CSS中的定位机制

    CSS中,存在3种定位机制: - 标准文档流(Normal Flow) - 浮动(Floats) - 绝对定位(Absolute Position)

    1.1.3 标准文档流

    特点: 从上到下,从左到右,输出文档内容 由块级元素与行级元素组成

    块级元素 从左到右,独占一行 触碰到页面边缘时,会自动换行。

    常见块级元素: div ul li ...

    Tagged as : CSS HTML

Page 2 / 2