css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」typora-copy-images-to:media第01阶段.WEB基础:css-day06笔记-学成在线网页制作一、学成在线页面制作目标理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识。来一个春晚大联…

大家好,又见面了,我是你们的朋友全栈君。


typora-copy-images-to: media

第01阶段.WEB基础:css-day06笔记-学成在线网页制作

一、学成在线页面制作

目标

  • 理解
    • 能够说写单页面我们基本的流程
    • 能说出常见的css初始化语句
    • 能说出我们CSS属性书写顺序
  • 应用
    • 能利用ps切图
    • 能引入外部样式表
    • 能把psd文件转换为html页面

学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。

pink老师:

取义学有所成,为师之期望,君等成才者也,故曰学成网是也~~

1. 前期准备

1) 前期准备素材

  • 学成在线PSD源文件
  • 开发工具 = PS(切图) + sublime(代码) + chrome(测试)

2) 前期准备工作

欲先善其事,必先利其器。 先把我们的前期准备工作做好, 我们本次采取结构与样式相分离思想。

  1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)
  2. study目录内新建images 文件夹 用于保存图片。
  3. 新建index.html 首页html 文件(以后我们的网站首页统一规定为index.html)
  4. 新建style.css 样式文件。 我们本次采用外链样式表。
  5. 将样式引入到我们HTML页面文件中。
  6. 样式表写入 清除内外边距样式,来检测样式表是否引入成功。

2. CSS属性书写顺序(重点)

建议遵循以下顺序:

  1. 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
  2. 自身属性:width / height / margin / padding / border / background
  3. 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc { 
   
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

3. 布局流程

为了提高网页制作的效率,布局时通常有以下的布局流程,具体如下:

1、必须确定页面的版心(可视区), 我们测量可得知。

2、分析页面中的行模块,以及每个行模块中的列模块。其实页面布局,就是一行行罗列而成

3、制作HTML结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要。

4、然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块。

4. 页面制作

这个页面的版心是 1200像素 每个版心都要水平居中对齐,所以,我们干脆把版心定义为:

.w { 
   
    width: 1200px;
    margin: auto;
}

1) 头部制作

结构图如下:

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

  • 1号是版心盒子header 1200 * 42 的盒子水平居中对齐, 上下给一个margin值就好了。
  • 版心盒子 里面包含 2号盒子 logo
  • 版心盒子 里面包含 3号盒子 nav导航栏
  • 版心盒子 里面包含 4号盒子 search搜索框
  • 版心盒子 里面包含 5号盒子 user个人信息
  • 注意,要求里面的 4个盒子 必须都浮动

以上的章节,上次课讲过,今天从下面的开始讲:

2) banner制作

结构图如下:

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

  • 1号盒子是通栏的大盒子banner, 不给宽度,给高度,给一个蓝色背景,还有一个背景图,注意背景图片要水平居中center,垂直top,不平铺。

  • **2号盒子是版心 w ** , 要水平居中对齐。

  • 3号盒子版心内,左对齐 subnav侧导航栏。

  • 4号盒子版心内,右对齐 course 课程。

3) 课程表模块

结构图如下:

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

  • 1号盒子 是 course 课程 228 * 300 的盒子 右浮动 注意 浮动的元素 不会有外边距塌陷的问题
  • 1号盒子内 分为 上下 两个 子盒子
  • 2号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思,我们经常用)
  • 3号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思,我们经常用)

4) 精品推荐小模块

结构图如下:

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

  • 复习点: 因为里面三个盒子都要垂直居中,我们利用 继承性,给 最大的盒子 一个垂直居中的代码就好了,还记得 那些 样式可以继承吗??? font- line- text- color
  • 大盒子水平居中 goods 精品 ,注意此处有个盒子阴影
  • 1号盒子是标题 H3 左侧浮动
  • 2号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距(注意行内元素只给左右内外边距)
  • 3号盒子 右浮动 mod 修改

5) 精品推荐大模块

结构图如下:

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

  • 1号盒子为最大的盒子 box 版心水平居中对齐
  • 2号盒子为上面部分 box-hd – 里面 左侧标题H3 左浮动 右侧 链接 a 右浮动
  • 3号盒子为底下部分 box-bd — 里面是无序列表 有 10个 小li 组成
  • 小li 外边距的问题, 这里有个小技巧。 给box-hd 宽度为 1215 就可以一行装开5个 li了
  • 复习点: 我们用到清除浮动 因为 box-hd 里面的盒子个数不一定多少,我们就不给高度了,但是里面的盒子浮动了, 影响下面的布局,此时需要浮动

6) 底部模块制作

结构图如下:

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

  • 1号盒子通栏大盒子 底部 footer 给高度 底色是白色
  • 2号盒子版心w 水平居中
  • 3号盒子版权 copyright 左对齐
  • 4号盒子 链接组 links 右对齐

二、chrome调试工具

“工欲善其事,必先利其器”

Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie,还可以模拟手机进行调试。我们现在只是使用html和css,我们先讲一下现在常用的调试。

1. 怎样打开Chrome的开发者工具?

直接在页面上点击右键,然后选择 “检查” 快捷键 F12 或者 ctrl+shift+i

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

基本的结构布局是左边html 右边是 css

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

1) chrome调试数值

可以鼠标点击后面的数值, 按下键盘 上箭头 是 调大 数值, 下箭头是 调小数值

2) 快速定位css所在行数

2. Chrome提示的常见布局错误

1) css单词书写错误提示

用下图所示的黑色箭头,点击我们需要的 html 元素。

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

2) css无显示

声明类名和html调用名不一致 或者 css文件引入不对 或者 这个样式的前面 多余了一些符号影响的

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

3) html 结构不匹配(重要)

左侧 展开可以看到html 标签是否匹配

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

4) 通过颜色判断盒子

蓝色是 盒子的 宽度高度 青色是 内边距 橙色 是外边距 通过这个很方便的看到盒子给的范围

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

5) 看看你有如下错误吗

css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」
css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」
css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」
css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」
css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误「建议收藏」

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140247.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • git使用步骤_小猪酸奶的使用步骤

    git使用步骤_小猪酸奶的使用步骤厉害了!小猪用Git一年多后的精华总结标签:Git描述性文字:不要问我为什么用这种骚猪风格的标题,现在写博文,标题不骚,人家都不乐意看~接触Git到现在有一年多了,对Git使用也是日渐精进,虽说不上很熟络,但也算入门,决定年前总结下,所以有了此文。Git博大精深,还有很多的东西需要学习,比如自己搭建啊,一些便利工具的使用啊,一些疑难杂症解决方案啊等等,当然这就是下一话的事了。本文讲述的

  • warning: #1300-D: XXX inherits implicit virtual 报警

    warning: #1300-D: XXX inherits implicit virtual 报警在KeilMDK里使用了C++,其中用到了基类和派生类。编译的时候出现了大量warning: #1300-D:XX_function inheritsimplicitvirtual的警告信息。由于对C++不熟,花了好半天时间去找消除警告信息的方法。后面发现是这样的。在基类中,定义了虚成员函数。如下:classDriver{public:virtual…

  • 网管小工具「建议收藏」

    网管小工具「建议收藏」找个3CDaemon装上。用TFTP。或者用Kiwi、Solarwind之类的网管小工具

  • 五大常用算法之分支定界法

    五大常用算法之分支定界法看了五大常用算法之一这篇博文,感觉理解了很多,可是纯粹都是理论,缺少一些示例,所以准备综合一篇博文,以帮助自己记忆,原文:一、基本描述   类似于回溯法,也是一种在问题的解空间树T上搜索问题解的算法。但在一般情况下,分支限界法与回溯法的求解目标不同。回溯法的求解目标是找出T中满足约束条件的所有解,而分支限界法的求解目标则是找出满足约束条件的一个解,或是在满足约束条件的解中

    2022年10月31日
  • eclipseUML工具

    eclipseUML工具
    EclipseUML2008-05-0522:05
    来源:lhttp://bach.yo2.cn/articles/category/artoftechnology/page/3
    对于UML工具,我用的并不是太深入,所以仅是对几款小型umltools,以及非专业umltools稍做评价,像RationalRose这种专业uml软件就不比较了。
     
    在选择方面个人比较偏向java,eclipse,逆向工程功能.
    1.MicrosoftVi

  • android 查看本地数据库「建议收藏」

    android 查看本地数据库「建议收藏」本片播客主要想给大家介绍一下我当时在学习sqlite数据库的时候,不能打开目录,查看不了数据表的问题。(没有代码的逻辑,纯操作!!)如果使用模拟器的话,一般不会出现这个问题。由于我(可能很多人)用的是真机,所以碰到了这个问题。去网上搜索了各种解决方案,有的说命令行,有的说Re管理器,反正我没处理好,最后突然另辟蹊径,解决了,而且效率不错。再次分享给大家。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号