圆角边框

盒子阴影

文字阴影

传统网页布局的三种方式

浮动

浮动特性

浮动元素经常和标准流父级搭配使用

常见的网页布局案例

浮动布局注意点

圆角边框

语法：border-radius: 半径;

radius是圆的半径

参数值可以是精确数值或百分比 50%为宽度和高度的一半

可以设置不同的圆角

border-radius: 10px 20px 30px 40px; 左上右上右下左下顺时针

两个值是对角线 10px 20px 左上右下是10 右上左下是20

三个数值左上右上左下右下

也可以单独设置 border-top（bottom）-left（right）-radius

top和left不能颠倒

盒子阴影

box-shadow: h-shadow v-shadow blur spread color (inset)

h-shadow 必需水平阴影允许负值

v-shadow 必需垂直阴影允许负值

blur 可选模糊距离

spread 可选阴影尺寸

color 可选阴影颜色

inset 可选将外部阴影改为内部阴影 (不可以写outset）

影子不占用盒子空间

鼠标悬停显示阴影用 div:hover

    <style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); *//* 水平 垂直 模糊 尺寸 颜色 */}div:hover {box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);}</style>

文字阴影

text-shadow: h-shadow v-shadow blur color

传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应的位置

标准流（普通流）：标签按照规定好的默认方式排列

块级元素独占一行从上向下顺序排列：div hr p h1-h6 ul ol dl form table
行内元素从左到右顺序排列，碰到父元素边缘则自动换行：span a i em等

浮动
定位

浮动

浮动可以改变元素标签默认的排列方式

可以让多个块级元素一行内排列显示

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动的边缘

float：

none 不浮动

left向左浮动

right向右浮动

浮动特性

浮动元素会脱离标准流（脱标）的控制，移动到指定位置，浮动的盒子不再保留原先的位置
浮动元素会在一行内显示并且元素顶部对齐（装不下会另起一行）
浮动的元素会具有行内块元素的特性（行内元素加了浮动就有宽高了）

块级元素不定义宽度默认和父元素一样宽，但如果加了浮动，宽度由内容决定

浮动的盒子中间是没有缝隙的是紧挨着一起的

行内元素同理

浮动元素经常和标准流父级搭配使用

为了约束浮动元素的位置，网页布局一般采取的策略是

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

常见的网页布局案例

包含通栏

<!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>Document</title><style>* {margin: 0;padding: 0;}.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {width: 980px;margin: 0 auto;height: 300px;}.box li {width: 237px;height: 300px;background-color: gray;float: left;margin-right: 10px;}.box .last {margin-right: 0;}li {list-style: none;}.footer {height: 200px;background-color: gray;margin-top: 10px;}</style>
</head><body><div class="top"></div><div class="banner"></div><div class="box"><ul><li></li><li></li><li></li><li class="last"></li></ul></div><div class="footer"></div>
</body></html>

浮动布局注意点

浮动和标准流父元素搭配使用：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其他的兄弟元素也要浮动，浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

CSS / 圆角边框+阴影+浮动相关推荐

html 中圆角怎么写,css圆角边框代码怎么写？（代码示例）
本篇文章主要给大家介绍css边框效果怎么实现的. css圆角边框代码具体示例如下: css圆角边框代码实例 div { color: white; text-align:center; border: ...
html的边框阴影的代码是什么,CSS中边框阴影（box-shadow）的实现方法介绍（代码示例）...
本篇文章分享的内容是CSS实现边框阴影的方法,内容很详细,有需要的朋友可以参考一下. 我们为边框添加阴影需要的是box-shadow属性,下面我们来看看box-shadow属性有哪些语法格式 box- ...
ie8浏览器html圆角问题,css圆角和阴影兼容问题（ie7,ie8）
Document .box { background-color: #f0f0f0; width: 740px; height: 40px; border: 1px solid #d7d7d7; -m ...
css圆角边框怎么设置
css+div是页面设计的法宝,通过css+div能够设计出各种效果!本文给大家简单介绍下css圆角边框怎么设置,大家可以参考,也可以直接拿过去使用,当然要修改下具体的参数. border-radiu ...
CSS圆角边框、盒子阴影、文字阴影（01-07课）
01.综合案例-快报模块布局分析 1.大盒子div 2.分2个小盒子(上盒子为标题h,下盒子为列表(无序列表)) 02.03.04.综合案例-快报制作 1.头部制作 2.快报模块列表制作代码: &l ...
CSS圆角边框和盒子阴影
圆角边框 1.圆形语法 border-radius:length; 方法:让一个正方形变成圆圈 div {width: 200px;height: 200px;background-color: p ...
CSS圆角边框-盒子阴影-文字阴影
圆角边框 border-radius: 10px; radius半径原理:(椭)圆与边框的交集形成圆角效果. 参数值可以是数值或百分比形式: 如果是正方形,想要设置一个圆,把数值改为高度或宽度的一半, ...
CSS圆角边框、盒子阴影及文字阴影详解
文章目录 1. 圆角边框 2. 盒子阴影 3. 文字阴影 1. 圆角边框在CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的外边框圆角. ...
CSS圆角边框和阴影
圆角边框 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...

CSS / 圆角边框+阴影+浮动

圆角边框

盒子阴影

文字阴影

传统网页布局的三种方式

浮动

浮动特性

浮动元素经常和标准流父级搭配使用

常见的网页布局案例

浮动布局注意点

CSS / 圆角边框+阴影+浮动相关推荐

最新文章

热门文章