1. HTML\CSS补遗

    1. HTML标签

    1. <strong><em>:有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em><strong>标签。但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong>粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。
    2. <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
    3. <q>标签,短文本引用
    4. <blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。 等等,上一节<q>标签不是也是对文本的引用吗?不要忘记<q>标签是对简短文本的引用,比如说引用一句话就用到<q ...
    Tagged as : CSS HTML LESS
  2. 企业网站布局实践-10 新闻详情页的制作

    1. 页面结构

    <div class="list_box">
        <h2>新闻中心</h2>
        <h1>【慕客访谈▪用户篇】“有为屌丝”在路上</h1>
        <p  class="list_box_newsInfo">发布人:Admin 发布时间:2015-04-06 浏览3246次</p>
        <div class="list_box_newsContent">
        </div>
    </div>
    

    2. 样式

    text-indent: 2em; 缩进2个文本尺寸

    //新闻列表区域
    .list_box{
        width: 770px;
        min-height: 350px;
        _height: 350px;
        border: 1px solid #E8E8E8;
        float: right;
        background-color: #FFF;
    
        //新闻类别头部标题 ...
    Tagged as : CSS HTML LESS
  3. 企业网站布局实践-09 新闻列表页制作

    1. 新闻列表页的制作

    新闻列表页和首页对比如下:

    对比

    主要是两点不同,第一个是新闻列表页焦点图不再具有切换效果,图片大小也不一样;第二个就是内容区是2栏可变长的。

    2. 页面结构

    <div class="ad" id="picBox"  style="height:243px">
       <img src="images/ad.jpg" alt="ad">
    </div><!-- ad结束 -->
    <div class="list_main">
        <div class="news_type"></div><!-- news_type结束 -->
        <div class="list_box"></div><!-- list_box结束 -->
    </div><!-- list_main结束 -->
    

    3. 内容展示区制作

    /*--------------------新闻列表页----------------------------*/
    .list_main{
        height: 350px;
        background-color: #FFF;
        margin-top ...
    Tagged as : CSS HTML LESS
  4. 企业网站布局实践-08 底部版权区制作

    1. 结构分析

    底部版权区

    2. 文档结构

    <div class="copyright">
        <div class="copyright_content">
            <ul>
                <li>关于
                    <ul>
                        <li>品牌故事</li>
                        <li>联系我们</li>
                        <li>加入我们</li>
                        <li>版权声明</li>
                    </ul>
                </li>
                <li>课程
                    <ul>
                        <li>PHP开发</li>
                        <li>前端开发</li>
                        <li>JAVA开发</li>
                        <li>Android开发</li>
                    </ul>
                </li>
                <li>关注
                    <ul>
                        <li>新浪微博 ...
    Tagged as : CSS HTML LESS
  5. 企业网站布局实践-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
  6. 企业网站布局实践-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
  7. 企业网站布局实践-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
  8. 企业网站布局实践-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
  9. 企业网站布局实践-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
  10. 企业网站布局实践-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

Page 1 / 2