HTML/CSS
关注
分享
扫一扫
Web基础：html从入门到精通
mariner_zp
不信命的人本事很大
展开
-
html定位样式理解：绝对定位和相对定位
设置了绝对定位样式的元素会原地上浮，后浮起来的元素浮得最高，默认z-index（层级）为0。如下示例：父级div里面有3个div<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi...原创 2020-04-10 21:53:17 · 632 阅读 · 0 评论 -
html语义化标签使用
html5赋予网页更好的寓意和结构，方便搜索引擎的SEO处理。结构性标签加重语义，使结构更清晰。header：页眉也可用于块头部nav:导航article:用来在页面中一套结构，且完整独立的部分section:页面上的版块aside:侧边栏，广告，nav元素组以及其他的相似内容部分，aside内容应该与article有关footer:页面的底部版块功能性标签带有默认样式，加...原创 2020-04-02 09:49:11 · 252 阅读 · 0 评论 -
html实战一：3D切割轮播图
很开心，也很激动，每天都看着自己进步一点点，嘿嘿~附上视频链接：源码：html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...原创 2020-04-02 11:13:01 · 280 阅读 · 0 评论 -
div居中的优雅写法：flex布局
以前一直对div居中这个问题感到很麻烦，一般都是通过margin来实现居中的，然而还要算半天，今天get到了一种新方法，哈哈哈哈，特此记录：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content...原创 2020-03-31 08:57:21 · 2516 阅读 · 0 评论 -
html标签分类及行内元素、块级元素、行内块元素对比
先来区分一下html常用标签默认显示类型,初学者特别容易混淆：然后重点来了，html行内元素、块级元素、行内块元素各自有什么特点呢？了解清楚它们的特性对以后的编程非常重要!!!行内元素特性：(inline)1.与其他元素处于同一行2.不支持宽高3.上下外边距无效，auto无效（不支持auto居中）4.内边距只对内联元素产生影响，无视块元素5.标签之间的空格解析特殊的行内元素: ...原创 2020-03-19 16:05:59 · 339 阅读 · 0 评论 -
浮动样式带来的父元素高度塌陷问题及解决办法
首先什么是父元素高度塌陷呢？我们知道当对父元素里面的子元素开启浮动样式时，子元素就会原地上浮，不再受普通文档流控制，那么此时自然就不再受父元素控制了，而当父元素没有给定高度时，其高度都是由子元素撑开，若此时所有的子元素都浮动的话，父元素的高度就会塌陷为0。下面给个直观例子感受下：一个ul里面有三个li,此时将父元素的高度注释掉，其高度完全由内容撑开。...原创 2020-03-30 03:27:00 · 491 阅读 · 0 评论 -
CSS圆角样式详解
什么是圆角样式呢？直观一点理解就是原本矩形的盒子现在出现了圆角区域。这些都是通过css的border-radius圆角样式实现的。先来理解一下圆角样式的原理:...原创 2020-03-27 15:38:22 · 2262 阅读 · 0 评论 -
html伪类选择器
什么是伪类选择器？CSS伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。伪类选择器有哪些？一：伪类选择器之状态类:checked该伪类表示表单元素被选中的状态，可以用于单选按钮，复选框等元素上。:hover 该伪类表示鼠标箭头放在被选中的元素上的状态，可以用...原创 2020-03-25 10:03:48 · 1954 阅读 · 0 评论 -
CSS伪元素用法
什么是伪元素？CSS的伪元素用来添加一些选择器的特殊效果。之所以被称为伪元素是因为它们不是真正的页面元素。html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用css样式，表面上看貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。伪元素是两个冒号::常用的伪元素有哪些？::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素...原创 2020-03-25 01:52:08 · 224 阅读 · 0 评论 -
HTML基本标签及其作用速览
本篇为博主总结的html基本标签及其作用：下一篇写html标签分类原创 2020-03-19 13:49:54 · 203 阅读 · 0 评论 -
html复合选择器
基本选择器：标签选择器、class类名选择器(.name)、id选择器(#name)高级选择器：后代元素选择器、子代选择器、兄弟元素选择器、相邻元素选择器后代元素选择器：后代元素选择器是一个空格，空格前后各有一个选择器。作用：找到空格前元素的所有符合空格后选择器要求的后代元素。(儿子孙子…都是你的后代)例子：<style> .test div{ ...原创 2020-03-08 19:47:38 · 1956 阅读 · 0 评论