当前位置:首页 > 前端技术 > HTML&CSS--使用CSS完成页面布局及排版(附案例代码)

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

2022年09月16日 13:23:40前端技术4

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-color pink
background-image url(“图片地址”)、linear-gradient(pink red)、radial-gradient(pink red)
background-size contain、cover、100px 200px(等比例缩放)
background-position center、bottom right、50px 100px(固定位置)
background-repeat repeat、repeat-x、repeat-Y、no-repeat
background-origin border-box、padding-box
background-clip border-box、padding-box

文本规则

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

属性 属性值
text-align center 、left、right
vertical-align middle 、top、bottom
text-indent 2em
line-height 32px
text-transform lowercase、uppercase、capitalize
text-decoration underline、light-through、overline、none
text-decoration-color pink
text-decoration-style solid、dotted、dashed
overflow visible 、hidden、scroll

字体规则

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

属性 属性值
font-family ‘Microsoft YaHei’,‘微软雅黑’,‘宋体’
font-size 12px
font-weight normal、bold
font-style normal、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>

其他规则

属性 属性值
display block、inline、inline-block
list-style none
border-collapse collapse
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-duration 10s、10000ms
animation-delay 10s、10000ms
animation-timing-function linear、steps、ease、ease-in…
animation-direction alternate、reverse、alternate-reverse
animation-iteration-count infinite、n
animation-fill-mode forwards、backwards、both
animation-play-state paused

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

  • 加强服务器
  • 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-property all
transition-duration 2s
transition-timing-function linear、steps()、ease
transition-delay 0s

过渡的实现:

.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代替

作者:心。晴
来源链接:https://blog.csdn.net/jingjing217/article/details/107818657

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/41949.html

标签: css
分享给朋友:

“HTML&CSS--使用CSS完成页面布局及排版(附案例代码)” 的相关文章

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

HTML的一些常用的标签和部分css知识

HTML的一些常用的标签和部分css知识

一.form标签的注意事项 form为表单标签,属性有action和method。 action为表单提交的路径,method为表单 的提交方式。表单有九种提交请求,常用 的有两种,今天就介绍常用的两种请求get和 post。 1.get请求...

用HTML5/CSS3/JS开发Android/IOS应用

用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。  在...

HTML中的form表单的标签、属性、属性值;  CSS以及HTML5新增属性、属性值

HTML中的form表单的标签、属性、属性值; CSS以及HTML5新增属性、属性值

form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是...

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。