html5 css3中的一些笔记 -尊龙游戏旗舰厅官网
尊龙游戏旗舰厅官网
收集整理的这篇文章主要介绍了
html5 css3中的一些笔记
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
doctype html>
<html>
<head><meta charset="utf-8" ><title>css选择器title><style type="text/css">/* html 文档css:root{ border: solid 1px red ;};*//*字选择器 带>号 也可以不用带*//*ul > li{color: red;}*//*ul > li:first-child{color: red;}ul > li:last-child{color: red;}*//*输入框的启用和禁止输入的css*//*input:enabled{border: 1px solid red;}input:disabled{border: 1px solid blue;}*//*验证成功就显示blue,验证不成功显示green*//*input:valid{border: 1px solid blue;}input:invalid{border: 1px solid green;}*//*必填表单 和 不必填表单*//*input:required{}input:optional{}*//*1. 显示 2.访问过后的显示 3.鼠标移动 4.点击不动后的显示*//*a:link{}a:visited{}a:hover{}a:active{}*//*获取光标时 谷歌不兼容*//*input:focus{border: 1px solid red;}*//*a标签 href!=baidu 的a元素*//*a:not([href*="baidu"]){color: red;}*//*em是相对的 跟字号大小挂钩,很灵活*/p{margin: 0;padding: 0;background: gray;font-size: 20px;width: 50%;}style>
head><body><ul><li>ul第1个子元素li><li>ul第2个子元素li><li>ul第3个子元素li><li>ul第4个子元素li>ul><input type="text" /><input type="email" /><br/><a href="http:www.baidu.com" >baidua><a href="http:www.google.com" >googlea><a href="http:www.haosou.com" >haosoua><p>em单位的讲解em单位的讲解em单位的讲解em单位的讲解em单位的讲解p>
body>
html>
/*
display重要的概念
块级元素(display: block;) 1.能设置大小(height,width)2. 能自动的换行 div p
内联元素(display: inline;) 1.不能设置大小 2.不能自动换行 span b
内联-块(display: inline-block;) 1.能设置大小 2.不能自动换行 img
float浮动 理解:如果有div a,b。 a浮动b不浮动,相当于水下面的物体a浮动起来,然后在a后面的b就会跑到a的位置,a就会浮动到水面上,则就会挡住b。就相当于div a凸起来了,b就跑到a原来的位置了、
clean 为了下面的元素不受上面元素的浮动干扰,可以使用
clean:left|right|both; (清除浮动)
*/
div{width: 400px;height: 300px;/*css3中的透明度*/opacity: 0.5; border: 10px solid green;/*阴影效果1. 左右阴影 正是右边 负是左边2. 上下3. 阴影的模糊值 默认是04. 阴影的延伸半价5. 颜色(可选)6. inset值 (可选,内阴影)*/box-shadow: 5px 5px 5px 5px;/*轮廓*/outline: red solid 1px;}/*em 和 rem单位的用法,都是相对的*/html{font-size: 10px;// 等价于 6.25% (默认字体大小16px,10/16)}.p1{font-size: 1.7em; // em 相对于父元素的字体大小}.p2{font-size: 17px; }.p3{font-size: 1.7rem; // rem 直接相对于根目录(设置html的字体大小)}
转载于:https://www.cnblogs.com/shaoshao/p/4641261.html
总结
以上是尊龙游戏旗舰厅官网为你收集整理的html5 css3中的一些笔记的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇: python subprocess使用记
- 下一篇: