css

推荐的样式编写顺序:

  1. Positioning:定位
  2. Box model:盒子模型、大小等
  3. Typographic:文字系列、排印等
  4. Visual:可视化、背景等
  5. Misc:其它混杂模式

居中

垂直居中,设置line-height

水平方向 text-align

flex 弹性盒子

其实就是一个百分比布局,使用这个的时候,子元素的宽高会受限制于弹性盒子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.flex-container {
display: -webkit-flex;/*谷歌浏览器内核*/
display: flex;
width: 500px;
height: 250px;
background-color: lightgrey;
} .flex-item {
background-color: cornflowerblue;
width: 350px;/*这里其实是无效的,具体的宽度得看父布局,子控件将平分父布局的宽度平分*/
height: 100px;
margin: 10px;
}
</style>
</head>
<body> <div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div> </body>
</html>

设置背景为图片的一部分

background-image:url() -140px 0px;

计算机中,左上角为原点,x正方向是右,y轴正方向是下

图片偏移设置背景 -140 以html底部作为参考物,图片自身向左移动,所以是负的

鼠标滑过更改样式

:hover也是属于css选择器中的一种,鼠标悬浮在元素上,元素的样式,可以使用这个来达到鼠标滑动改变样式的效果

“>” 代表着是只选择子代元素,而空格则代表选中后代元素

  • a:link {color: #FF0000} /* 未访问的链接 */
  • a:visited {color: #00FF00} /* 已访问的链接 */
  • a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
  • a:active {color: #0000FF} /* 选定的链接 */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.nav ul{
display: flex;
flex-direction: row; /* 盒子内元素的排列方向 */
padding-left: 100px;
list-style: none;
}
<!-- “>” 代表着是只选择子代元素,而空格则代表选中后代元素 -->
.nav ul > li:hover{
border-left: 1px solid #F27B04;
border-top: 1px solid #F27B04;
border-right: 1px solid #F27B04;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: pointer;
}
</style>
</head> <body>
<div class="nav">
<ul>
<li>首页</li>
<li>女人</li>
<li>箱包</li>
<li>美容</li>
<li>男人</li>
<li>运动</li>
<li>数码</li>
<li>热销榜</li>
<li>婚庆</li>
<li>户外</li>
<li>美食</li>
</ul> </div>
</body>
</html>

float 浮动与clear

使用此样式的元素需要设置宽度,否则,它们会尽可能地窄。

使用float浮动,会影响到其他的元素,所以使用clear属性

clear可以both,left,right

both两边都不能出现浮动元素,left是左边不能出现浮动元素,right是右边不能出现浮动元素

下面的效果链接中的.text_line如果没有clear属性,文字就会挤在尾部,宽度不够大的话,文字还会变成竖排

float效果链接

例子1:竖排三个div

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ff</title>
</head>
<body>
<style type="text/css">
.left_body{
width: 200px;
height: 200px;
}
</style>
<div id="con">
<div class="left_body" style="background: red;"></div>
<div class="left_body" style="background: beige;"></div>
<div class="left_body" style="background: #008000;"></div>
</div>
</body>
</html>

例子2:使用float,水平排列div

如果宽度不够的话,会自动换行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ff</title>
</head>
<body>
<style type="text/css">
.left_body{
width: 200px;
height: 200px;
float: left;
} </style>
<div id="con">
<div class="left_body" style="background: red;"></div>
<div class="left_body" style="background: beige;"></div>
<div class="left_body" style="background: #008000;"></div> </div>
</body>
</html>

例子3:外层div包含浮动元素(使用clear)

修改外层div的位置,浮动元素的位置也会随之改变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ff</title>
</head>
<body>
<style type="text/css">
.left_body{
width: 200px;
height: 200px;
float: left;
}
#con{
border: 1px solid #0000FF;
}
.clearfix{
clear: both;
}
</style>
<div id="con">
<div class="left_body" style="background: red;"></div>
<!-- 如果在这里加一个下面的注释的div,可以达到换行的效果 -->
<!--<div class="clearfix"></div> -->
<div class="left_body" style="background: beige;"></div>
<div class="left_body" style="background: #008000;"></div>
<div class="clearfix"></div>
</div>
</body>
</html>

例子4:外层div包含浮动元素(外层div也设置为float)

修改外层div的位置,浮动元素的位置也会随之改变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ff</title>
</head>
<body>
<style type="text/css">
.left_body{
width: 200px;
height: 200px;
float: left;
}
#con{
border: 1px solid #0000FF;
float:left;
} </style>
<div id="con">
<div class="left_body" style="background: red;"></div>
<div class="left_body" style="background: beige;"></div>
<div class="left_body" style="background: #008000;"></div>
</div>
</body>
</html>

Web前端——css的更多相关文章

  1. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  2. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  3. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  4. web前端—css面试题

    1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...

  5. Bootstrap 简介(Web前端CSS框架)

    目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Tw ...

  6. Bootstrap(Web前端CSS框架)

    官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile fi ...

  7. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  8. web前端——CSS详解

    简介 CSS(Casading Style Sheet)是一组HTML元素外观的设置规则,用于控制web页面的表现形式,一般被翻译为"级联样式表"或"层叠样式表" ...

  9. Web前端 css实现元素垂直居中的常用方法

    方法1:table-cell html结构: 1 2 3 <div class="box box1">         <span>垂直居中</spa ...

  10. [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法

    讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么?  列出display的值,说明他们的作用.position的值, relative和absolu ...

随机推荐

  1. C++ std::array 基本用法

    #include <iostream> #include <string> #include <array> using namespace std; // htt ...

  2. docker面试题和解答(一)

    什么Docker Docker是一个容器化平台,它以容器的形式将您的应用程序及其所有依赖项打包在一起,以确保您的应用程序在任何环境中无缝运行. Docker与虚拟机有何不同 Docker不是虚拟化方法 ...

  3. java之父类中的构造器是否能被子类继承?

    子类默认继承父类的属性和方法,但不会继承父类的构造器,而是在子类被实例化时会默认调用父类的空构造器.子类在创建的时候会调用自己的空构造器,并在空构造器会隐式调用super(),即父类的空构造器.如果父 ...

  4. DBCC TRACEON - 跟踪标志 (Transact-SQL)

    跟踪标志用于设置特定服务器特征或更改特定行为. 例如,跟踪标志 3226 是一种常用的启动跟踪标志,可取消显示错误日志中的成功备份消息. 跟踪标志经常用于诊断性能问题或调试存储过程或复杂的计算机系统, ...

  5. 经验之谈-switch结构常见错误的分析与处理

    1.缺少break语句 本来只想输出“出任武林盟主”可输出结果为 错误分析:在 switch结构中,每一个case语句块后面如果不写 break语句, switch就会 直接往下面的case语句块运行 ...

  6. PHP+jQuery开发简单的翻牌抽奖实例

    PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...

  7. OSI参考模型总结

    OSI(Open System Interconnect),即开放式系统互联. 一般都叫OSI参考模型,是ISO(国际标准化组织)组织在1985年研究的网络互连模型.下面我们将一层一层的看OSI协议. ...

  8. 如何通过RMAN使用传输表空间迁移到不同的Endian平台 (Doc ID 371556.1)

    How to Migrate to different Endian Platform Using Transportable Tablespaces With RMAN (Doc ID 371556 ...

  9. Scrapy安装和简单使用

    模块安装 Windows 安装scrapy 需要安装依赖环境twisted,twisted又需要安装C++的依赖环境 pip install scrapy  时 如果出现twisted错误 在http ...

  10. macOS 10.15 开启 HiDPI

    普通的显示,接上 MacBook 发现原生的分辨率设置在 2K 显示器上字体很小,换成 1080P 分辨率显示效果又特别模糊.下面介绍MacBook强行开启 HiDPI. 什么是 HiDPI 它使用横 ...