随笔分类 - HTML+CSS
html+css学习代码
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <!-- 表格用来表示一些格式化的数据 在网页中，使用table来创建表格 --> <table border="1px" al
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景</title> <style type="text/css"> .box{ width: 200px; height: 200px; padding: 10px; /* ba
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式2</title> <style> p{ width: 300px; background-color: #bfa; /* white-space: 如
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式</title> <style> p{ width: 500px; background-color: #bfa; font-size: 50px; /
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字体</title> <style type="text/css"> div{ border: 1px red solid; font-size: 30px; line-heigh
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行高</title> <style> /* 文本在网页中显示时，CSS会为每一个文本行都设置一个文本框，以容纳这些文字 */ div{ height: 100px; border:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>em和rem</title> <style> .box { color: red; font-size: 100px; font-family: 华文彩云, 微软雅黑; /* em
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿里图标字体</title> <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/> <styl
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>粘滞定位</title> <style> ul { height: 200px; width: 200px; background-color: #bfa; o
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定定位</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绝对定位</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; position:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定位/相对定位</title> <style type="text/css"> /* 定位 通过定位可以将元素摆放到页面中的任意位置 使用position属性来设置元素的定位 可选
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高度塌陷和外边距折叠的完美解决代码</title> <style> .box1{ border: 1px red solid; } .box2{ width: 200px; hei
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>clear</title> <style> .box1{ width: 100px; height: 100px; background-color: #bfa; float: l
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高度塌陷</title> <style type="text/css"> .box { border: 1px solid red; /* BFC无法直接开启，需要通过一些属性来开
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮廓和阴影</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圆角</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: #8
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>块和行内</title> </head> <body> <!-- 块元素（block） 块元素用于页面布局 行内元素（inline） 行内元素主要用于页面中选中文字 一般情况下只会
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>visibility</title> <style type="text/css"> /* visibility可以设置元素的显示状态 可选值 visible默认值，元素正常显示
阅读全文
