《CSS精粹》源代码

  • 更新时间:
  • 9479人关注
  • 点击下载

给大家带来的是《CSS精粹》源代码,介绍了关于CSS精粹、源代码、CSS方面的内容,本书是由人民邮电出版社出版,已被174人关注,由热心网友那平晓提供,目前本书在CSS类综合评分为:8.9分。

资源详情相关推荐
《《CSS精粹》源代码》封面
  • 出版社:人民邮电出版社
  • 作者:(英)安德鲁(Andrew,R.)著,丁卫颖,李奕,吴戈
  • 大小:469.48 MB
  • 类别:CSS
  • 热度:583
  • 精通CSS
  • HTML5+CSS3网页设计入门必读
  • 网页设计与开发:HTML CSS JavaScript实例教程 课后答案
  • HTML5+CSS3从入门到精通
  • 《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》课件,素材
  • 配套书籍介绍

    内容介绍

    本书采用问答的形式,为CSS使用过程中一些有价值的经典问题提供了精彩的实践解决方案。本书内容包括文本样式、CSS图像、导航、表格数据、注册表和用户界面、浏览器和设置支持、CSS定位和布局以及未来相关技术。

    本书的目标读者是每一个需要使作CSS的Web设计人员和开发人员。本书通过经典的问题和精彩的解答将理论融于实践,使每一个带着问题阅读本书的读者都能找到自己满意的答案。

    目录

    • 第1章CSS入门
    • 1.1HTML存在的问题
    • 1.2用CSS定义样式
    • 1.3CSS选择符
    • 1.4小结
    • 第2章文本样式和其他基础知识
    • 技巧1如何用CSS替换字体标记
    • 技巧2可否使用pixel、point、em或其他的单位设置字号
    • 技巧3如何指定文本以特定的字号显示
    • 技巧4如何删除链接的下划线
    • 技巧5如何创建当鼠标滑过时改变颜色的链接
    • 技巧6如何在页面上显示两种不同样式的链接
    • 技巧7如何为标题添加背景色
    • 技巧8如何定义带下划线的标题样式
    • 技巧9如何取消标记与其下段落之间的较大问题
    • 技巧10如何不用字体标记就能突出显示页面中的文本
    • 技巧11如何改变文本中的行距
    • 技巧12如何水平对齐文本
    • 技巧13如何定义水平线的样式
    • 技巧14如何缩进文本
    • 技巧15如何使文本居中
    • 技巧16如何使文本居中
    • 技巧17如何改变或删除列表项的项目符号
    • 技巧18如何用图像作为列表项的项目符号
    • 技巧19如何在目录中取消缩进的左边距
    • 技巧20如何水平显示列表
    • 技巧21如何为CSS文件添加注释
    • 技巧22如何不在主体标记中添加属性就能取消页边距
    • 小结
    • 第3章CSS和图像
    • 技巧23如何为图像加边框
    • 技巧24如何用CSS替换图像上不支持的HTML边框属性
    • 技巧25如何用CSS为网页设置背景图像
    • 技巧26如何定位背景图像
    • 技巧27在文本随着网页的滚动而移动的时候,如何使背景图像保持不动
    • 技巧28如何为其他元素设计背景图像
    • 技巧29如何将文本放置在一幅图像的上面
    • 技巧30如何向文档里添加一幅以上的背景图像
    • 小结
    • 第4章导航
    • 技巧31如何用CSS替换图像导航
    • 技巧32如何像设置导航菜单一样设置结构列表的样式
    • 技巧33如何在不使用图像和JavaScript的情况下用CSS创建翻转导航效果
    • 技巧34能否用CSS和创建包含子导航的导航系统
    • 技巧35如何用CSS和列表创建水平菜单
    • 技巧36如何用CSS创建按钮式的导航
    • 技巧37如何用CSS创建标签导航
    • 技巧38如何改变光标样式
    • 技巧39如何在CSS中不使用JavaScript创建翻转效果
    • 小结
    • 第5章列表数据
    • 技巧40如何用CSS布局电子数据表中的数据
    • 技巧41如何保证自己的列表数据既可用又吸引人
    • 技巧42不用HTMLborder属性如何为表格添加边框
    • 技巧43在已经用CSS添加了边框的情况下,如何阻止表格的各个单元间出现空白
    • 技巧44如何用一种吸引人的而且可用的方法来显示电子数据表数据
    • 技巧45如何用交替的颜色显示表格行
    • ……
    • 第6章表单和用户界面
    • 第7章浏览器和设备支持
    • 第8章CSS定位和布局
    • 第9章实验、浏览器专用CSS和未来技术
    精选笔记1:基于vue中css预加载使用sass的配置方式详解

    22小时22分钟前回答

    1.安装sass的依赖包

    npm install --save-dev sass-loader
    //sass-loader依赖于node-sass
    npm install --save-dev node-sass

    2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分

    { 
     test: /\.sass$/, 
     loaders: ['style', 'css', 'sass'] 
    } 
    <span >// module用来解析不同的模块
     module: {
      rules: [
       ...(config.dev.useEslint ? [createLintingRule()] : []),
       {
        test: /\.vue$/,
        // 也就是说,对.js和.vue文件在编译之前进行检测,检查有没有语法错误'eslint-loader'
        // enforce: 'pre'选项可以确保,eslint插件能够在编译之前检测,如果不添加此项,就要把这个配置项放到末尾,确保第一个执行
        // 对vue文件使用vue-loader,该loader是vue单文件组件的实现核心,专门用来解析.vue文件的
        loader: 'vue-loader',
        // 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
        options: vueLoaderConfig
       },
       {
        test: /\.js$/,
        // 对js文件使用babel-loader转码,该插件是用来解析es6等代码
        loader: 'babel-loader',
        // 指明src和test目录下的js文件要使用该loader
        include: [resolve('src'), resolve('test')]
       },
       {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        // 对图片相关的文件使用 url-loader 插件,这个插件的作用是将一个足够小的文件生成一个64位的DataURL
        // 可能有些老铁还不知道 DataURL 是啥,当一个图片足够小,为了避免单独请求可以把图片的二进制代码变成64位的
        // DataURL,使用src加载,也就是把图片当成一串代码,避免请求,神不神奇??
        loader: 'url-loader',
        options: {
         // 限制 10000 个字节一下的图片才使用DataURL
         limit: 10000,
         name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
       },
       {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        // 字体文件处理,和上面一样
        loader: 'url-loader',
        options: {
         limit: 10000,
         name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
       },
       {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
         limit: 10000,
         name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
       },
        </span><span >{
          test: /\.sass$/,
          loaders: ['style', 'css', 'sass']
        }</span><span >
      ]
     },</span>

    3.修改模板里面的style lang="scss";例如模板红色标记

    <style lang="scss">
    <template>
      <div id="indexContent">
        <v-header></v-header>
        <div class="tab">
          <div class="tab-item">
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/foods">商品</router-link>
          </div>
          <div class="tab-item">
            <router-link to="/rating">评论</router-link>
          </div>
          <div class="tab-item">
            <router-link to="/seller">商家</router-link>
          </div>
        </div>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
      </div>
    </template>
    <script type="text/ecmascript-6">
      import header from './components/header/header.vue';
      // 加default表示对整个模块进行导出
      export default{
        components: {
          'v-header': header
        }
      };
    </script>
    <span ><style lang="scss"></span>
      #indexContent {
        .tab{
          display: flex;
          width:100%;
          height: 40px;
          line-height: 40px;
          .tab-item {
            flex: 1;
            text-align: center;
            a{
              display:block;
            }
          }
        }
      }
    </style>
    

    4.npm run dev

    5.效果

    基于vue中css预加载使用sass的配置方式详解

    以上这篇基于vue中css预加载使用sass的配置方式详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

    相关声明:

    《CSS精粹》源代码 下载资源由用户 叶婉秀 于 2022-01-04 09:29:12 分享至网盘,版权归人民邮电出版社所有。仅供想学习CSS的网友交流使用,专题参考:CSS精粹,CSS,

    CSS相关资源

    • CSS实战手册

      CSS实战手册

      大小:119 MBCSS手册

      立即下载
    • 前端体验设计:HTML5+CSS3终极修炼

      前端体验设计:HTML5+CSS3终极修炼

      本书是Web设计畅销书《超越CSS》作者力作,结合当前移动互联网下的硬件变化情 况,以一个Web设计开发者的视角,将老的工作方法与新技术相结合,通过丰富的案例 为读者展示了如何设计高效、充满创意的Web页面和应用,并通过挖掘高级布局方式、无障碍 页面、语义化标签、高级CSS技巧等内容,快速提升读者的视野与设计开发水平。 此外,腾讯FERD团队(前端研发中心)在翻译本书的过程中,不仅严谨精准地表达出了作者 的观点,又兼顾了国内行业的

      大小:19.7 MB前端设计

      立即下载
    • 《HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通》实例代码

      《HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通》实例代码

      内容简介 本书全面、系统地讲解了HTML5、CSS3和jQueryMobile相关知识,并涵盖从Web界面设计到移动应用开发的各种技术和知识点,内容由浅入深,讲解通俗易懂,并在知识点介绍过程中配合大量案例进行讲解,以帮者提高实战技能。本书共19章,分为3个部分。*部分是第1~7章,介绍了HTML5各方面的知识点,重点介绍了文本、图像、canvas元素、音频、视频和新型表单等内容;第二部分是第8~14章,主要介绍了CSS3样式各属性的设置和使用方法,重点介绍了CSS3中

      大小:1.8 GB手机网站设计

      立即下载
    • CSS专业技巧

      一个帮你提升 CSS 技巧的收藏集。 目录 CSS 专业技巧 使用CSS复位 继承 box-sizing 使用unset而不是重置所有属性 使用 :not() 选择器来决定表单是否显示边框 檢查字體是否在本地安裝 为 body 元素添加行高 为表单元素设置:focus 垂直居中任何元素 逗号分隔列表 使用负的 nth-child 来选择元素 使用 SVG 图标 使用 形似猫头鹰 的选择器 使用 max-height 来建立纯 CSS 的滑块 创造格子等宽的表格 利用 Flexbox 去除多余的外边距 利用

      大小:987 KBCSS技巧

      立即下载
    • 《从0到1:CSS进阶之旅》PPT课件,源码

      《从0到1:CSS进阶之旅》PPT课件,源码

      编辑推荐 1.源自阅读量600万的人气教程; n 2.一本书快速进阶 CSS 高级技术; n 3.几十个前端黑科技,附赠上百道前端面试题,让你的技术比别人更高一筹; n 4.众多前端工程师、高校老师、学生一致推荐。 n 5.提供习题答案、源代码、教学PPT等资源,可在图书前言部分获取下载方法。 n n 从0到1系列图书是根据线上付费视频培训课程和绿叶学习网超人气教程编写的培训教材。 n 由于该在线课程有着独特的风格、极高的质量,因而累积获得超过100 000 读者的支

      大小:2.2 MBCSS进阶

      立即下载

    CSS配套笔记

    7小时24分钟前回答

    关于query Javascript CSS Selector engine

    query是一个javascript css selector engine,小巧而功能强大,压缩后2k左右,可以很轻松的集成到代码当中。 支持浏览器 IE6+、Firefox、Chrome、Safari、Opera 选择器 query(selector[,context]) div #intro div#intro .red span.red [name] [name=keywords] input[name] input[name=keywords] input[name='keywords'] input[name="keywords"] input[name*=key] label[class~=red] #navli #nav li #nav li #nav li #nav li #intro,.red,div input[name],#navli 原生方法 query.getById(id) query.getByName(name) query.getByTagName(tagName[, parent]) query.getByClass(className[, parent][, tagName]) Example: query.getByClass("red"); query.getByAttr(name, val[, parent][, tagName]) Example: query.getByAttr("name","keywords",parent,"input"); query.extend Example: query.extend({ getByCit……

    2小时6分钟前回答

    jquery修改网页背景颜色通过css方法实现

    我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现。 效果图: show you code: !doctype html html head meta charset="utf-8" titlejquery test/title script src="jquery-1.11.1.min.js"/script /head body button value="white"white/button button value="red"red/button button value="green"green/button button value="yellow"yellow/button div class="show" /div script $("button").click( function() { var color = this.value; $("body").css("background-color",color); } ) /script /html 我们先根据元素名选择我们要操作的对象:button,然后使用click方法找到被点击的按钮,然后在触发的事件中获取该按钮的对应的颜色值,然后通过css()方法将该颜色值……