浮动的清除:clear:left、right、both定位有四种,分别是静态定位、相对定位、绝对定位、固定定位。静态定位:所谓的静态定位就是按照标准流中出现的顺序依次格式化相对定位:就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:1) 微调元素2) 做绝对定位的参考,子绝...
1 样式表 内联样式表 内嵌样式表 外部样式表2 选择器 标签选择器 <style type="text\css" class 选择器 以.开头 ID选择器 以#开头 复合选择器 1 以,隔开的 表示并列 2 用空格隔开的 表示后代 .class p /*找到使用的.class的标签,在该标签中的p标签使用该样式*/ 3 用.隔开的 表示筛选 p sp /*在标签p中的“class="‘sp” 使用该样式*/ 格式与布局 1 position...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">body,div{margin:0;padding:0;}#main{border:1px solid blue;width:500px;height:500px;margin:100px auto;position:rel...
.bottom-pay__tips {width: 100%; //默认百分百height: 22px;font-size: 14px; font-weight: 400;color: #333333;line-height: 22px; //备注:如果使用flex 的话,默认会 根据内部的font-size默认的 进行自动line-height, 会和UI图产生一点点的差距display: flex;align-items: center;.tip-img {display: flex;justify-content: center;align-items: center;margin-right: 5px;img {width: 100%;height: 100%;}}
}解决措施 1....
一、display(元素显示模式) display属性用来设置元素的显示方式。如果display设置为none,float及position属性定义将生效。 语法:display: block | none | inline | inline-block 1)block:块对象值的是元素显示为一个方块,默认显示状态下将占据整行,其它元素只能另起一行显示。(块元素) 2)inline:行间对象与block刚好相反,它允许其它元素在同一行显示。(内联元素) 3)inline-block:指定对象...
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。 CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。在网页中,元素有三种布局模型:1、流动模型(Flow)2、浮动模型 (Float)3、层模型(Layer)1.流动模型流动(Flow)是默认的网页布局模式。也就是说...
css3的新特性响应式布局,通过@media screen and (min-width: ) and (max-width: ) {};来实现页面的响应式设计,来适应不同的终端。需在头部添加:<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">。1.适应手机端: 例如: @media screen and (max-width:414px ) {调整CSS的样式};适应iPhone 6 Plus的手机尺寸,想要适应其他手机屏幕需要调(max-width:)与(min-w...
在开发中,我们经常需要使用到三列布局,即左右元素宽度固定,中间元素自适应。废话不多说,直接上代码:<div class="box"><div class="left"></div><div class="center"></div><div class="right"></div></div><style>
.box{display: flex;height: 60px;width: 100%;background-color: red;}
.center{flex: 1;background-color: yellow;}
.left,.right{width: 60px;background-color: pink;}</style> 相比较之前使用的的浮动(flo...
一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字。让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩。一、文字样式 文字样式主要包括文字的大小、颜色、字体等,具体包括如下写一个小例子,综合运用上述所有的文字效果样式:代码:<html>
<head><title>文字字体</title>
<style>
body{b...
用flex实现css里的三大经典布局,不需要额外很多代码。1,垂直居中 :子元素在父元素中,水平垂直居中。justify-content:center设置水平方向居中,align-center设置垂直方向居中。<div id="parent"><div id="child"></div></div>#parent {
/* align-content和align-items必须配合使用 */display: flex;justify-content: center;align-content: center;align-items: center;width: 300px;height: 300px;outline: solid 1px;}#child ...
4. 背景布局(1)background基本语法background : background-color || background-image || background-repeat || background-attachment || background-position 语法取值该属性是复合属性。请参阅各参数对应的属性。
默认值为:transparent none repeat scroll 0% 0%。使用说明设置对象的背景样式。如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。例如:设置 background : white 等...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试box-sizing</title><style>html, body, div {margin: 0;padding: 0;}#main {width: 100%;overflow: hidden;}#left {float: left;width: 10%;margin-bottom: -1000px;padding-bottom: 1000px;background: red;}#right {float: left;margin-bottom: -1000px;padding-bottom: 1000px;background: yellow;}</style></head><body><div id="main"><div id="left"...
代码: 1<!-- 1 float --> 2<h3 class="block">第一种方法-float</h3> 3<div class="tips"> 4<h4 class="tips-info">关键点</h4> 5<ol> 6<li>结构顺序:左,中,右</li> 7<li>中间盒模型的margin-left、margin-right分别是左右盒模型的宽度、障眼法:中间盒模型使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。</li> 8<li>注意,结构上,左边盒模型、右边盒模型、中间盒模型</li> 9</ol> 10</div> 1...
我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对它的视觉效果作过多的讨论,我们今天说说如何用DIV+CSS实现三行两列的布局。我们看下面的图片:这样的结构大家再熟悉不过了,我们该如何用DIV+CSS实现它呢。我们看下面的分析图片:它们相对应的关系如下: Example Source ...
实现效果:500 Internal Server Error(图片为效果图:上——左右——下)代码:<!DOCTYPE html>
<html>
<head>
<!--或者利用DW里面的母版-->
<style type="text/css"> *{
margin:0;
padding:0;}
#container
{
width:70%;
background-color:Red;
margin:0px auto;
}
#container #header
{
height:150px;
...