目录
<li>标签
去掉<li>前面的项目符号(小圆点)
语法:
list-style : none;
圆角边框
在css3中,新增了圆角边框的样式,这样我们的盒子就可以变圆角了。
语法:
boder-radius:length;
radius 半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
圆形的做法:
border-radius 数值是正方形直径的一半
boder-radius :100px(正方形直径是200px);
或者:
boder-radius:50%;
圆角矩形的话,设置为高度的一半。
简写属性:可以跟四个值,分别代表左上角、右上角、右下角、左下角。
分开写:boder-top-left-radius(左上角)、boder-top-right-radius(右上角)、boder-bottom-right-radius(右下角)、boder-left-bottom-radius(左下角)。
盒子阴影:
我们可以使用box-shadow属性为盒子添加阴影
语法:
box-shadow:h-shadow v-shadow blur spread color inset;
注意:
1.默认的是外阴影(outset) ,但是不可以写这个单词,否则导致阴影无效
2.盒子阴影不占用空间,不会影响其他盒子排列
文字阴影
我们可以使用text- shadow属性将阴影应用于文本
语法:
text-shadow:h-shadow v-shadow blur color;
css浮动
浮动(float)
传统网页布局的三种方式
网页布局的本质——用css来摆放盒子,把盒子摆放到相应位置。
css中提供了三种传统布局方式(简单说,就是盒子如何进行排序顺序):
①普通流
②浮动
③定位
1.标准流:
就是标签按照规定好默认方式排列,标准流是最基本的布局方式。
<1>块级元素会独占一行,从上向下顺序排列。(例如div、hr、p、h1~h6、ul、ol、from、table)
<2>行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。(例如:span、a、i、em等)
为什么需要使用浮动?
有很多布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
浮动最经典的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
什么是浮动?
float属性用于创建浮动框,将其移动到一边,直到左边元或有边缘触及包含块或另一个浮动框的边缘。
语法:
选择器 {folat:属性值;}
浮动特点(重点)
加了浮动之后的元素,会具有很多特性:
1.浮动元素会脱离标准流(脱标),浮动的盒子不再保留原先的位置。
2.浮动的元素会一行内显示并且元素顶部对齐
(如果多个盒子都设置了浮动,则他们会按照属性值,一行内显示并且顶端对齐排列)
注意:浮动的元素是是相互贴靠在一起的,不会有缝隙,如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐) 浮动的盒子不会有外边距合并的问题
3.浮动的元素会具有行内块元素的特性
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置,我们网页布局一般采取的策略是:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则。
浮动布局注意点:
1.浮动和标准流的父盒子搭配(先用标准流的父元素)
2.一个元素浮动了。理论上其余的兄弟元素也要浮动(一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题)。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
清除浮动
由于父级盒子很多情况下,不方便给发高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。
清除浮动的本质:
·清除浮动的本质是清除浮动元素造成的影响
·如果父盒子本身有高度,则不需要清除浮动
·清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了。
语法:
选择器 { clear : 属性值;}
我们的实际工作中,几乎只使用 clear:both;
清除浮动的策略:闭合浮动。
清除浮动的方法:
1.额外标签法也称为隔墙法,是w3c推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签,例如<dig style="clear:both"></div>,或者其他标签如<br/>等
优点:通俗易懂
缺点:添加许多无意义的标签,结构化较差
注意:新添加的空标签必须是块级元素
2.父级添加overflow属性
将其属性值设置为hidden、auto或scroll,单词本身的意为溢出隐藏
优点:代码简介
缺点:无法显示溢出的部分
3.父级添加after伪元素(把后门堵起来)
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
优点:没有增加标签
缺点:照顾低版本浏览器
代表网站:百度、淘宝网、网易
4.父级添加双伪元素(把前、后门都堵起来)
优点:代码更简洁
缺点:照顾低版本浏览器
代表网站:小米、腾讯等
清除浮动总结:
网站书写准备工作:
采用结构与样式相分离思想
1.创建study目录文件夹(用于存放页面的所有内容)
2.用vscode打开这个文件夹
3.study目录内新建images文件夹,用于存放图片
4新建首页文件夹index.html
5.新建style.css样式文件,采用外链样式式
6.<link rel="stylesheet" href="style.css">
7.样式表写入清除内边距的样式,来检测样式表是否引入成功。
* {
margin:0;
padding:0;
}
css属性书写顺序:
1.布局定位属性:display/position/float/clear/visibility/overflow(建议display第一个写)
2.自身属性:width/height/margin/padding-border/background
3.文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break
word
4.其他属性(css3):content/cursor/border-radius/box-shadow/text-shadow/background:lineear-gradient...
例如:
页面布局整体思路:
1.确定页面的版心(可视区),测量可知
2.分析页面中的行模块,以及每个行模块中的列模块。其中的页面布局第一准则。
3.一行中的列模块经常浮动,先确定每个列的大小,之后确定列的位置,页面布局第二准则
4.制作html结构。我们还是遵循,现有结构,后有样式的准则
5.所以,先清楚布局结构,再写代码
导航栏:
实际开发中,我们不会直接用链接a而是用li包含链接(li+a)的做法
1.li+a语义更清晰
2.如果直接使用a,搜索引擎容易辨别为有堆砌关键字嫌疑
注意:
1.让导航栏一行显示,给li加浮动,因为li是块级元素,需要一行显示.
2.这个nav导航栏可以不给宽度,将来可以继续添加其余文字.
3.因为导航栏里面文字不一样多,所以最好给链接a左右padding撑开盒子,而不是指定宽度.
搜索框search
按钮button
按钮button默认有个边框需要我们手动去掉
border:0;
注意:
input表单元素和button都属于行内块元素,行内块元素之间默认会有缝隙
解决方法:加浮动,浮动的两个盒子是没有缝隙的.