文章目录

• 网页布局实战
• • 一 CSS选择器
  • • a.基本选择器
    • • 1.元素选择器
      • 2.类选择器
      • 3.id选择器
    • b.复杂选择器
    • c 伪选择器
    • d 伪元素选择器
  • 二 CSS常用样式
  • • 1.文本相关属性
    • 2.背景属性
    • • 1)背景颜色
      • 2)背景图片
      • 3)背景平铺
      • 4)背景位置
      • 5)设置背景图片大小：
      • 6)background 背景复合属性
  • 案例1
  • 案例2
  • 案例3
  • 案例4-贯穿项目

网页布局实战

一 CSS选择器

a.基本选择器

1.元素选择器

        
我是一个div

我是一个div
我是一个span百度

2.类选择器

3.id选择器

div一
div二

b.复杂选择器

1 并列声明

		
我是一个div
我是一个span

2 后代选择器

 h1 span {color:red;}只要em元素是h1的后代，都会被选中

		
我是一个div
我是一个span
我是div外面的span

3 子元素选择器

只找指定元素下面儿子，不会继续往下找

345
123
455

4 相连兄弟选择器(扩展)

123
456

选中第二个div

div:net-child(2){}
//必须往后找  123
.box1 + div + div{}

5 属性选择器

这个属性可以是用户自定义属性，也可以标签默认官方属性

345
123
455
div
div
div3

6 特殊选择器*

• 匹配所有元素

c 伪选择器

语法: 选择器:伪类名 {}

百度一下

d 伪元素选择器

提供两个比较重要的选择器

after：给指定的元素内部最后面增加内容

brefore：给指定元素内部最前面增加内容

.clearfix::after{content:"";display:block;clear:both
}

以前语法是必须用：：表示伪元素，现在可以用：来表示

一般为了区分：采用两个冒号表示伪类

二 CSS常用样式

1.文本相关属性

2.背景属性

1)背景颜色

​ background-color:red | #ffdd00 | rgb(222,100,0) | rgba(255,255,255,0.4)

2)背景图片

​ background-image:url(“路径”)

3)背景平铺

​ background-repeat:repeat|no-repeat|repeat-x|repeat-y
​ 重复 不重复 横向重复 纵向重复

4)背景位置

​ background-position：横向 纵向
​ 取值：包含两个，横向位置 纵向位置
​ 示例：
​ 百分比： 50% 50%
​ 固定名称：left center right top bottom
​ 像素：20px 100px

5)设置背景图片大小：

background-size：

contain:图片会放大或者缩小，当一变铺满了这个屏幕。另外一边留白

cover：等比列放大图片，直到盒子被铺满才停下来

你也可以手动设置图片尺寸

6)background 背景复合属性

​ background:颜色 图片 重复 定位;

说明：以后我们用背景都可以只用一条数属性：background

案例1

画两个宽高均为200px的div矩形,描出border.

1.两个div上下摆放,留出间距25px.

2.两个div左右摆放,留出间距25px.

3.删除一个div,另一个div水平居中摆放.

4.在该div中写"蜗牛"字样,要求相对于div水平居中.

5.在该div中写一段文字 :

-“蜗牛提倡项目驱动和例子驱动,学员工作能力强,更受企业欢迎.”

案例2

案例3

案例4-贯穿项目