Java Web前端三剑客 之 CSS
Posted Perceus
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Java Web前端三剑客 之 CSS相关的知识,希望对你有一定的参考价值。
@TOC
CSS
内部样式表
内部样式表
<style>
p
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
</style>
<p>hello</p
上面的代码,就是最典型的例子。
其中 style 标签的内容,就是一个 CSS的代码。
内联样式
内联样式 / 行内样式表
外部样式
外部样式
<link rel="stytlesheet" herf="test.css">
样式大小写
CSS 是不区分大小写,但是我们开发时统一使用小写。
选择器
选择器的分类
1. 基础选择器
标签选择器
类选择器
这个类选择器,可以说是我们最常使用的一个选择器,而且也是最灵活的。
通过 类选择器,我们可以随心所欲的选择任意想要的元素。
类选择器怎么创建?
id 选择器
id 选择器的用法,和类选择器有点相似。
但是,与类选择器相比,id选择器还是具有一定的局限性。
想要使用 id 选择器,先给被选中的元素,设定一个 id 属性
通配符选择器
通配符选择比较简单,就是一个单单的 * 号
2.复合选择器
后代选择器
后代选择器:
ul .name
color: red;
子代选择器
子代选择器
ul >.name
color: red;
这两个有什么区别?
并集选择器
伪类选择器
比如:链接伪类选择器
我演示两个:
弹性布局 ( flex )
弹性布局,主要是安排页面上的元素的 位置 / 排序方式。
先来看水平方向的布局
举例:
flex 布局中的最常见的三种操作:
基于上述内容,就可以实现一些主流的页面布局效果了
实战
实现一个典型的页面最典型的布局
下面我们就来基于 弹性布局,来实现出这样的一个页面布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于弹性布局: 实现典型的页面结构</title>
</head>
<body>
<style>
*
/* 外边距设置为 0 */
margin: 0;
/* 内边距设置为 0 */
padding: 0;
/* 盒子模型,保证不影响页面排版 */
box-sizing: border-box;
.navigation
/* 宽度设置页面的宽度 */
width: 100%;
/* 高度一般为50px */
height: 50px;
/* 当行背景,取自本题图片城市 */
background-image: url(城市.jpg);
/* 字体颜色 白色 */
color: white;
/* 文本居中 */
text-align: center;
/* 文本垂直居中 */
line-height: 50px;
/* 字体大小:20像素 */
font-size: 20px;
/* 字体样式:楷体 */
font-family: "楷体";
.container
width: 100%;
height: 1000px;
background-image: url(城市.jpg);
/* 字体颜色 白色 */
color: white;
/* 字体大小:20像素 */
font-size: 20px;
/* 字体样式:楷体 */
font-family: "楷体";
display: flex;
justify-content: center;
align-items: center;
.container .left, .container .right
height: 100%;
width: 8%;
background-image: url(海.jpg);
.container .content
height: 100%;
/* 左右边框占16% */
width: 84%;
background-image: url(城市.jpg);
background-size: cover;
</style>
<div class="navigation">导航栏</div>
<div class="container">
<div class="left">
左侧边栏
</div>
<div class="content">
内容区域
</div>
<div class="right">
右侧边栏
</div>
</div>
<div class="footer">
页脚
</div>
</body>
</html>
以上是关于Java Web前端三剑客 之 CSS的主要内容,如果未能解决你的问题,请参考以下文章
Web前端技术--网络三剑客(HTMLCSSJavaScript)什么是新网络三剑客?以及其他前端技术(JQueryVue.js)。