守鹤 - 博客园

2022年3月26日

摘要：盒子阴影 box-shadow：有六个值，分别是 -- 水平距离、垂直距离、模糊半径、扩散半径、颜色、内外阴影。除此之外还可以设置多个阴影，语法是：box-shadow: 阴影1效果, 阴影2效果, 阴影3效果; 多个阴影之间用英文逗号隔开 <!DOCTYPE html> <html lang=" 阅读全文

posted @ 2022-03-26 10:18 守鹤阅读(255) 评论(0) 推荐(0)

选择器和伪元素

摘要：目标选择器 div > p：选择 div 的直接子代 p。 div + p：选择 div 后紧跟着的 p。 a[target]：通过 a 标签的 target 属性设置样式。 input[type="text"]：根据 input 的 type 属性值来设置样式，给 type 值是 text 的 i 阅读全文

posted @ 2022-03-26 09:50 守鹤阅读(76) 评论(0) 推荐(0)

2022年3月25日

布局实战

摘要： navbar 由于网页往下滑的时候这部分一直都在顶部，所以这个要单独弄出来添加粘性定位。导航栏由一个 nav 标签包裹，左边由一个 h1 加字体图标制作 logo。右边用一个 ul 列表制作导航部分 <nav id="navbar"> <h1 class="logo"> <span class="t 阅读全文

posted @ 2022-03-25 20:10 守鹤阅读(92) 评论(0) 推荐(0)

弹性布局

摘要：弹性布局的基本属性给父元素添加 display: flex; 之后就是弹性布局 flex-direction：指的是排列方式，column 指的是纵向排列，row 指的是横向排列，row-reverse 指的是反向排列 flex-wrap: wrap;：指的是自动换行 flex-flow：它是 f 阅读全文

posted @ 2022-03-25 14:36 守鹤阅读(116) 评论(0) 推荐(0)

响应式布局

摘要：媒体查询可以根据显示的宽度和高度来显示哪些样式。基本语法：media ( xxx : xxx ) { 样式 }。比如： @media(max-width: 500px) { body { background: cyan; } #samrtphone h1 { display: block; } 阅读全文

posted @ 2022-03-25 13:10 守鹤阅读(96) 评论(0) 推荐(0)

2022年3月24日

米修在线

摘要：头部区域头部区域运用 header 标签包裹。导航部分运用 nav 标签包裹，左边的 logo 用 h1 包裹，因为有跳转的功能所以里面要有一个a链接，a链接里面再写"米修在线"。右边三个用一个ul包裹，因为可以跳转所以要在 li 里面添加a，在里面再写内容。  <heade 阅读全文

posted @ 2022-03-24 14:18 守鹤阅读(306) 评论(0) 推荐(0)

0529qhy

公告