1. 企业网站布局实践-07 侧边栏制作

    1. 结构分析

    侧边栏

    从图中我们知道,除标题外,其余内容大致分成上下两部分。分别是上面的视频和下面的广告。下面我们来实现这个效果。

    2. 文档结构

    <div class="sidebar">
        <div class="video">
            <div class="title">
               <h2 class="title_left">媒体聚焦</h2><span class="title_right"><a href="news.html">More&gt;&gt;</a></span>
            </div><!-- title结束 -->
            <p class="video_content">
                <embed src="http://player.youku.com/player.php/sid/XNjkzMDE5MTUy ...
    Tagged as : CSS HTML LESS
  2. 企业网站布局实践-06 课程中心制作

    1. 结构分析

    课程中心

    2. 网页结构

    <div class="course">
     <div class="title">
        <h2 class="title_left">课程中心</h2><span class="title_right"><a href="news.html">More&gt;&gt;</a></span>
     </div><!-- title结束 -->
     <div class="course_pic">
         <img src="images/css.jpg" alt="css"><h2><a href="news.html">CSS圆角进化论</a></h2><p>CSS圆角的实现,经历了三大发展阶段 ...
    Tagged as : CSS HTML LESS
  3. 企业网站布局实践-05 新闻中心制作

    1、结构分析

    新闻中心

    从上到下可以分为新闻标题、图片新闻和图片新闻。

    2、创建结构

    新闻中心分为标题、图片新闻和新闻列表3部分。 其中,新闻列表还是使用无序列表。

    <div class="news">
     <div class="title">
         <h2>新闻中心</h2><a href="news.html">More&gt;&gt;</a>
     </div><!-- title结束 -->
     <div class="pic_news">
         <img src="images/news.jpg" alt=""><h2>520 慕女神喊你来表白!</h2>
         <p>
             活动时间:5月20日—5月25日<br>获奖公布时间:5月26日<br ...
    Tagged as : CSS HTML LESS
  4. 企业网站布局实践-04 信息展示区制作

    1. 结构分析

    结构分析

    分析如下:

    结构分析

    盒子之间的间距应该是多少呢?

    整个盒子宽度是1000px,3个盒子宽度是340、410以及230px(总和为980px),那么外边据是否就是10px了呢(10*2+980=1000)?不是的,因为每个小盒子左右都有1px的边框,一共6px,因此是(20-6)/2 = 7px.

    2. 实现

    首先定义结构:

    <div class="main">
     <div class="news"></div>
     <div class="course"></div>
     <div class="sidebar"></div>
    </div><!-- main结束 -->
    

    其次是LESS

    //定义区域整体高度
    .main{
        height:250px;
        margin-top: 5px;
        background-color: #23E;
    }
    
    //定义子盒子高度与浮动 ...
    Tagged as : CSS HTML LESS
  5. 企业网站布局实践-03焦点图制作

    1. 使用myFocus焦点图库

    http://demo.jb51.net/js/myfocus/download.html

    选择demo演示下载解压,拷贝js文件夹与当前js文件夹合并。

    1.1 引入myFocus库文件和样式文件

    <script src="js/myFocus-2.0.1.min.js"></script>
    <script src="js/mf-pattern/mF_YSlider.js"></script>
    <link rel="stylesheet" href="js/mf-pattern/mF_YSlider.css">
    

    1.2 构建页面中使用的图片

    首先添加图片

    <div class="ad" id="picBox">
     <ul>
         <li ...
    Tagged as : CSS HTML LESS
  6. 企业网站布局实践-02导航部分制作

    1. 分析

    我们将导航分为左中右三部分。 其中导航中部分为两部分,分别放置菜单栏和搜索框。 导航栏菜单使用有序列表或无需列表,搜索框使用form表单的input标签。

    2. 实现HTML

    添加nav的html

    <div class="nav">
       <div class="nav_left"></div>
       <div class="nav_mid">
           <div class="nav_mid_left">
               <ul>
                   <li><a href="#">首页</a></li>
                   <li><a href="#">关于慕课</a></li>
                   <li><a href="#">新闻动态</a></li>
                   <li><a href="#">课程中心</a></li>
                   <li><a ...
    Tagged as : CSS HTML LESS
  7. 企业网站布局实践-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
  8. 网页布局基础

    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
  9. LESS学习笔记

    1. LESS注释

    //不会被编译到CSS中
    /*编译到CSS*/
    

    2. 变量

    //定义
    @test_width: 10px;
    
    .box{
        width:@test_width; //调用
    }
    

    3. 混合

    //第一种
    .box1{
        border: 5px solid pink;
    }
    
    .box2{
        .box1;
    }
    
    //第二种
    
    .box3(@border_width){
        border: @border_width solid yellow;
    }
    
    .box3_1{
        .box3(3px);
    }
    
    //第三种
    .box4(@border_width:1px){
        border: @border_width solid yellow;
    }
    
    .box4_1{
        .box4();
    }
    

    4. 匹配模式

    .traingle(top, @w:5px ...
    Tagged as : CSS LESS

Page 2 / 2