HTML&CSS--使用CSS完成页面布局及排版(附案例代码)

CSS简介

CSS (Cascading Style Sheets) 层叠样式表,是一个用于修饰文档的语言,可以将文档以更优雅的形式呈现给用户。

在html中引入css

1、将css规则直接填写在style属性中

<div class="box" style="height: 2000px; background-color: palegreen;"></div>

2、将样式嵌入到style标签

<style>
	.box {
		height: 2000px;
		background-color: palegreen;
	}
</style>

3、将样式写在.css文件中,再通过link将这个文件引入到html中

<link rel="stylesheet" href="../样式.css">

CSS选择器

核心选择器

选择器实例
标签选择器div{ }
类选择器.nav{ }
id选择器#id{ }
组合选择器body , ul { }
并且选择器ul.nav { }
普遍选择器*

层次选择器

选择器实例
父子选择器.nav > li { }
后代选择器.right_nav li {}
下一个兄弟选择器ul>li.one + li
之后所有兄弟选择器ul>li.one ~ li

伪类选择器(过滤器)

  • 与状态相关
选择器含义
:link没有被点击之前
:hover鼠标悬浮之后
:active被激活
:visited已访问过
  • 与子元素相关
选择器含义
:first-child第一个孩子
:last-child最后一个孩子
:nth-child(n) (n的取值:数字、公式、关键字even,odd)第n个孩子

伪元素选择器

选择器含义
::after在元素之前
::before在元素之后
::first-letter选中文本中第一个字符
::first-line选中第一行

属性选择器

选择器含义
[name]选择具有name属性的元素
[name~=u]选择具有name属性,并且属性值之一为u的元素
[name=username]选择具有name属性,并且属性值为username的元素
[name^=u]选择具有name属性,并且属性值以u开头的元素
[name$=u]选择具有name属性,并且属性值以u结尾的元素
[name*=u]选择具有name属性,并且属性值包含u的元素

优先级

特权:!important

权值:

  • 行内样式:1000
  • #id:100
  • .class类 、伪类:10
  • 元素、伪对象:1

盒子样式

针对于块元素讨论盒子样式

基本概念
边框border:1px solid #ccc;
外边距margin=10px;
内边距padding=10px;
宽度width:100px;
高度height:100px;

盒子模型:

怪异盒模型传统盒子模型
box-sizing:border-box;box-sizing:content-box;
盒子所占的宽度 = width(包含了border + padding + 内容实际宽)盒子所占的宽度 = border + padding + width

怪异盒模型的使用:呼吸灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸灯</title>
    <style>
        .outer ,.inner {
            border: 2px solid #cccccc;
            border-radius: 50%;
        }
        .outer {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            padding: 20px;
        }
        .outer:hover {
            padding: 40px;
        }
        .outer > .inner {
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

背景规则

属性属性值
background-colorpink
background-imageurl(“图片地址”)、linear-gradient(pink red)、radial-gradient(pink red)
background-sizecontain、cover、100px 200px(等比例缩放)
background-positioncenter、bottom right、50px 100px(固定位置)
background-repeatrepeat、repeat-x、repeat-Y、no-repeat
background-originborder-box、padding-box
background-clipborder-box、padding-box

文本规则

修饰文本样式,具有可继承性

属性属性值
text-aligncenter 、left、right
vertical-alignmiddle 、top、bottom
text-indent2em
line-height32px
text-transformlowercase、uppercase、capitalize
text-decorationunderline、light-through、overline、none
text-decoration-colorpink
text-decoration-stylesolid、dotted、dashed
overflowvisible 、hidden、scroll

字体规则

修饰字体本身样式,具有可继承性

属性属性值
font-family‘Microsoft YaHei’,‘微软雅黑’,‘宋体’
font-size12px
font-weightnormal、bold
font-stylenormal、italic
color#333

网络字体

1、获取字体文体:.woff、.eot、…
2、定义网络字体

@font-face {
	font-family: "iconfont";
	//字体文件
	src: " " 
}

3、 使用

/*基础样式*/
.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
}	
/*特殊样式*/
.icon-aixin:before {
	content: "\e8ab";
}
/*在html中引用*/
<span class="iconfont icon-aixin"><span>

其他规则

属性属性值
displayblock、inline、inline-block
list-stylenone
border-collapsecollapse
opacity.2

单位

单位属性值
绝对单位10px
相对单位1em(相对于当前元素的字体大小)
1rem(相对于html选择器中设定的字体大小)
颜色关键字:pink
十六进制:#ffffff、#000、#f4f4f4
函数:rgb(114,141,153)
函数:rgba(114,141,153,1)

浮动布局(float)

块元素脱离默认文档流,默认宽度为0,失去了对父元素支撑的能力。在浮动流中,多个同级别浮动元素在一行中显示,当这一行容纳不下,会自动换行。

ul.list > li {
	float:left;
}

清理浮动,为容器内部添加一个子元素,一般使用伪元素较方便。

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

盒子居中。

margin:0 auto;

定位布局(position)

relative(相对定位)

  • 相对点:该元素在文档流中初始的位置
  • 是否脱离文档流:不脱离
  • 最佳实践:一般不移动,作为相对点
.box {
	position: relative;
	left: 100px;
	top: 200px;
}

absolute(绝对定位)

  • 相对点:距离它最近的父定位元素,如果没有父定位元素,就相对于浏览器窗口
  • 是否脱离文档流:脱离
.box{
	position: relative;
}
.box > .box1 {
	position: absolute;
	left: 0;
	top: 0;
}

fixed(固定定位)

  • 相对点:浏览器视口,并且不会随着屏幕的滚动而滚动
  • 是否脱离文档流:脱离
.box{
	position: relative;
}
.box > .box1 {
	position: fixed;
	left: 50%;
    margin-left: -150px;
}

sticky(粘性定位)

  • 结合了相对定位和固定定位功能于一体,达到阈值之后是固定定位
.box {
	float: right;
	position: sticky;
	top: 40px;
}

伸缩盒布局(flex)

作用:与浮动布局类似,用于将一个容器中多个子元素【块元素】在一行中多列排列。常用于响应式布局(移动端)

概念:

  1. 子元素都是沿着主轴来排列的,主轴由flex-direction定义,row-x;column-y
  2. 一般建议给容器添加宽高,子元素在容器中排列
ul{
	display:flex;         			
	flex-direction: row; 			
    flex-wrap: wrap;				
    justify-content: space-around;
}
ul > li{
	flex:1;
}

响应式布局

  • PC端
    • 类似于腾讯视频,容器的宽度随着屏幕的分辨率大小的改变而改变
    • 纯响应式(与mobile兼容),完全兼容移动的设备
  • mobile端
    • 不要给容器【块元素】指定宽度,让他默认为100%,因为手机型号不同,宽度不同
    • 子元素【列元素】宽度使用相对单位,百分数

栅格布局(bootstrap)

多页面程序:(jquery + bootstrap)

单页面程序:教务系统(vue vuex vueRouter elementui【组件库】)

bootstrap:

  • 全局样式的重置
  • 布局规则:栅格系统
  • 样式:表格、列表、表单…
  • 组件:模态框、轮播图、轮子(框架)

bootstrap3 :栅格布局使用float

bootstrap4 :栅格布局使用flex

布局的使用:引用bootstrap.css【cdn】链接:https://cdnjs.com/

动画(animation)

关键帧定义

@keyframes 动画名称 {
	from{ 
		margin-left: 0;
	}
	to{ 
		margin-left: 100px;
	}
}

动画属性设定

属性属性值
animation-name动画名称
animation-duration10s、10000ms
animation-delay10s、10000ms
animation-timing-functionlinear、steps、ease、ease-in…
animation-directionalternate、reverse、alternate-reverse
animation-iteration-countinfinite、n
animation-fill-modeforwards、backwards、both
animation-play-statepaused

打开动画库网页时可能出现白屏

  • 加强服务器
  • faster mini:图片压缩、图片合并、cdn加速(将库【iconfont、】放到cdn服务器 )

使用动画库

  • 获取cdn连接
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet">
  • 使用class
    • 基础规则:animate__animated
    • 特殊规则:animate__pulse

动画案例的实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猪八戒</title>
    <style>
    	@keyframes move {
            from {
                margin-left: 0;
            }
            to {
                margin-left: -1600px;
            }
        }
        .box {
            width: 200px;
            height: 180px;
            overflow: hidden;
            margin: 100px auto;
        }
        .box > img {
            animation-name: move;
            animation-timing-function: steps(8);
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <img src="../image/猪八戒.png" alt="">
        </div>
    </div>
</body>
</html>

过渡(transition)

过渡属性设定

属性属性值
transition-propertyall
transition-duration2s
transition-timing-functionlinear、steps()、ease
transition-delay0s

过渡的实现:

.box{
	width: 300px;
	height: 300px;
	transition: all 2s linear;
}
.box:hover {
    width: 400px;
}

变形(transform)

变形属性设定

变形属性值
缩放(scale)scale(2)、scale(0.5,2)
旋转( rotate )rotate、rotateX、rotateY(45deg)
倾斜(skew)skew、skewX、skewY(30deg)
移动(translate)translate、translateX、translateY(10px)

变形的实现:

.box:hover > .box1 {
	/*transform-origin 用于指定一个元素变形的原点*/
	transform-origin: top left;
    transform: scale(2);
}  

媒体查询

CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整,媒体查询由两部分组成,一个可选的媒体类型,以及若干个css表达式。当媒体类型判断结果为true的时候,其中的css表达式被解析。如果媒体查询应用在link中,即使判断结果为false,样式表同样会被下载,但是不会应用。

媒体类型介绍
all适用所有的设备
print适用于打印用纸或打印预览视图
screen适用于电脑/手机/平板等智能设备屏幕
speech适用于语音合成器
Tv电视设备

通过以下代码简单认识一下媒体查询是如何进行的。

.products {
	width: 990px;
    margin: 0 auto;
}
.products > ul > li {
    width: 19.5%;
    height: 100px;
}
@media screen and (min-width: 1300px) {
    .products {
    	width: 1200px;
	}
    .products > ul > li {
    	width: 16.5%;
	} 
}
@media screen and (min-width: 1500px) {
    .products {
    	width: 1400px;
    }
    .products > ul > li {
        width: 14%;
    }
}

css3中常用的@语法

@charset:用于提示css文件使用的编码方式,必须在最前面使用

@import:用于引入一个css文件,除了@charset规则不会被引入,可以引入一个文件的全部内容。

@media:能对设备的类型进行一些判断,在media的区块中,是普通规则列表

@page:用于分页媒体访问网页时的表现设置,页面是一种特殊的盒模型结构,除了页面本身,还可以设置它周围的盒。

@counter-style:产生一种数据,用于定义列表项的消息

@key-frames:产生一种数据,用于定义动画关键帧

@fontfacce:定义一种字体,icon-font技术就是利用这个特性实现的

@support:检查环境的特性,它与media类似

@namespace:用于跟xml命名空间配合的一个规则,表示内部的css选择器全都带上特定的命名空间

@viewport:用于设置视口的一些特性,不过兼容性目前不是很好,多数时候被heml的meta代替

  • 1
    点赞
  • 0
    评论
  • 27
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值