前端基础02

复习新增

1.1  开发前的准备工作

1.配置开发环境   sublime  webstorm  vscode  Hbuilder  atom

2.建立项目文件夹   为了将与项目相关的文件放在一块,便于管理和以后的维护

包括与项目相关的一些文件

主页或是首页    index.html   default.html

Css文件夹    css文件的

base.css     global.css

Images文件夹  用来放置网站中的所有的图片

Js文件

音频或是视频文件

3. 样式初始化

我们的结构中的标签都有默认的样式,在各个浏览器中的显示有可能不尽不同 ,为了保证网站风格的统一或是为了便于我们的开发或是维护,需要将所有的标签 原来的样式清掉,变成统一的样式风格,以便于我们的网站布局。

4. 分析网站构成

做网站的时候也有一个规范或是通例

布局的顺序一般是从上到下,从左到右

在写页面的时候,一般考虑使用标准流的元素,其次才使用浮动或是定位。

就在标准流元素当中,宽高是最稳定的,其实才使用padding,最后或者可以使用margin.

标准流: 一般像div,p这样的块级元素,自己独占一行,像span,a这样的行内元素或是img,input这样的行内块元素,可以一行显示多个,我们把这样的显示方式叫做标准流。normal flow

我们网站结构中的任何标签 都可以看成是一个盒模型,都可以设置宽高,只是有的元素设置了宽高之后,不起作用。

要想让行内元素的宽高起作用:

1. 将行内元素转换成块级元素或是行内块元素

2. 浮动   脱标

3. 定位   脱标

定位有四种:

Fixed    absolute    relative   static

1.2   background 复合属性

mso-para-margin-left:0.0000gd;text-indent:28.0000pt;mso-char-indent-count:0.0000;">background-attachment: 是否滚动

background: 颜色  图片的链接  是否平铺  背景位置 是否滚动。

font:  复合属性

font-weight:  粗度  bold  700    200  500 也可以用数字来表示

font-size/line-height:  字体大小/行高

font-family: 字体样式

font-style: 字体风格   italic

 font: 400  14px/30px “宋体”,

注意一点: 合写的font无论怎么简写,有两样一定得带上,

Font-size     font-family:

1.3  相邻行内块元素的间距问题

布局的时候,相邻的行内块元素之间默认有几像素的外间距。

只能用浮动来解决这个问题。

1.4  Border-radius: 边框半径

有四个值:左上,右上,右下,左下

四个值为元素宽度或是高度的一半的时候,会将元素变成圆形或是椭圆形,峰值只能到达宽度或是高度的一半。

1.5  行内元素的margin

行内元素的左右margin是可以起作用的,但是上下的margin是不起作用的。

1.6  清除浮动

浮动的原因就是因为父盒子没有高度,原来的高度是靠标准流中的子元素撑起来,但是子元素浮动了之后 ,脱离标准流了,造成父级元素的高度为0;

  1. 给父盒子设置一个高度
  2. Clear: both
  3. Overflow: hidden   触发了BFC模式 也可以用来清除浮动
  4. 伪元素或是双伪元素清除法

.clearfix:before, .clearfix:after {
    /*清除浮动,最好最标准的写法*/
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/
}

1.7  定位的元素的层级

如果只给一个元素绝对定位,而不写trbl值的话,会以原位显示

定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素,在同一个位置的话,后面的元素默认会压住前面的元素。如果同样是定位了的元素,默认他们的层级都是0,只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上,这个时候就需要改变层级的关系,用z-index来改变。

z-index的取值范围0---9999999,最好是正数,尽量不要用负数。

1.8  列表

ul   li      unordered   list     无序列表

ol   li      ordered   list  有序列表

dl  dt  dd

dl:     difinition     list     定义列表

dt     difinition      title 标题

dd      difinition    description      定义描述

昨日单词:

storm: 风暴,暴风雨    fore: 以前的,前部   banner:横幅,旗帜,标语

sprite:精灵

今日单词:

slogan: 标语,口号   difinition:定义    description:描述

coverage: 范围   copyright:版权,注作权

时间: 2024-08-10 07:32:45

前端基础02的相关文章

前端基础02 CSS

CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style="color: red">Hello world.</p> 内部样式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <meta charset="UTF-8"> <

小白之Python-基础中的基础02

Python-基础中的基础02 继续整理笔记,反复练习!fighting! -----------------华丽的分界线-------------变量:第一次出现叫做定义变量,再次出现为为该变量赋值>>>money=3.5  #定义money变量>>>money=4.5 >>>money=3.5 #定义money变量 >>>money=4.5 #为money变量重新赋值 >>>print money #打印mone

前端基础知识

1.了解web前端基础 (1) 网页介绍 组成: 文字,图片,按钮,输入框,视频等等元素组成的 (2)web标准 :制作网页的规范 a.结构标准(HTML) b.表现标准(CSS) c.行为标准(JavaScript) 2.浏览器 谷歌    内核 :blink IE(高版本) 内核:trident 苹果浏览器: 内核webkit 欧鹏  内核: Presto  现在用的是webkit 火狐  内核: gecko 3.HEML(Hyper Text markup Language) 超级文本标记

Linux命令工具基础02 文件及目录管理

文件及目录管理 文件管理不外乎文件或目录的创建.删除.查询.移动,有mkdir/rm/mv 文件查询是重点,用find来进行查询:find的参数丰富,也非常强大: 查看文件内容是个大的话题,文本的处理有太多的工具供我们使用,在本章中只是点到即止,后面会有专门的一章来介绍文本的处理工具: 有时候,需要给文件创建一个别名,我们需要用到ln,使用这个别名和使用原文件是相同的效果: 创建和删除 创建:mkdir 删除:rm 删除非空目录:rm -rf file目录 删除日志 $rm *log 等价: $

html css 前端基础 学习方法及经验分享

前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于基础语法 对于基础语法,此处不做讲解,有需要的同学可以在w3cschool.w3school.慕课网等等进行学习.如果是刚开始接触前端,不建议通过书籍进行学习,第一是因为书籍里面有的知识可能过于陈旧,已经在新版本中被废弃,第二是因为书籍里面知识体系十分全面,很多知识可能比较难理解,且平时做项目会很少

java基础学习05(面向对象基础02)

面向对象基础02 实现的目标 1.String类的使用 2.掌握this关键字的使用3.掌握static关键字的使用 String类 实例化String对象一个字符串就是一个String类的匿名对象,就是已经开辟了堆内存空间的并可以直接使用的对象.1.采用直接赋值的方式进行操作. String name = "zhangsan"; 使用这种方式,如果一个字符串已经被一个名称所引用,则以后再有相同的字符串声明时,就不会再开辟内存空间.2.直接调用String类的构造方法(public S

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

C#语言基础02

字符串:string s="ab";string s1="a\nb";//n:newline或者next的意思. string s="a\\b"; string s="c:\\temp\\fasdf\\dd\\aaa\\1.jpg";stirng s="\\\\"; string [email protected]"\\\\"; //前边加@代表不把\当成转义字符.string [ema

【C++基础 02】深拷贝和浅拷贝

我的主题是,每天积累一点点. =========================================== 在类定义中,如果没有提供自己的拷贝构造函数,则C++提供一个默认拷贝构造函数. C++提供的默认拷贝构造函数的工作方法是:完成一个成员一个成员的拷贝.如果成员是类对象,则条用其拷贝构造函数或者默认拷贝构造函数. 简单的自定义拷贝构造函数: class Student{ public: //拷贝构造函数 Student(Student& s) { a = s.a; } protec